From 691736da22b5261b30a575f7839e47cfd3b47c51 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Mon, 9 Dec 2024 12:09:49 -0700 Subject: [PATCH 1/5] add option to quickly switch to a portrait layout --- src/html/index.html | 28 +++++++++++++++++++++++++++- src/scss/demo.scss | 8 ++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/src/html/index.html b/src/html/index.html index 73319771b..f55ab14fa 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -44,12 +44,19 @@

Player Config

- +
Schedule client-side ads.
+ +
+ +
+ +
+
@@ -745,6 +752,20 @@

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); @@ -759,6 +780,7 @@

adsEnabled: $('#config-ads').is(':checked'), source: $('#config-source').val(), uiOption: $('#config-ui').val(), + portraitEnabled: $('#display-portrait').is(':checked'), }; try { @@ -796,6 +818,10 @@

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'); + } })(); diff --git a/src/scss/demo.scss b/src/scss/demo.scss index 74e5c9c49..2e0ce9e1c 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -6,3 +6,11 @@ body { #player { position: relative; } + +.player-wrapper { + &.portrait { + aspect-ratio: 9/16; + margin: auto; + width: 300px; + } +} From 47106e2cfb6d46591716ed450300d5fbcb52406c Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Mon, 9 Dec 2024 13:01:59 -0700 Subject: [PATCH 2/5] split ui select box to simplify selection --- src/html/index.html | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/src/html/index.html b/src/html/index.html index f55ab14fa..4f1f9167f 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -696,14 +696,35 @@

}, 'video.'); // Collect all UI factory methods which are basically the different built-in skins and skin types - var uiFactoryMethods = []; + var configUISelect = $('#config-ui'); + + var defaultUis = []; for (var member in bitmovin.playerui.UIFactory) { - if (typeof bitmovin.playerui.UIFactory[member] == 'function' && member.indexOf('build') === 0) { - uiFactoryMethods.push(member); + if (typeof bitmovin.playerui.UIFactory[member] === 'function' && member.indexOf('buildModern') === 0) { + defaultUis.push(member); } } - var configUISelect = $('#config-ui'); + let defaultUisGroup = $(''); + // Fill the UI factory method select box + $.each(defaultUis, function(key, value) { + $('').attr('value', value).text(value).appendTo(defaultUisGroup); + }); + defaultUisGroup.appendTo(configUISelect); + + var superModernUis = []; + for (var member in bitmovin.playerui.UIFactory) { + if (typeof bitmovin.playerui.UIFactory[member] === 'function' && member.indexOf('buildSuperModern') === 0) { + superModernUis.push(member); + } + } + + let moreModernUisGroup = $(''); + // Fill the UI factory method select box + $.each(superModernUis, function(key, value) { + $('').attr('value', value).text(value).appendTo(moreModernUisGroup); + }); + moreModernUisGroup.appendTo(configUISelect); // Collect all UI Demos var uiDemos = []; @@ -713,10 +734,6 @@

} } - // Fill the UI factory method select box - $.each(uiFactoryMethods, function(key, value) { - configUISelect.append($('').attr('value', value).text(value)); - }); // put all demos in own select-opt-group let demoGroup = $(''); $.each(uiDemos, function(key, value) { From cafd7af7f640d55e9cf9492df1edea2614728be4 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Mon, 9 Dec 2024 13:50:49 -0700 Subject: [PATCH 3/5] improve ui variant collection * remove code duplication --- src/html/index.html | 78 ++++++++++++++++++++++++--------------------- 1 file changed, 41 insertions(+), 37 deletions(-) diff --git a/src/html/index.html b/src/html/index.html index 4f1f9167f..7211f61f2 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -696,50 +696,54 @@

}, 'video.'); // Collect all UI factory methods which are basically the different built-in skins and skin types - var configUISelect = $('#config-ui'); - - var defaultUis = []; - for (var member in bitmovin.playerui.UIFactory) { - if (typeof bitmovin.playerui.UIFactory[member] === 'function' && member.indexOf('buildModern') === 0) { - defaultUis.push(member); + const configUISelect = $('#config-ui'); + const collectUIMethods = function(clazz, filter, label) { + const convertToOption = function(value) { + return $('').attr('value', value).text(value); } - } - - let defaultUisGroup = $(''); - // Fill the UI factory method select box - $.each(defaultUis, function(key, value) { - $('').attr('value', value).text(value).appendTo(defaultUisGroup); - }); - defaultUisGroup.appendTo(configUISelect); - var superModernUis = []; - for (var member in bitmovin.playerui.UIFactory) { - if (typeof bitmovin.playerui.UIFactory[member] === 'function' && member.indexOf('buildSuperModern') === 0) { - superModernUis.push(member); - } - } + let demoGroup = $(``); - let moreModernUisGroup = $(''); - // Fill the UI factory method select box - $.each(superModernUis, function(key, value) { - $('').attr('value', value).text(value).appendTo(moreModernUisGroup); - }); - moreModernUisGroup.appendTo(configUISelect); + Object.keys(clazz) + .filter((member) => { + return typeof clazz[member] === 'function'; + }) + .filter(filter) + .map(convertToOption) + .forEach((o) => { + demoGroup.append(o); + }); - // 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); - } + demoGroup.appendTo(configUISelect); } - // put all demos in own select-opt-group - let demoGroup = $(''); - $.each(uiDemos, function(key, value) { - $('').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() { From 17b797bcc4f903cd3b0b5fda6c803c4f6c19b0a1 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Mon, 9 Dec 2024 14:07:06 -0700 Subject: [PATCH 4/5] add action button to trigger the buffering overlay --- src/html/index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/html/index.html b/src/html/index.html index 7211f61f2..a93690b21 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -602,6 +602,11 @@

.animate({ height: maxHeight }, 1000) .animate({ height: initialHeight }, 1000); }, + 'Show Buffering overlay': function() { + const player = uiManager.currentUi.playerWrapper.getPlayer(); + + player.fireEventInUI(bitmovin.player.PlayerEvent.StallStarted, {}); + } }; $.each(actions, function(title, handler) { $('#actions').append($('').click(function() {printResult(handler(), title);})).append(' '); From 910cc75bd1f68fb442b89382c7d1c523a18d8751 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Mon, 9 Dec 2024 14:09:38 -0700 Subject: [PATCH 5/5] fix css linting --- src/scss/demo.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/demo.scss b/src/scss/demo.scss index 2e0ce9e1c..9a5d1f2c6 100644 --- a/src/scss/demo.scss +++ b/src/scss/demo.scss @@ -9,7 +9,7 @@ body { .player-wrapper { &.portrait { - aspect-ratio: 9/16; + aspect-ratio: 9 / 16; margin: auto; width: 300px; }