Merge pull request #654 from bitmovin/feature/super-modern-ui-for-web

Enable the new UI design on browsers
bitmovin · Dec 11, 2024 · 76c794e · 76c794e
2 parents c7c53a3 + 895ef35
commit 76c794e
Show file tree

Hide file tree

Showing 24 changed files with 161 additions and 227 deletions.
diff --git a/assets/skin-super-modern/images/fullscreen.svg b/assets/skin-super-modern/images/fullscreen.svg
diff --git a/assets/skin-super-modern/images/fullscreenX.svg b/assets/skin-super-modern/images/fullscreenX.svg
diff --git a/assets/skin-super-modern/images/fullscreenXsmall.svg b/assets/skin-super-modern/images/fullscreenXsmall.svg
diff --git a/assets/skin-super-modern/images/fullscreensmall.svg b/assets/skin-super-modern/images/fullscreensmall.svg
diff --git a/assets/skin-super-modern/images/loader.svg b/assets/skin-super-modern/images/loader.svg
diff --git a/src/html/index.html b/src/html/index.html
@@ -6,7 +6,6 @@
     <title>Bitmovin Player UI Demo</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
     <link rel="stylesheet" href="css/demo.css">
-    <link rel="stylesheet" href="css/bitmovinplayer-modern-ui.css">
     <link rel="stylesheet" href="css/bitmovinplayer-ui.css">
 </head>
 <body>

diff --git a/src/scss/bitmovinplayer-modern-ui.scss b/src/scss/bitmovinplayer-modern-ui.scss
diff --git a/src/scss/bitmovinplayer-ui.scss b/src/scss/bitmovinplayer-ui.scss
@@ -1 +1,2 @@
 @import 'skin-modern/skin';
+@import 'skin-super-modern/skin';
diff --git a/src/scss/skin-super-modern/_skin-modern-smallscreen.scss b/src/scss/skin-super-modern/_skin-modern-smallscreen.scss
@@ -3,14 +3,6 @@
 
 &.#{$prefix}-ui-skin-modern-smallscreen {
 
-  .#{$prefix}-ui-fullscreentogglebutton {
-    background-image: url('../../assets/skin-super-modern/images/fullscreensmall.svg');
-
-    &.#{$prefix}-on {
-      background-image: url('../../assets/skin-super-modern/images/fullscreenXsmall.svg');
-    }
-  }
-
   // Do not display watermark in mobile view
   .#{$prefix}-ui-watermark {
     display: none;

diff --git a/src/scss/skin-super-modern/_skin.scss b/src/scss/skin-super-modern/_skin.scss
@@ -49,7 +49,6 @@
   @import 'components/subtitlesettingspaneltogglebutton';
   @import 'components/touch-control-overlay';
   @import 'components/smallcenteredplaybacktogglebutton';
-  @import 'components/loadingicon';
   @import 'skin-ads';
   @import 'skin-cast-receiver';
   @import 'skin-modern-smallscreen';

diff --git a/src/scss/skin-super-modern/components/_bufferingoverlay.scss b/src/scss/skin-super-modern/components/_bufferingoverlay.scss
@@ -64,7 +64,7 @@
     }
 
     animation: #{$prefix}-fancy $buffering-animation-duration ease-in infinite;
-    background: url('../../assets/skin-modern/images/loader.svg') no-repeat center;
+    background: url('../../assets/skin-super-modern/images/loader.svg') no-repeat center;
     display: inline-block;
     height: 2em;
     margin: .2em;

diff --git a/src/scss/skin-super-modern/components/_button.scss b/src/scss/skin-super-modern/components/_button.scss
@@ -7,7 +7,7 @@
   background-origin: content-box;
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 1em;
+  background-size: 1.2em;
   border: 0;
   box-sizing: content-box;
   cursor: pointer;

diff --git a/src/scss/skin-super-modern/components/_controlbar.scss b/src/scss/skin-super-modern/components/_controlbar.scss
@@ -10,19 +10,23 @@
   background: linear-gradient(to bottom, $color-transparent, $color-background-bars);
   box-sizing: border-box;
   line-height: 1em;
-  padding: 0 .75em;
+  padding: 1em 1em .5em;
 
   .#{$prefix}-controlbar-top,
   .#{$prefix}-controlbar-bottom {
     > .#{$prefix}-container-wrapper {
       display: flex;
-      margin: .25em 0;
+      margin: .5em 0;
     }
   }
 
   .#{$prefix}-controlbar-top {
     .#{$prefix}-ui-label {
-      font-size: .6em;
+      font-size: .9em;
+    }
+
+    > .#{$prefix}-container-wrapper > * {
+      margin: 0 .5em;
     }
   }
 

diff --git a/src/scss/skin-super-modern/components/_loadingicon.scss b/src/scss/skin-super-modern/components/_loadingicon.scss
diff --git a/src/scss/skin-super-modern/components/_playbacktimelabel.scss b/src/scss/skin-super-modern/components/_playbacktimelabel.scss
@@ -3,9 +3,7 @@
 .#{$prefix}-ui-playbacktimelabel {
   @extend %ui-label;
 
