From e14eb24f1eea9f8e64d7a112d7c68bcb86d83c75 Mon Sep 17 00:00:00 2001 From: David Steinacher Date: Wed, 4 Dec 2024 10:46:36 -0700 Subject: [PATCH] revert back to our current buffering overlay styling --- assets/skin-super-modern/images/loader.svg | 19 +++- .../components/_bufferingoverlay.scss | 2 +- .../components/_loadingicon.scss | 28 ----- src/ts/components/loadingicon.ts | 104 ------------------ src/ts/components/touchcontroloverlay.ts | 26 ----- src/ts/uifactory.ts | 6 +- 6 files changed, 19 insertions(+), 166 deletions(-) delete mode 100644 src/scss/skin-super-modern/components/_loadingicon.scss delete mode 100644 src/ts/components/loadingicon.ts diff --git a/assets/skin-super-modern/images/loader.svg b/assets/skin-super-modern/images/loader.svg index 697a3b5cb..0c60ca01e 100644 --- a/assets/skin-super-modern/images/loader.svg +++ b/assets/skin-super-modern/images/loader.svg @@ -1,3 +1,18 @@ - - + + + + + + + + + + + + + + diff --git a/src/scss/skin-super-modern/components/_bufferingoverlay.scss b/src/scss/skin-super-modern/components/_bufferingoverlay.scss index 9c54fa799..0b38e6749 100644 --- 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/_loadingicon.scss b/src/scss/skin-super-modern/components/_loadingicon.scss deleted file mode 100644 index 4e45b8f58..000000000 --- a/src/scss/skin-super-modern/components/_loadingicon.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import '../variables'; -@import '../mixins'; - -@keyframes #{$prefix}-rotating { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -.#{$prefix}-ui-loading-icon { - @extend %ui-container; - - background: url('../../assets/skin-super-modern/images/loader.svg') center no-repeat; - cursor: default; - display: none; - height: 2.5em; - outline: none; - width: 2.5em; - - &.#{$prefix}-loading { - animation: #{$prefix}-rotating 3s linear infinite; - display: block; - } -} diff --git a/src/ts/components/loadingicon.ts b/src/ts/components/loadingicon.ts deleted file mode 100644 index 2e2cbcffa..000000000 --- a/src/ts/components/loadingicon.ts +++ /dev/null @@ -1,104 +0,0 @@ -import { PlayerAPI } from 'bitmovin-player'; -import { UIInstanceManager } from '../uimanager'; -import { Container, ContainerConfig } from './container'; -import { Timeout } from '../timeout'; -import { EventDispatcher, NoArgs, Event } from '../eventdispatcher'; - -export interface LoadingIconConfig extends ContainerConfig { - /** - * Delay in milliseconds after which the buffering overlay will be displayed. Useful to bypass short stalls without - * displaying the overlay. Set to 0 to display the overlay instantly. - * Default: 1000ms (1 second) - */ - showDelayMs?: number; -} - -export class LoadingIcon extends Container { - private isLoading: boolean = false; - - private loadingEvents = { - loadingStartEvent: new EventDispatcher(), - loadingEndEvent: new EventDispatcher(), - }; - - constructor(config: LoadingIconConfig = {}) { - super(config); - - this.config = this.mergeConfig(config, { - cssClass: 'ui-loading-icon', - role: 'icon', - showDelayMs: 1000, - }, this.config); - } - - configure(player: PlayerAPI, uimanager: UIInstanceManager): void { - super.configure(player, uimanager); - - let config = this.getConfig(); - - let overlayShowTimeout = new Timeout(config.showDelayMs, () => { - this.startLoader(); - }); - - let showOverlay = () => { - overlayShowTimeout.start(); - }; - - let hideOverlay = () => { - overlayShowTimeout.clear(); - this.stopLoader(); - }; - - player.on(player.exports.PlayerEvent.StallStarted, showOverlay); - player.on(player.exports.PlayerEvent.StallEnded, hideOverlay); - player.on(player.exports.PlayerEvent.Play, showOverlay); - player.on(player.exports.PlayerEvent.Playing, hideOverlay); - player.on(player.exports.PlayerEvent.Paused, hideOverlay); - player.on(player.exports.PlayerEvent.Seek, showOverlay); - player.on(player.exports.PlayerEvent.Seeked, hideOverlay); - player.on(player.exports.PlayerEvent.TimeShift, showOverlay); - player.on(player.exports.PlayerEvent.TimeShifted, hideOverlay); - player.on(player.exports.PlayerEvent.SourceUnloaded, hideOverlay); - - // Show overlay if player is already stalled at init - if (player.isStalled()) { - this.startLoader(); - } - } - - private startLoader(): void { - if (!this.isLoading) { - this.isLoading = true; - this.onLoadingStartEvent(); - this.getDomElement().addClass(this.prefixCss('loading')); - } - } - - private stopLoader(): void { - if (this.isLoading) { - this.isLoading = false; - this.onLoadingEndEvent(); - this.getDomElement().removeClass(this.prefixCss('loading')); - } - } - - public onLoadingStartEvent(): void { - this.loadingEvents.loadingStartEvent.dispatch(this); - } - - public onLoadingEndEvent(): void { - this.loadingEvents.loadingEndEvent.dispatch(this); - } - - public isSpinning(): boolean { - return this.isLoading; - } - - get loadingStartEvent(): Event { - return this.loadingEvents.loadingStartEvent.getEvent(); - } - - get loadingEndEvent(): Event { - return this.loadingEvents.loadingEndEvent.getEvent(); - } -} \ No newline at end of file diff --git a/src/ts/components/touchcontroloverlay.ts b/src/ts/components/touchcontroloverlay.ts index efa09b0bb..1c74f403a 100644 --- a/src/ts/components/touchcontroloverlay.ts +++ b/src/ts/components/touchcontroloverlay.ts @@ -7,7 +7,6 @@ import { Timeout } from '../timeout'; import { HTMLElementWithComponent } from '../dom'; import { Label, LabelConfig } from './label'; import { i18n } from '../localization/i18n'; -import { LoadingIcon } from './loadingicon'; export interface TouchControlOverlayConfig extends ContainerConfig { /** @@ -60,7 +59,6 @@ export class TouchControlOverlay extends Container { }; private playbackToggleButton: SmallCenteredPlaybackToggleButton; - private loadingIcon: LoadingIcon; private seekForwardLabel: Label; private seekBackwardLabel: Label; @@ -77,8 +75,6 @@ export class TouchControlOverlay extends Container { enterFullscreenOnInitialPlayback: Boolean(config.enterFullscreenOnInitialPlayback), }); - this.loadingIcon = new LoadingIcon(); - this.seekForwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-forward-label', hidden: true}); this.seekBackwardLabel = new Label({text: '', for: this.getConfig().id, cssClass: 'seek-backward-label', hidden: true}); @@ -94,27 +90,6 @@ export class TouchControlOverlay extends Container { configure(player: PlayerAPI, uimanager: UIInstanceManager): void { super.configure(player, uimanager); - this.loadingIcon.configure(player, uimanager); - - let showLoadingIcon = () => { - this.removeComponent(this.playbackToggleButton); - this.addComponent(this.loadingIcon); - this.updateComponents(); - }; - - let hideLoadingIcon = () => { - this.removeComponent(this.loadingIcon); - this.addComponent(this.playbackToggleButton); - this.updateComponents(); - }; - - if (this.loadingIcon.isSpinning()) { - showLoadingIcon(); - } - - this.loadingIcon.loadingStartEvent.subscribe(showLoadingIcon); - this.loadingIcon.loadingEndEvent.subscribe(hideLoadingIcon); - let playerSeekTime = 0; let startSeekTime = 0; @@ -132,7 +107,6 @@ export class TouchControlOverlay extends Container { this.playbackToggleButton.show(); }); - this.touchControlEvents.onSeekBackward.subscribe(() => { playerSeekTime -= this.config.seekTime; player.seek(playerSeekTime); diff --git a/src/ts/uifactory.ts b/src/ts/uifactory.ts index db1845604..f05b75ef1 100644 --- a/src/ts/uifactory.ts +++ b/src/ts/uifactory.ts @@ -517,12 +517,9 @@ export namespace UIFactory { return new UIContainer({ components: [ subtitleOverlay, - + new BufferingOverlay(), new CastStatusOverlay(), - // TODO: make an overlay for the quickseek buttons/double tab new TouchControlOverlay(), - // TODO: make a new buffer overlay - // new BufferingOverlay(), new RecommendationOverlay(), controlBar, new TitleBar({ @@ -531,7 +528,6 @@ export namespace UIFactory { new CastToggleButton(), new AirPlayToggleButton(), new VRToggleButton(), - // TODO: make a Share button ], }), settingsPanel,