Merge branch 'feature/super-modern-ui-for-web' into feature/super-mod…

…ern-subtitle-settings-panel # Conflicts: # src/scss/demo.scss # src/scss/skin-super-modern/components/_settingspanelpage.scss
bitmovin · Dec 9, 2024 · 3461a30 · 3461a30
2 parents 5530ae4 + 895ef35
commit 3461a30
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 30 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -43,12 +43,19 @@ <h4 class="card-title">Player Config</h4>
             </div>
 
             <div class="form-group form-check row">
-              <label for="config-ads" class="col-sm-4 form-check-label" for="config-ads">Ads</label>
+              <label for="config-ads" class="col-sm-4 form-check-label">Ads</label>
               <div class="col-sm-4 form-check">
                   <input type="checkbox" id="config-ads">
               </div>
               <span class="col-sm-4 form-text">Schedule client-side ads.</span>
             </div>
+
+            <div class="form-group form-check row">
+                <label for="display-portrait" class="col-sm-4 form-check-label">Simulate portrait phone layout</label>
+                <div class="col-sm-4 form-check">
+                    <input type="checkbox" id="display-portrait">
+                </div>
+            </div>
         </div>
 
         <div class="card-block">
@@ -595,7 +602,7 @@ <h4 class="card-title">
       .animate({ height: initialHeight }, 1000);
     },
     'Show Buffering overlay': function() {
-      var player = uiManager.currentUi.playerWrapper.getPlayer();
+      const player = uiManager.currentUi.playerWrapper.getPlayer();
 
       player.fireEventInUI(bitmovin.player.PlayerEvent.StallStarted, {});
     }
@@ -693,33 +700,54 @@ <h4 class="card-title">
   }, 'video.');
 
   // Collect all UI factory methods which are basically the different built-in skins and skin types
-  var uiFactoryMethods = [];
-  for (var member in bitmovin.playerui.UIFactory) {
-    if (typeof bitmovin.playerui.UIFactory[member] == 'function' && member.indexOf('build') === 0) {
-      uiFactoryMethods.push(member);
+  const configUISelect = $('#config-ui');
+  const collectUIMethods = function(clazz, filter, label) {
+    const convertToOption = function(value) {
+      return $('<option></option>').attr('value', value).text(value);
     }
-  }
 
-  var configUISelect = $('#config-ui');
+    let demoGroup = $(`<optgroup label="${label}" />`);
 
-  // Collect all UI Demos
-  var uiDemos = [];
-  for (var member in bitmovin.playerui.DemoFactory) {
-    if (typeof bitmovin.playerui.DemoFactory[member] === 'function' && member.indexOf('buildDemo') === 0) {
-      uiDemos.push(member);
-    }
+    Object.keys(clazz)
+      .filter((member) => {
+        return typeof clazz[member] === 'function';
+      })
+      .filter(filter)
+      .map(convertToOption)
+      .forEach((o) => {
+        demoGroup.append(o);
+      });
+
+    demoGroup.appendTo(configUISelect);
   }
 
-  // Fill the UI factory method select box
-  $.each(uiFactoryMethods, function(key, value) {
-    configUISelect.append($('<option></option>').attr('value', value).text(value));
-  });
-  // put all demos in own select-opt-group
-  let demoGroup = $('<optgroup label="Demos" />');
-  $.each(uiDemos, function(key, value) {
-    $('<option></option>').attr('value', value).text(value).appendTo(demoGroup);
+  const uiFactoryData = [
+    {
+      className: bitmovin.playerui.UIFactory,
+      filter: (member) => {
+        return member.indexOf('buildModern') === 0;
+      },
+      label: 'Default UIs',
+    },
+    {
+      className: bitmovin.playerui.UIFactory,
+      filter: (member) => {
+        return member.indexOf('buildSuperModern') === 0;
+      },
+      label: 'More modern UIs',
+    },
+    {
+      className: bitmovin.playerui.DemoFactory,
+      filter: (member) => {
+        return member.indexOf('buildDemo') === 0;
+      },
+      label: 'Demos',
+    },
+  ];
+
+  uiFactoryData.forEach((data) => {
+    collectUIMethods(data.className, data.filter, data.label);
   });
-  demoGroup.appendTo(configUISelect);
 
   // Refresh UI when a factory is selected
   configUISelect.change(function() {
@@ -749,6 +777,20 @@ <h4 class="card-title">
     storeConfigInStorage();
   });
 
+  var displayPortraitCheckbox = $('#display-portrait');
+  displayPortraitCheckbox.change(function() {
+    const isChecked = $(this).is(':checked');
+
+    const playerWrapperContainer = $('.player-wrapper');
+    if (isChecked) {
+      playerWrapperContainer.addClass('portrait');
+    } else {
+      playerWrapperContainer.removeClass('portrait');
+    }
+
+    storeConfigInStorage();
+  });
+
   function scheduleAds() {
     adBreaks.forEach(function(adBreak) {
       player.ads.schedule(adBreak);
@@ -763,6 +805,7 @@ <h4 class="card-title">
       adsEnabled: $('#config-ads').is(':checked'),
       source: $('#config-source').val(),
       uiOption: $('#config-ui').val(),
+      portraitEnabled: $('#display-portrait').is(':checked'),
     };
 
     try {
@@ -800,6 +843,10 @@ <h4 class="card-title">
     if ($('#config-ads') && config.adsEnabled !== undefined) {
       $('#config-ads').prop('checked', config.adsEnabled);
     }
+    if ($('#display-portrait') && config.portraitEnabled !== undefined) {
+      $('#display-portrait').prop('checked', config.portraitEnabled);
+      $('#display-portrait').trigger('change');
+    }
   })();
 </script>
 </body>

diff --git a/src/scss/demo.scss b/src/scss/demo.scss
@@ -9,7 +9,7 @@ body {
 
 .player-wrapper {
   &.portrait {
-    aspect-ratio: 9/19;
+    aspect-ratio: 9 / 16;
     margin: auto;
     width: 300px;
   }

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: 500;
-  //margin: 0 .5em;
   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
@@ -26,10 +26,7 @@ $seekbar-height: .3125em;
 
   align-items: center;
   font-size: 1em;
-  //display: flex;
   height: 1em;
-  //justify-content: center;
-  //margin: 0 .5em;
   position: relative;
   width: 100%;
 

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: 200px;
   min-width: fit-content;
   overflow: hidden;
   overflow-y: auto;