-  font-size: .8em;
-  font-weight: bold;
-  margin: 0 .5em;
+  font-weight: 500;
   text-transform: uppercase;
 
   &.#{$prefix}-ui-playbacktimelabel-live {

diff --git a/src/scss/skin-super-modern/components/_seekbar.scss b/src/scss/skin-super-modern/components/_seekbar.scss
@@ -1,7 +1,7 @@
 @import '../variables';
 @import '../mixins';
 
-$seekbar-height: .3em;
+$seekbar-height: .3125em;
 
 // sass-lint:disable no-vendor-prefixes
 %bar {
@@ -25,19 +25,16 @@ $seekbar-height: .3em;
   @include focusable;
 
   align-items: center;
-  display: flex;
+  font-size: 1em;
   height: 1em;
-  justify-content: center;
-  margin: 0 .5em;
   position: relative;
   width: 100%;
 
   $bar-inset: auto;
-
   .#{$prefix}-seekbar-playbackposition-marker {
     @extend %bar;
 
-    @include seekbar-position-marker($seekbar-height * 2.2);
+    @include seekbar-position-marker($seekbar-height * 3);
     background-color: $color-highlight;
     border-radius: 50%;
     box-shadow: 0 0 3px 0 transparentize($color: #000, $amount: .75);
@@ -67,7 +64,7 @@ $seekbar-height: .3em;
 
     .#{$prefix}-seekbar-bufferlevel {
       @extend %bar;
-      background-color: transparentize($color-secondary, .3);
+      background-color: $color-primary;
       margin: $bar-inset 0;
       transition: .3s linear, .3s linear;
       transition-property: transform;

diff --git a/src/scss/skin-super-modern/components/_seekbarlabel.scss b/src/scss/skin-super-modern/components/_seekbarlabel.scss
@@ -46,13 +46,13 @@
 
         .#{$prefix}-seekbar-label-time {
           display: block;
-          font-weight: bold;
+          font-weight: 500;
           line-height: .8em;
         }
 
         .#{$prefix}-seekbar-label-title {
           display: block;
-          font-weight: bold;
+          font-weight: 500;
           margin-bottom: .3em;
           white-space: normal;
         }

diff --git a/src/scss/skin-super-modern/components/_settingspanel.scss b/src/scss/skin-super-modern/components/_settingspanel.scss
@@ -18,7 +18,6 @@
   bottom: 3.5em;
   height: fit-content;
   max-height: 60%;
-  max-width: 140px;
   min-width: fit-content;
   overflow: hidden;
   overflow-y: auto;

diff --git a/src/scss/skin-super-modern/components/_settingspanelpage.scss b/src/scss/skin-super-modern/components/_settingspanelpage.scss
@@ -11,8 +11,8 @@
   .#{$prefix}-container-wrapper > * {
     &.#{$prefix}-ui-label {
       display: inline-block;
-      font-size: .6em;
-      font-weight: 600;
+      font-size: .8em;
+      font-weight: 500;
       margin: 0;
       text-align: justify;
       width: 45%;
@@ -74,8 +74,7 @@
   }
 
   .#{$prefix}-ui-settings-panel-item {
-    height: 20px;
-    padding: 0 .4em;
+    padding: .5em .7em;
     white-space: nowrap;
 
     &:hover {

diff --git a/src/scss/skin-super-modern/components/_titlebar.scss b/src/scss/skin-super-modern/components/_titlebar.scss
@@ -9,11 +9,11 @@
 
   background: linear-gradient(to top, $color-transparent, $color-background-bars);
   box-sizing: border-box;
-  padding: 0 .75em;
+  padding: .5em 1em 1em;
   pointer-events: none;
 
   > .#{$prefix}-container-wrapper {
-    padding: .75em 0;
+    padding: .5em;
     pointer-events: none;
 
     .#{$prefix}-label-metadata {
@@ -24,7 +24,7 @@
       cursor: default;
       display: block;
       font-size: 1.2em;
-      font-weight: bold;
+      font-weight: 500;
       text-shadow: 0 0 5px $color-black;
       white-space: normal;
     }

diff --git a/src/scss/skin-super-modern/components/_volumeslider.scss b/src/scss/skin-super-modern/components/_volumeslider.scss
@@ -5,13 +5,13 @@
 .#{$prefix}-ui-volumeslider {
   @extend %ui-seekbar;
 
-  .#{$prefix}-seekbar {
-    .#{$prefix}-seekbar-playbackposition-marker {
-      @include seekbar-position-marker($seekbar-height * 3 - .25em);
-      background-color: $color-highlight;
-      border: 0;
-    }
+  .#{$prefix}-seekbar-playbackposition-marker {
+    @include seekbar-position-marker($seekbar-height * 3 - .25em);
+    background-color: $color-highlight;
+    border: 0;
+  }
 
+  .#{$prefix}-seekbar {
     .#{$prefix}-seekbar-bufferlevel {
       display: none;
     }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		@import 'skin-modern/skin';
		@import 'skin-super-modern/skin';