From 2adfc7ea9a1f858db874df9fe322e7ae833db77c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 23 Jan 2019 15:36:45 +0100 Subject: Refractor videojs player Add fake p2p-media-loader plugin --- .../src/assets/player/peertube-player-manager.ts | 388 +++++++++++++++++++++ 1 file changed, 388 insertions(+) create mode 100644 client/src/assets/player/peertube-player-manager.ts (limited to 'client/src/assets/player/peertube-player-manager.ts') diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts new file mode 100644 index 000000000..9155c0698 --- /dev/null +++ b/client/src/assets/player/peertube-player-manager.ts @@ -0,0 +1,388 @@ +import { VideoFile } from '../../../../shared/models/videos' +// @ts-ignore +import * as videojs from 'video.js' +import 'videojs-hotkeys' +import 'videojs-dock' +import 'videojs-contextmenu-ui' +import 'videojs-contrib-quality-levels' +import './peertube-plugin' +import './videojs-components/peertube-link-button' +import './videojs-components/resolution-menu-button' +import './videojs-components/settings-menu-button' +import './videojs-components/p2p-info-button' +import './videojs-components/peertube-load-progress-bar' +import './videojs-components/theater-button' +import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings' +import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils' +import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n' +import { Engine } from 'p2p-media-loader-hlsjs' + +// Change 'Playback Rate' to 'Speed' (smaller for our settings menu) +videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed' +// Change Captions to Subtitles/CC +videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC' +// We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know) +videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' ' + +type PlayerMode = 'webtorrent' | 'p2p-media-loader' + +type WebtorrentOptions = { + videoFiles: VideoFile[] +} + +type P2PMediaLoaderOptions = { + playlistUrl: string +} + +type CommonOptions = { + playerElement: HTMLVideoElement + + autoplay: boolean + videoDuration: number + enableHotkeys: boolean + inactivityTimeout: number + poster: string + startTime: number | string + + theaterMode: boolean + captions: boolean + peertubeLink: boolean + + videoViewUrl: string + embedUrl: string + + language?: string + controls?: boolean + muted?: boolean + loop?: boolean + subtitle?: string + + videoCaptions: VideoJSCaption[] + + userWatching?: UserWatching + + serverUrl: string +} + +export type PeertubePlayerManagerOptions = { + common: CommonOptions, + webtorrent?: WebtorrentOptions, + p2pMediaLoader?: P2PMediaLoaderOptions +} + +export class PeertubePlayerManager { + + private static videojsLocaleCache: { [ path: string ]: any } = {} + + static getServerTranslations (serverUrl: string, locale: string) { + const path = PeertubePlayerManager.getLocalePath(serverUrl, locale) + // It is the default locale, nothing to translate + if (!path) return Promise.resolve(undefined) + + return fetch(path + '/server.json') + .then(res => res.json()) + .catch(err => { + console.error('Cannot get server translations', err) + return undefined + }) + } + + static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) { + if (mode === 'webtorrent') await import('./webtorrent-plugin') + if (mode === 'p2p-media-loader') await import('./p2p-media-loader-plugin') + + const videojsOptions = this.getVideojsOptions(mode, options) + + await this.loadLocaleInVideoJS(options.common.serverUrl, options.common.language) + + const self = this + return new Promise(res => { + videojs(options.common.playerElement, videojsOptions, function (this: any) { + const player = this + + self.addContextMenu(mode, player, options.common.embedUrl) + + return res(player) + }) + }) + } + + private static loadLocaleInVideoJS (serverUrl: string, locale: string) { + const path = PeertubePlayerManager.getLocalePath(serverUrl, locale) + // It is the default locale, nothing to translate + if (!path) return Promise.resolve(undefined) + + let p: Promise + + if (PeertubePlayerManager.videojsLocaleCache[path]) { + p = Promise.resolve(PeertubePlayerManager.videojsLocaleCache[path]) + } else { + p = fetch(path + '/player.json') + .then(res => res.json()) + .then(json => { + PeertubePlayerManager.videojsLocaleCache[path] = json + return json + }) + .catch(err => { + console.error('Cannot get player translations', err) + return undefined + }) + } + + const completeLocale = getCompleteLocale(locale) + return p.then(json => videojs.addLanguage(getShortLocale(completeLocale), json)) + } + + private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions) { + const commonOptions = options.common + const webtorrentOptions = options.webtorrent + const p2pMediaLoaderOptions = options.p2pMediaLoader + + const plugins: VideoJSPluginOptions = { + peertube: { + autoplay: commonOptions.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent + videoViewUrl: commonOptions.videoViewUrl, + videoDuration: commonOptions.videoDuration, + startTime: commonOptions.startTime, + userWatching: commonOptions.userWatching, + subtitle: commonOptions.subtitle, + videoCaptions: commonOptions.videoCaptions + } + } + + if (p2pMediaLoaderOptions) { + const p2pMediaLoader: P2PMediaLoaderPluginOptions = { + type: 'application/x-mpegURL', + src: p2pMediaLoaderOptions.playlistUrl + } + + const config = { + segments: { + swarmId: 'swarm' // TODO: choose swarm id + } + } + const streamrootHls = { + html5: { + hlsjsConfig: { + liveSyncDurationCount: 7, + loader: new Engine(config).createLoaderClass() + } + } + } + + Object.assign(plugins, { p2pMediaLoader, streamrootHls }) + } + + if (webtorrentOptions) { + const webtorrent = { + autoplay: commonOptions.autoplay, + videoDuration: commonOptions.videoDuration, + playerElement: commonOptions.playerElement, + videoFiles: webtorrentOptions.videoFiles + } + Object.assign(plugins, { webtorrent }) + } + + const videojsOptions = { + // We don't use text track settings for now + textTrackSettings: false, + controls: commonOptions.controls !== undefined ? commonOptions.controls : true, + loop: commonOptions.loop !== undefined ? commonOptions.loop : false, + + muted: commonOptions.muted !== undefined + ? commonOptions.muted + : undefined, // Undefined so the player knows it has to check the local storage + + poster: commonOptions.poster, + autoplay: false, + inactivityTimeout: commonOptions.inactivityTimeout, + playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ], + plugins, + controlBar: { + children: this.getControlBarChildren(mode, { + captions: commonOptions.captions, + peertubeLink: commonOptions.peertubeLink, + theaterMode: commonOptions.theaterMode + }) + } + } + + if (commonOptions.enableHotkeys === true) { + Object.assign(videojsOptions.plugins, { + hotkeys: { + enableVolumeScroll: false, + enableModifiersForNumbers: false, + + fullscreenKey: function (event: KeyboardEvent) { + // fullscreen with the f key or Ctrl+Enter + return event.key === 'f' || (event.ctrlKey && event.key === 'Enter') + }, + + seekStep: function (event: KeyboardEvent) { + // mimic VLC seek behavior, and default to 5 (original value is 5). + if (event.ctrlKey && event.altKey) { + return 5 * 60 + } else if (event.ctrlKey) { + return 60 + } else if (event.altKey) { + return 10 + } else { + return 5 + } + }, + + customKeys: { + increasePlaybackRateKey: { + key: function (event: KeyboardEvent) { + return event.key === '>' + }, + handler: function (player: videojs.Player) { + player.playbackRate((player.playbackRate() + 0.1).toFixed(2)) + } + }, + decreasePlaybackRateKey: { + key: function (event: KeyboardEvent) { + return event.key === '<' + }, + handler: function (player: videojs.Player) { + player.playbackRate((player.playbackRate() - 0.1).toFixed(2)) + } + }, + frameByFrame: { + key: function (event: KeyboardEvent) { + return event.key === '.' + }, + handler: function (player: videojs.Player) { + player.pause() + // Calculate movement distance (assuming 30 fps) + const dist = 1 / 30 + player.currentTime(player.currentTime() + dist) + } + } + } + } + }) + } + + if (commonOptions.language && !isDefaultLocale(commonOptions.language)) { + Object.assign(videojsOptions, { language: commonOptions.language }) + } + + return videojsOptions + } + + private static getControlBarChildren (mode: PlayerMode, options: { + peertubeLink: boolean + theaterMode: boolean, + captions: boolean + }) { + const settingEntries = [] + const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar' + + // Keep an order + settingEntries.push('playbackRateMenuButton') + if (options.captions === true) settingEntries.push('captionsButton') + settingEntries.push('resolutionMenuButton') + + const children = { + 'playToggle': {}, + 'currentTimeDisplay': {}, + 'timeDivider': {}, + 'durationDisplay': {}, + 'liveDisplay': {}, + + 'flexibleWidthSpacer': {}, + 'progressControl': { + children: { + 'seekBar': { + children: { + [loadProgressBar]: {}, + 'mouseTimeDisplay': {}, + 'playProgressBar': {} + } + } + } + }, + + 'p2PInfoButton': {}, + + 'muteToggle': {}, + 'volumeControl': {}, + + 'settingsButton': { + setup: { + maxHeightOffset: 40 + }, + entries: settingEntries + } + } + + if (options.peertubeLink === true) { + Object.assign(children, { + 'peerTubeLinkButton': {} + }) + } + + if (options.theaterMode === true) { + Object.assign(children, { + 'theaterButton': {} + }) + } + + Object.assign(children, { + 'fullscreenToggle': {} + }) + + return children + } + + private static addContextMenu (mode: PlayerMode, player: any, videoEmbedUrl: string) { + const content = [ + { + label: player.localize('Copy the video URL'), + listener: function () { + copyToClipboard(buildVideoLink()) + } + }, + { + label: player.localize('Copy the video URL at the current time'), + listener: function () { + const player = this as videojs.Player + copyToClipboard(buildVideoLink(player.currentTime())) + } + }, + { + label: player.localize('Copy embed code'), + listener: () => { + copyToClipboard(buildVideoEmbed(videoEmbedUrl)) + } + } + ] + + if (mode === 'webtorrent') { + content.push({ + label: player.localize('Copy magnet URI'), + listener: function () { + const player = this as videojs.Player + copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri) + } + }) + } + + player.contextmenuUI({ content }) + } + + private static getLocalePath (serverUrl: string, locale: string) { + const completeLocale = getCompleteLocale(locale) + + if (!is18nLocale(completeLocale) || isDefaultLocale(completeLocale)) return undefined + + return serverUrl + '/client/locales/' + completeLocale + } +} + +// ############################################################################ + +export { + videojs +} -- cgit v1.2.3