From 0e7c4b03c3908ad81427921c96b06c1efae4da54 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 20 Dec 2022 16:28:15 +0100 Subject: Add back to live feature --- .../src/assets/player/peertube-player-manager.ts | 1 + .../src/assets/player/shared/control-bar/index.ts | 1 + .../shared/control-bar/peertube-live-display.ts | 89 ++++++++++++++++++++++ .../manager-options/control-bar-options-builder.ts | 21 ++++- client/src/sass/player/control-bar.scss | 21 ++++- 5 files changed, 127 insertions(+), 6 deletions(-) create mode 100644 client/src/assets/player/shared/control-bar/peertube-live-display.ts (limited to 'client/src') diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 56310c4e9..710c9dc87 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -11,6 +11,7 @@ import './shared/control-bar/p2p-info-button' import './shared/control-bar/peertube-link-button' import './shared/control-bar/peertube-load-progress-bar' import './shared/control-bar/theater-button' +import './shared/control-bar/peertube-live-display' import './shared/settings/resolution-menu-button' import './shared/settings/resolution-menu-item' import './shared/settings/settings-dialog' diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts index db5b8938d..e71e90713 100644 --- a/client/src/assets/player/shared/control-bar/index.ts +++ b/client/src/assets/player/shared/control-bar/index.ts @@ -1,5 +1,6 @@ export * from './next-previous-video-button' export * from './p2p-info-button' export * from './peertube-link-button' +export * from './peertube-live-display' export * from './peertube-load-progress-bar' export * from './theater-button' diff --git a/client/src/assets/player/shared/control-bar/peertube-live-display.ts b/client/src/assets/player/shared/control-bar/peertube-live-display.ts new file mode 100644 index 000000000..8724ff294 --- /dev/null +++ b/client/src/assets/player/shared/control-bar/peertube-live-display.ts @@ -0,0 +1,89 @@ +import videojs from 'video.js' +import { PeerTubeLinkButtonOptions } from '../../types' + +const ClickableComponent = videojs.getComponent('ClickableComponent') + +class PeerTubeLiveDisplay extends ClickableComponent { + private interval: any + + private contentEl_: any + + constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) { + super(player, options as any) + + this.interval = this.setInterval(() => this.updateClass(), 1000) + + this.show() + this.updateSync(true) + } + + dispose () { + if (this.interval) { + this.clearInterval(this.interval) + this.interval = undefined + } + + this.contentEl_ = null + + super.dispose() + } + + createEl () { + const el = super.createEl('div', { + className: 'vjs-live-control vjs-control' + }) + + this.contentEl_ = videojs.dom.createEl('div', { + className: 'vjs-live-display' + }, { + 'aria-live': 'off' + }) + + this.contentEl_.appendChild(videojs.dom.createEl('span', { + className: 'vjs-control-text', + textContent: `${this.localize('Stream Type')}\u00a0` + })) + + this.contentEl_.appendChild(document.createTextNode(this.localize('LIVE'))) + + el.appendChild(this.contentEl_) + return el + } + + handleClick () { + const hlsjs = this.getHLSJS() + if (!hlsjs) return + + this.player().currentTime(hlsjs.liveSyncPosition) + this.updateSync(true) + } + + private updateClass () { + const hlsjs = this.getHLSJS() + if (!hlsjs) return + + const isSync = Math.abs(this.player().currentTime() - hlsjs.liveSyncPosition) < 10 + this.updateSync(isSync) + } + + private updateSync (isSync: boolean) { + if (isSync) { + this.addClass('synced-with-live-edge') + this.removeAttribute('title') + this.disable() + } else { + this.removeClass('synced-with-live-edge') + this.setAttribute('title', this.localize('Go back to the live')) + this.enable() + } + } + + private getHLSJS () { + const p2pMediaLoader = this.player()?.p2pMediaLoader + if (!p2pMediaLoader) return undefined + + return p2pMediaLoader().getHLSJS() + } +} + +videojs.registerComponent('PeerTubeLiveDisplay', PeerTubeLiveDisplay) diff --git a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts index 27f366732..df1e8eabe 100644 --- a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts +++ b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts @@ -30,10 +30,7 @@ export class ControlBarOptionsBuilder { } Object.assign(children, { - currentTimeDisplay: {}, - timeDivider: {}, - durationDisplay: {}, - liveDisplay: {}, + ...this.getTimeControls(), flexibleWidthSpacer: {}, @@ -90,7 +87,23 @@ export class ControlBarOptionsBuilder { } } + private getTimeControls () { + if (this.options.isLive) { + return { + peerTubeLiveDisplay: {} + } + } + + return { + currentTimeDisplay: {}, + timeDivider: {}, + durationDisplay: {} + } + } + private getProgressControl () { + if (this.options.isLive) return {} + const loadProgressBar = this.mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar' diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss index 0082378e4..96b3adf66 100644 --- a/client/src/sass/player/control-bar.scss +++ b/client/src/sass/player/control-bar.scss @@ -153,8 +153,25 @@ } .vjs-live-control { - line-height: $control-bar-height; - min-width: 4em; + padding: 5px 7px; + border-radius: 3px; + height: fit-content; + margin: auto 10px; + font-weight: bold; + max-width: fit-content; + opacity: 1 !important; + line-height: normal; + position: relative; + top: -1px; + + &.synced-with-live-edge { + background: #d7281c; + } + + &:not(.synced-with-live-edge) { + cursor: pointer; + background: #80807f; + } } .vjs-peertube { -- cgit v1.2.3