From 8506cb1f02ee117d88d0fc4bfab413b7c19b3b03 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Mon, 2 Oct 2023 17:01:21 +0200 Subject: [PATCH 001/121] =?UTF-8?q?=F0=9F=9A=A7=20Work=20on=20videoplayer?= =?UTF-8?q?=20rework?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/video/ControlBar.js | 1089 +++++++++++++++++ client/components/video/Player2.vue | 56 + client/composables/videoplayer/videoState.ts | 23 + client/pages/watch.vue | 6 +- client/utils/videoplayer/adapters/adapter.ts | 22 + .../utils/videoplayer/adapters/dashAdapter.ts | 62 + client/utils/videoplayer/helpers/dash.ts | 9 - 7 files changed, 1256 insertions(+), 11 deletions(-) create mode 100644 client/components/video/ControlBar.js create mode 100644 client/components/video/Player2.vue create mode 100644 client/composables/videoplayer/videoState.ts create mode 100644 client/utils/videoplayer/adapters/adapter.ts create mode 100644 client/utils/videoplayer/adapters/dashAdapter.ts diff --git a/client/components/video/ControlBar.js b/client/components/video/ControlBar.js new file mode 100644 index 000000000..3864dbdee --- /dev/null +++ b/client/components/video/ControlBar.js @@ -0,0 +1,1089 @@ +/** + * The copyright in this software is being made available under the BSD License, + * included below. This software may be subject to other third party and contributor + * rights, including patent rights, and no such rights are granted under this license. + * + * Copyright (c) 2013, Dash Industry Forum. + * All rights reserved. + * + * Redistribution and use in source and binary forms, with or without modification, + * are permitted provided that the following conditions are met: + * * Redistributions of source code must retain the above copyright notice, this + * list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above copyright notice, + * this list of conditions and the following disclaimer in the documentation and/or + * other materials provided with the distribution. + * * Neither the name of Dash Industry Forum nor the names of its + * contributors may be used to endorse or promote products derived from this software + * without specific prior written permission. + * + * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS AS IS AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED + * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. + * IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, + * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT + * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR + * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, + * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) + * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE + * POSSIBILITY OF SUCH DAMAGE. + */ + +/** + * @module ControlBar + * @param {object=} dashjsMediaPlayer - dashjs reference + * @param {boolean=} displayUTCTimeCodes - true if time is displayed in UTC format, false otherwise + */ +// eslint-disable-next-line no-unused-vars +var ControlBar = function (dashjsMediaPlayer, displayUTCTimeCodes) { + + var player = this.player = dashjsMediaPlayer; + var self = this; + + var captionMenu = null; + var bitrateListMenu = null; + var trackSwitchMenu = null; + var menuHandlersList = { + bitrate: null, + caption: null, + track: null + }; + var lastVolumeLevel = NaN; + var seeking = false; + var videoControllerVisibleTimeout = 0; + var liveThresholdSecs = 1; + var textTrackList = {}; + var forceQuality = false; + var video, + videoContainer, + videoController, + playPauseBtn, + bitrateListBtn, + captionBtn, + trackSwitchBtn, + seekbar, + seekbarPlay, + seekbarBuffer, + muteBtn, + volumebar, + fullscreenBtn, + timeDisplay, + durationDisplay, + thumbnailContainer, + thumbnailElem, + thumbnailTimeLabel, + idSuffix, + seekbarBufferInterval; + + //************************************************************************************ + // THUMBNAIL CONSTANTS + //************************************************************************************ + // Maximum percentage of player height that the thumbnail will fill + var maxPercentageThumbnailScreen = 0.15; + // Separation between the control bar and the thumbnail (in px) + var bottomMarginThumbnail = 10; + // Maximum scale so small thumbs are not scaled too high + var maximumScale = 2; + + var initControls = function (suffix) { + idSuffix = suffix; + videoController = document.getElementById(getControlId('videoController')); + playPauseBtn = document.getElementById(getControlId('playPauseBtn')); + bitrateListBtn = document.getElementById(getControlId('bitrateListBtn')); + captionBtn = document.getElementById(getControlId('captionBtn')); + trackSwitchBtn = document.getElementById(getControlId('trackSwitchBtn')); + seekbar = document.getElementById(getControlId('seekbar')); + seekbarPlay = document.getElementById(getControlId('seekbar-play')); + seekbarBuffer = document.getElementById(getControlId('seekbar-buffer')); + muteBtn = document.getElementById(getControlId('muteBtn')); + volumebar = document.getElementById(getControlId('volumebar')); + fullscreenBtn = document.getElementById(getControlId('fullscreenBtn')); + timeDisplay = document.getElementById(getControlId('videoTime')); + durationDisplay = document.getElementById(getControlId('videoDuration')); + thumbnailContainer = document.getElementById(getControlId('thumbnail-container')); + thumbnailElem = document.getElementById(getControlId('thumbnail-elem')); + thumbnailTimeLabel = document.getElementById(getControlId('thumbnail-time-label')); + }; + + var addPlayerEventsListeners = function () { + self.player.on(dashjs.MediaPlayer.events.PLAYBACK_STARTED, _onPlayStart, this); + self.player.on(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, _onPlaybackPaused, this); + self.player.on(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED, _onPlayTimeUpdate, this); + self.player.on(dashjs.MediaPlayer.events.STREAM_ACTIVATED, _onStreamActivated, this); + self.player.on(dashjs.MediaPlayer.events.STREAM_DEACTIVATED, _onStreamDeactivated, this); + self.player.on(dashjs.MediaPlayer.events.STREAM_TEARDOWN_COMPLETE, _onStreamTeardownComplete, this); + self.player.on(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED, _onTracksAdded, this); + self.player.on(dashjs.MediaPlayer.events.BUFFER_LEVEL_UPDATED, _onBufferLevelUpdated, this); + }; + + var removePlayerEventsListeners = function () { + self.player.off(dashjs.MediaPlayer.events.PLAYBACK_STARTED, _onPlayStart, this); + self.player.off(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, _onPlaybackPaused, this); + self.player.off(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED, _onPlayTimeUpdate, this); + self.player.off(dashjs.MediaPlayer.events.STREAM_ACTIVATED, _onStreamActivated, this); + self.player.off(dashjs.MediaPlayer.events.STREAM_DEACTIVATED, _onStreamDeactivated, this); + self.player.off(dashjs.MediaPlayer.events.STREAM_TEARDOWN_COMPLETE, _onStreamTeardownComplete, this); + self.player.off(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED, _onTracksAdded, this); + self.player.off(dashjs.MediaPlayer.events.BUFFER_LEVEL_UPDATED, _onBufferLevelUpdated, this); + }; + + var getControlId = function (id) { + return id + (idSuffix ? idSuffix : ''); + }; + + var setPlayer = function (player) { + if (self.player) { + removePlayerEventsListeners(); + } + player = self.player = player; + addPlayerEventsListeners(); + }; + + //************************************************************************************ + // PLAYBACK + //************************************************************************************ + + var togglePlayPauseBtnState = function () { + if (self.player.isPaused()) { + setPlayBtn(); + } else { + setPauseBtn(); + } + }; + + var setPlayBtn = function () { + var span = document.getElementById(getControlId('iconPlayPause')); + if (span !== null) { + span.classList.remove('icon-pause'); + span.classList.add('icon-play'); + } + }; + + var setPauseBtn = function () { + var span = document.getElementById(getControlId('iconPlayPause')); + if (span !== null) { + span.classList.remove('icon-play'); + span.classList.add('icon-pause'); + } + }; + + var _onPlayPauseClick = function (/*e*/) { + togglePlayPauseBtnState.call(this); + self.player.isPaused() ? self.player.play() : self.player.pause(); + }; + + var _onPlaybackPaused = function (/*e*/) { + togglePlayPauseBtnState(); + }; + + var _onPlayStart = function (/*e*/) { + setTime(displayUTCTimeCodes ? self.player.timeAsUTC() : self.player.time()); + updateDuration(); + togglePlayPauseBtnState(); + if (seekbarBufferInterval) { + clearInterval(seekbarBufferInterval); + } + }; + + var _onPlayTimeUpdate = function (/*e*/) { + updateDuration(); + if (!seeking) { + setTime(displayUTCTimeCodes ? player.timeAsUTC() : player.time()); + if (seekbarPlay) { + seekbarPlay.style.width = (player.time() / player.duration() * 100) + '%'; + } + + if (seekbar.getAttribute('type') === 'range') { + seekbar.value = player.time(); + } + + } + }; + + var getBufferLevel = function () { + var bufferLevel = 0; + if (self.player.getDashMetrics) { + var dashMetrics = self.player.getDashMetrics(); + if (dashMetrics) { + bufferLevel = dashMetrics.getCurrentBufferLevel('video', true); + if (!bufferLevel) { + bufferLevel = dashMetrics.getCurrentBufferLevel('audio', true); + } + } + } + return bufferLevel; + }; + + //************************************************************************************ + // VOLUME + //************************************************************************************ + + var toggleMuteBtnState = function () { + var span = document.getElementById(getControlId('iconMute')); + if (self.player.isMuted()) { + span.classList.remove('icon-mute-off'); + span.classList.add('icon-mute-on'); + } else { + span.classList.remove('icon-mute-on'); + span.classList.add('icon-mute-off'); + } + }; + + var onMuteClick = function (/*e*/) { + if (self.player.isMuted() && !isNaN(lastVolumeLevel)) { + setVolume(lastVolumeLevel); + } else { + lastVolumeLevel = parseFloat(volumebar.value); + setVolume(0); + } + self.player.setMute(self.player.getVolume() === 0); + toggleMuteBtnState(); + }; + + var setVolume = function (value) { + if (typeof value === 'number') { + volumebar.value = value; + } + self.player.setVolume(parseFloat(volumebar.value)); + self.player.setMute(self.player.getVolume() === 0); + if (isNaN(lastVolumeLevel)) { + lastVolumeLevel = self.player.getVolume(); + } + toggleMuteBtnState(); + }; + + //************************************************************************************ + // SEEKING + // ************************************************************************************ + + var calculateTimeByEvent = function (event) { + var seekbarRect = seekbar.getBoundingClientRect(); + return Math.floor(self.player.duration() * (event.clientX - seekbarRect.left) / seekbarRect.width); + }; + + var onSeeking = function (event) { + //TODO Add call to seek in trick-mode once implemented. Preview Frames. + seeking = true; + var mouseTime = calculateTimeByEvent(event); + if (seekbarPlay) { + seekbarPlay.style.width = (mouseTime / self.player.duration() * 100) + '%'; + } + setTime(mouseTime); + document.addEventListener('mousemove', onSeekBarMouseMove, true); + document.addEventListener('mouseup', onSeeked, true); + }; + + var onSeeked = function (event) { + seeking = false; + document.removeEventListener('mousemove', onSeekBarMouseMove, true); + document.removeEventListener('mouseup', onSeeked, true); + + // seeking + var mouseTime = calculateTimeByEvent(event); + if (!isNaN(mouseTime)) { + mouseTime = mouseTime < 0 ? 0 : mouseTime; + self.player.seek(mouseTime); + } + + onSeekBarMouseMoveOut(event); + + if (seekbarPlay) { + seekbarPlay.style.width = (mouseTime / self.player.duration() * 100) + '%'; + } + }; + + var onSeekBarMouseMove = function (event) { + if (!thumbnailContainer || !thumbnailElem) return; + + // Take into account page offset and seekbar position + var elem = videoContainer || video; + var videoContainerRect = elem.getBoundingClientRect(); + var seekbarRect = seekbar.getBoundingClientRect(); + var videoControllerRect = videoController.getBoundingClientRect(); + + // Calculate time position given mouse position + var left = event.clientX - seekbarRect.left; + var mouseTime = calculateTimeByEvent(event); + if (isNaN(mouseTime)) return; + + // Update timer and play progress bar if mousedown (mouse click down) + if (seeking) { + setTime(mouseTime); + if (seekbarPlay) { + seekbarPlay.style.width = (mouseTime / self.player.duration() * 100) + '%'; + } + } + + // Get thumbnail information + if (self.player.provideThumbnail) { + self.player.provideThumbnail(mouseTime, function (thumbnail) { + + if (!thumbnail) return; + + // Adjust left variable for positioning thumbnail with regards to its viewport + left += (seekbarRect.left - videoContainerRect.left); + // Take into account thumbnail control + var ctrlWidth = parseInt(window.getComputedStyle(thumbnailElem).width); + if (!isNaN(ctrlWidth)) { + left -= ctrlWidth / 2; + } + + var scale = (videoContainerRect.height * maxPercentageThumbnailScreen) / thumbnail.height; + if (scale > maximumScale) { + scale = maximumScale; + } + + // Set thumbnail control position + thumbnailContainer.style.left = left + 'px'; + thumbnailContainer.style.display = ''; + thumbnailContainer.style.bottom += Math.round(videoControllerRect.height + bottomMarginThumbnail) + 'px'; + thumbnailContainer.style.height = Math.round(thumbnail.height) + 'px'; + + var backgroundStyle = 'url("' + thumbnail.url + '") ' + (thumbnail.x > 0 ? '-' + thumbnail.x : '0') + + 'px ' + (thumbnail.y > 0 ? '-' + thumbnail.y : '0') + 'px'; + thumbnailElem.style.background = backgroundStyle; + thumbnailElem.style.width = thumbnail.width + 'px'; + thumbnailElem.style.height = thumbnail.height + 'px'; + thumbnailElem.style.transform = 'scale(' + scale + ',' + scale + ')'; + + if (thumbnailTimeLabel) { + thumbnailTimeLabel.textContent = displayUTCTimeCodes ? self.player.formatUTC(mouseTime) : self.player.convertToTimeCode(mouseTime); + } + }); + } + }; + + var onSeekBarMouseMoveOut = function (/*e*/) { + if (!thumbnailContainer) return; + thumbnailContainer.style.display = 'none'; + }; + + var seekLive = function () { + self.player.seekToOriginalLive(); + }; + + //************************************************************************************ + // TIME/DURATION + //************************************************************************************ + var setDuration = function (value) { + if (self.player.isDynamic()) { + durationDisplay.textContent = '● LIVE'; + if (!durationDisplay.onclick) { + durationDisplay.onclick = seekLive; + durationDisplay.classList.add('live-icon'); + } + } else if (!isNaN(value)) { + durationDisplay.textContent = displayUTCTimeCodes ? self.player.formatUTC(value) : self.player.convertToTimeCode(value); + durationDisplay.classList.remove('live-icon'); + } + }; + + var setTime = function (value) { + if (value < 0) { + return; + } + if (self.player.isDynamic() && self.player.duration()) { + var liveDelay = self.player.duration() - value; + var targetLiveDelay = self.player.getTargetLiveDelay(); + + if (liveDelay < targetLiveDelay + liveThresholdSecs) { + durationDisplay.classList.add('live'); + } else { + durationDisplay.classList.remove('live'); + } + timeDisplay.textContent = '- ' + self.player.convertToTimeCode(liveDelay); + } else if (!isNaN(value)) { + timeDisplay.textContent = displayUTCTimeCodes ? self.player.formatUTC(value) : self.player.convertToTimeCode(value); + } + }; + + var updateDuration = function () { + var duration = self.player.duration(); + if (duration !== parseFloat(seekbar.max)) { //check if duration changes for live streams.. + setDuration(displayUTCTimeCodes ? self.player.durationAsUTC() : duration); + seekbar.max = duration; + } + }; + + //************************************************************************************ + // FULLSCREEN + //************************************************************************************ + + var onFullScreenChange = function (/*e*/) { + var icon; + if (isFullscreen()) { + enterFullscreen(); + icon = fullscreenBtn.querySelector('.icon-fullscreen-enter'); + icon.classList.remove('icon-fullscreen-enter'); + icon.classList.add('icon-fullscreen-exit'); + } else { + exitFullscreen(); + icon = fullscreenBtn.querySelector('.icon-fullscreen-exit'); + icon.classList.remove('icon-fullscreen-exit'); + icon.classList.add('icon-fullscreen-enter'); + } + }; + + var isFullscreen = function () { + return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreen || document.webkitIsFullScreen; + }; + + var enterFullscreen = function () { + var element = videoContainer || video; + if (!document.fullscreenElement) { + if (element.requestFullscreen) { + element.requestFullscreen(); + } else if (element.msRequestFullscreen) { + element.msRequestFullscreen(); + } else if (element.mozRequestFullScreen) { + element.mozRequestFullScreen(); + } else { + element.webkitRequestFullScreen(); + } + } + + videoController.classList.add('video-controller-fullscreen'); + window.addEventListener('mousemove', onFullScreenMouseMove); + onFullScreenMouseMove(); + }; + + var onFullScreenMouseMove = function () { + clearFullscreenState(); + videoControllerVisibleTimeout = setTimeout(function () { + videoController.classList.add('hide'); + }, 4000); + }; + + var clearFullscreenState = function () { + clearTimeout(videoControllerVisibleTimeout); + videoController.classList.remove('hide'); + }; + + var exitFullscreen = function () { + window.removeEventListener('mousemove', onFullScreenMouseMove); + clearFullscreenState(); + + if (document.fullscreenElement) { + + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.msExitFullscreen) { + document.msExitFullscreen(); + } else { + document.webkitCancelFullScreen(); + } + } + + videoController.classList.remove('video-controller-fullscreen'); + }; + + var onFullscreenClick = function (/*e*/) { + if (!isFullscreen()) { + enterFullscreen(); + } else { + exitFullscreen(); + } + if (captionMenu) { + captionMenu.classList.add('hide'); + } + if (bitrateListMenu) { + bitrateListMenu.classList.add('hide'); + } + if (trackSwitchMenu) { + trackSwitchMenu.classList.add('hide'); + } + }; + + //************************************************************************************ + // Audio Video MENU + //************************************************************************************ + + var _onStreamDeactivated = function (e) { + if (e.streamInfo && textTrackList[e.streamInfo.id]) { + delete textTrackList[e.streamInfo.id]; + } + }; + + var _onStreamActivated = function (e) { + var streamInfo = e.streamInfo; + + updateDuration(); + + //Bitrate Menu + createBitrateSwitchMenu(); + + //Track Switch Menu + createTrackSwitchMenu(); + + //Text Switch Menu + createCaptionSwitchMenu(streamInfo); + }; + + var createBitrateSwitchMenu = function () { + var contentFunc; + + if (bitrateListBtn) { + destroyMenu(bitrateListMenu, bitrateListBtn, menuHandlersList.bitrate); + bitrateListMenu = null; + var availableBitrates = { menuType: 'bitrate' }; + availableBitrates.audio = self.player.getBitrateInfoListFor && self.player.getBitrateInfoListFor('audio') || []; + availableBitrates.video = self.player.getBitrateInfoListFor && self.player.getBitrateInfoListFor('video') || []; + availableBitrates.images = self.player.getBitrateInfoListFor && self.player.getBitrateInfoListFor('image') || []; + + if (availableBitrates.audio.length >= 1 || availableBitrates.video.length >= 1 || availableBitrates.images.length >= 1) { + contentFunc = function (element, index) { + var result = isNaN(index) ? ' Auto Switch' : Math.floor(element.bitrate / 1000) + ' kbps'; + result += element && element.width && element.height ? ' (' + element.width + 'x' + element.height + ')' : ''; + return result; + }; + + bitrateListMenu = createMenu(availableBitrates, contentFunc); + var func = function () { + onMenuClick(bitrateListMenu, bitrateListBtn); + }; + menuHandlersList.bitrate = func; + bitrateListBtn.addEventListener('click', func); + bitrateListBtn.classList.remove('hide'); + + } else { + bitrateListBtn.classList.add('hide'); + } + } + }; + + var createTrackSwitchMenu = function () { + var contentFunc; + + if (trackSwitchBtn) { + + destroyMenu(trackSwitchMenu, trackSwitchBtn, menuHandlersList.track); + trackSwitchMenu = null; + + var availableTracks = { menuType: 'track' }; + availableTracks.audio = self.player.getTracksFor('audio'); + availableTracks.video = self.player.getTracksFor('video'); // these return empty arrays so no need to check for null + + if (availableTracks.audio.length > 1 || availableTracks.video.length > 1) { + contentFunc = function (element) { + var label = getLabelForLocale(element.labels); + var info = ''; + + if (element.lang) { + info += 'Language - ' + element.lang + ' '; + } + + if (element.roles[0]) { + info += '- Role: ' + element.roles[0] + ' '; + } + + if (element.codec) { + info += '- Codec: ' + element.codec + ' '; + } + + return label || info + }; + trackSwitchMenu = createMenu(availableTracks, contentFunc); + var func = function () { + onMenuClick(trackSwitchMenu, trackSwitchBtn); + }; + menuHandlersList.track = func; + trackSwitchBtn.addEventListener('click', func); + trackSwitchBtn.classList.remove('hide'); + } + } + }; + + var createCaptionSwitchMenu = function (streamId) { + // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present. + var activeStreamInfo = player.getActiveStream().getStreamInfo(); + + if (captionBtn && (!activeStreamInfo.id || activeStreamInfo.id === streamId)) { + + destroyMenu(captionMenu, captionBtn, menuHandlersList.caption); + captionMenu = null; + + var tracks = textTrackList[streamId] || []; + var contentFunc = function (element, index) { + if (isNaN(index)) { + return 'OFF'; + } + + var label = getLabelForLocale(element.labels); + if (label) { + return label + ' : ' + element.type; + } + + return element.lang + ' : ' + element.kind; + }; + captionMenu = createMenu({ menuType: 'caption', arr: tracks }, contentFunc); + + var func = function () { + onMenuClick(captionMenu, captionBtn); + }; + + menuHandlersList.caption = func; + captionBtn.addEventListener('click', func); + captionBtn.classList.remove('hide'); + } + + }; + + var _onTracksAdded = function (e) { + // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present. + if (!textTrackList[e.streamId]) { + textTrackList[e.streamId] = []; + } + + textTrackList[e.streamId] = textTrackList[e.streamId].concat(e.tracks); + createCaptionSwitchMenu(e.streamId); + }; + + var _onBufferLevelUpdated = function () { + if (seekbarBuffer) { + seekbarBuffer.style.width = ((player.time() + getBufferLevel()) / player.duration() * 100) + '%'; + } + }; + + var _onStreamTeardownComplete = function (/*e*/) { + setPlayBtn(); + timeDisplay.textContent = '00:00'; + }; + + var createMenu = function (info, contentFunc) { + var menuType = info.menuType; + var el = document.createElement('div'); + el.id = menuType + 'Menu'; + el.classList.add('menu'); + el.classList.add('hide'); + el.classList.add('unselectable'); + el.classList.add('menu-item-unselected'); + videoController.appendChild(el); + + switch (menuType) { + case 'caption': + el.appendChild(document.createElement('ul')); + el = createMenuContent(el, getMenuContent(menuType, info.arr, contentFunc), 'caption', menuType + '-list'); + setMenuItemsState(getMenuInitialIndex(info, menuType), menuType + '-list'); + break; + case 'track': + case 'bitrate': + if (info.video.length >= 1) { + el.appendChild(createMediaTypeMenu('video')); + el = createMenuContent(el, getMenuContent(menuType, info.video, contentFunc), 'video', 'video-' + menuType + '-list'); + setMenuItemsState(getMenuInitialIndex(info.video, menuType, 'video'), 'video-' + menuType + '-list'); + } + if (info.audio.length >= 1) { + el.appendChild(createMediaTypeMenu('audio')); + el = createMenuContent(el, getMenuContent(menuType, info.audio, contentFunc), 'audio', 'audio-' + menuType + '-list'); + setMenuItemsState(getMenuInitialIndex(info.audio, menuType, 'audio'), 'audio-' + menuType + '-list'); + } + if (info.images && info.images.length >= 1) { + el.appendChild(createMediaTypeMenu('image')); + el = createMenuContent(el, getMenuContent(menuType, info.images, contentFunc, false), 'image', 'image-' + menuType + '-list'); + setMenuItemsState(getMenuInitialIndex(info.images, menuType, 'image'), 'image-' + menuType + '-list'); + } + break; + } + + window.addEventListener('resize', handleMenuPositionOnResize, true); + return el; + }; + + var getMenuInitialIndex = function (info, menuType, mediaType) { + if (menuType === 'track') { + var mediaInfo = self.player.getCurrentTrackFor(mediaType); + var idx = 0; + info.some(function (element, index) { + if (isTracksEqual(element, mediaInfo)) { + idx = index; + return true; + } + }); + return idx; + + } else if (menuType === 'bitrate') { + var cfg = self.player.getSettings(); + if (cfg.streaming && cfg.streaming.abr && cfg.streaming.abr.initialBitrate) { + return cfg.streaming.abr.initialBitrate['mediaType'] | 0; + } + return 0; + } else if (menuType === 'caption') { + return self.player.getCurrentTextTrackIndex() + 1; + } + }; + + var isTracksEqual = function (t1, t2) { + var sameId = t1.id === t2.id; + var sameViewpoint = t1.viewpoint === t2.viewpoint; + var sameLang = t1.lang === t2.lang; + var sameRoles = t1.roles.toString() === t2.roles.toString(); + var sameAccessibility = (!t1.accessibility && !t2.accessibility) || (t1.accessibility && t2.accessibility && t1.accessibility.toString() === t2.accessibility.toString()); + var sameAudioChannelConfiguration = (!t1.audioChannelConfiguration && !t2.audioChannelConfiguration) || (t1.audioChannelConfiguration && t2.audioChannelConfiguration && t1.audioChannelConfiguration.toString() === t2.audioChannelConfiguration.toString()); + + return (sameId && sameViewpoint && sameLang && sameRoles && sameAccessibility && sameAudioChannelConfiguration); + }; + + var getMenuContent = function (type, arr, contentFunc, autoswitch) { + autoswitch = (autoswitch !== undefined) ? autoswitch : true; + + var content = []; + arr.forEach(function (element, index) { + content.push(contentFunc(element, index)); + }); + if (type !== 'track' && autoswitch) { + content.unshift(contentFunc(null, NaN)); + } + return content; + }; + + var getBrowserLocale = function () { + return (navigator.languages && navigator.languages.length) ? navigator.languages : [navigator.language]; + }; + + var getLabelForLocale = function (labels) { + var locales = getBrowserLocale(); + + for (var i = 0; i < labels.length; i++) { + for (var j = 0; j < locales.length; j++) { + if (labels[i].lang && locales[j] && locales[j].indexOf(labels[i].lang) > -1) { + return labels[i].text; + } + } + } + + return labels.length === 1 ? labels[0].text : null; + }; + + var createMediaTypeMenu = function (type) { + var div = document.createElement('div'); + var title = document.createElement('div'); + var content = document.createElement('ul'); + + div.id = type; + + title.textContent = type.charAt(0).toUpperCase() + type.slice(1); + title.classList.add('menu-sub-menu-title'); + + content.id = type + 'Content'; + content.classList.add(type + '-menu-content'); + + div.appendChild(title); + div.appendChild(content); + + return div; + }; + + var createMenuContent = function (menu, arr, mediaType, name) { + for (var i = 0; i < arr.length; i++) { + var item = document.createElement('li'); + item.id = name + 'Item_' + i; + item.index = i; + item.mediaType = mediaType; + item.name = name; + item.selected = false; + item.textContent = arr[i]; + + item.onmouseover = function (/*e*/) { + if (this.selected !== true) { + this.classList.add('menu-item-over'); + } + }; + item.onmouseout = function (/*e*/) { + this.classList.remove('menu-item-over'); + }; + item.onclick = setMenuItemsState.bind(item); + + var el; + if (mediaType === 'caption') { + el = menu.querySelector('ul'); + } else { + el = menu.querySelector('.' + mediaType + '-menu-content'); + } + + el.appendChild(item); + } + + return menu; + }; + + var onMenuClick = function (menu, btn) { + if (menu.classList.contains('hide')) { + menu.classList.remove('hide'); + menu.onmouseleave = function (/*e*/) { + this.classList.add('hide'); + }; + } else { + menu.classList.add('hide'); + } + menu.style.position = isFullscreen() ? 'fixed' : 'absolute'; + positionMenu(menu, btn); + }; + + var setMenuItemsState = function (value, type) { + try { + var item = typeof value === 'number' ? document.getElementById(type + 'Item_' + value) : this; + if (item) { + var nodes = item.parentElement.children; + + for (var i = 0; i < nodes.length; i++) { + nodes[i].selected = false; + nodes[i].classList.remove('menu-item-selected'); + nodes[i].classList.add('menu-item-unselected'); + } + item.selected = true; + item.classList.remove('menu-item-over'); + item.classList.remove('menu-item-unselected'); + item.classList.add('menu-item-selected'); + + if (type === undefined) { // User clicked so type is part of item binding. + switch (item.name) { + case 'video-bitrate-list': + case 'audio-bitrate-list': + var cfg = { + 'streaming': { + 'abr': { + 'autoSwitchBitrate': {} + } + } + }; + + if (item.index > 0) { + cfg.streaming.abr.autoSwitchBitrate[item.mediaType] = false; + self.player.updateSettings(cfg); + self.player.setQualityFor(item.mediaType, item.index - 1, forceQuality); + } else { + cfg.streaming.abr.autoSwitchBitrate[item.mediaType] = true; + self.player.updateSettings(cfg); + } + break; + case 'image-bitrate-list': + player.setQualityFor(item.mediaType, item.index); + break; + case 'caption-list': + self.player.setTextTrack(item.index - 1); + break; + case 'video-track-list': + case 'audio-track-list': + self.player.setCurrentTrack(self.player.getTracksFor(item.mediaType)[item.index]); + break; + } + } + } + } catch (e) { + console.error(e); + } + }; + + var handleMenuPositionOnResize = function (/*e*/) { + if (captionMenu) { + positionMenu(captionMenu, captionBtn); + } + if (bitrateListMenu) { + positionMenu(bitrateListMenu, bitrateListBtn); + } + if (trackSwitchMenu) { + positionMenu(trackSwitchMenu, trackSwitchBtn); + } + }; + + var positionMenu = function (menu, btn) { + if (btn.offsetLeft + menu.clientWidth >= videoController.clientWidth) { + menu.style.right = '0px'; + menu.style.left = ''; + } else { + menu.style.left = btn.offsetLeft + 'px'; + } + var menu_y = videoController.offsetTop - menu.offsetHeight; + menu.style.top = menu_y + 'px'; + }; + + var destroyMenu = function (menu, btn, handler) { + try { + if (menu && videoController) { + btn.removeEventListener('click', handler); + videoController.removeChild(menu); + } + } catch (e) { + } + }; + + var removeMenu = function (menu, btn) { + try { + if (menu) { + videoController.removeChild(menu); + menu = null; + btn.classList.add('hide'); + } + } catch (e) { + } + }; + + //************************************************************************************ + //IE FIX + //************************************************************************************ + + var coerceIEInputAndChangeEvents = function (slider, addChange) { + var fireChange = function (/*e*/) { + var changeEvent = document.createEvent('Event'); + changeEvent.initEvent('change', true, true); + changeEvent.forceChange = true; + slider.dispatchEvent(changeEvent); + }; + + this.addEventListener('change', function (e) { + var inputEvent; + if (!e.forceChange && e.target.getAttribute('type') === 'range') { + e.stopPropagation(); + inputEvent = document.createEvent('Event'); + inputEvent.initEvent('input', true, true); + e.target.dispatchEvent(inputEvent); + if (addChange) { + e.target.removeEventListener('mouseup', fireChange);//TODO can not clean up this event on destroy. refactor needed! + e.target.addEventListener('mouseup', fireChange); + } + } + + }, true); + }; + + var isIE = function () { + return !!navigator.userAgent.match(/Trident.*rv[ :]*11\./); + }; + + //************************************************************************************ + // PUBLIC API + //************************************************************************************ + + return { + setVolume: setVolume, + setDuration: setDuration, + setTime: setTime, + setPlayer: setPlayer, + removeMenu: removeMenu, + + initialize: function (suffix) { + + if (!player) { + throw new Error('Please pass an instance of MediaPlayer.js when instantiating the ControlBar Object'); + } + video = player.getVideoElement(); + if (!video) { + throw new Error('Please call initialize after you have called attachView on MediaPlayer.js'); + } + + displayUTCTimeCodes = displayUTCTimeCodes === undefined ? false : displayUTCTimeCodes; + + initControls(suffix); + video.controls = false; + videoContainer = video.parentNode; + captionBtn.classList.add('hide'); + if (trackSwitchBtn) { + trackSwitchBtn.classList.add('hide'); + } + addPlayerEventsListeners(); + playPauseBtn.addEventListener('click', _onPlayPauseClick); + muteBtn.addEventListener('click', onMuteClick); + fullscreenBtn.addEventListener('click', onFullscreenClick); + seekbar.addEventListener('mousedown', onSeeking, true); + seekbar.addEventListener('mousemove', onSeekBarMouseMove, true); + // set passive to true for scroll blocking listeners (https://www.chromestatus.com/feature/5745543795965952) + seekbar.addEventListener('touchmove', onSeekBarMouseMove, { passive: true }); + seekbar.addEventListener('mouseout', onSeekBarMouseMoveOut, true); + seekbar.addEventListener('touchcancel', onSeekBarMouseMoveOut, true); + seekbar.addEventListener('touchend', onSeekBarMouseMoveOut, true); + volumebar.addEventListener('input', setVolume, true); + document.addEventListener('fullscreenchange', onFullScreenChange, false); + document.addEventListener('MSFullscreenChange', onFullScreenChange, false); + document.addEventListener('mozfullscreenchange', onFullScreenChange, false); + document.addEventListener('webkitfullscreenchange', onFullScreenChange, false); + + //IE 11 Input Fix. + if (isIE()) { + coerceIEInputAndChangeEvents(seekbar, true); + coerceIEInputAndChangeEvents(volumebar, false); + } + }, + + show: function () { + videoController.classList.remove('hide'); + }, + + hide: function () { + videoController.classList.add('hide'); + }, + + disable: function () { + videoController.classList.add('disable'); + }, + + enable: function () { + videoController.classList.remove('disable'); + }, + + forceQualitySwitch: function (value) { + forceQuality = value; + }, + + resetSelectionMenus: function () { + if (menuHandlersList.bitrate) { + bitrateListBtn.removeEventListener('click', menuHandlersList.bitrate); + } + if (menuHandlersList.track) { + trackSwitchBtn.removeEventListener('click', menuHandlersList.track); + } + if (menuHandlersList.caption) { + captionBtn.removeEventListener('click', menuHandlersList.caption); + } + if (captionMenu) { + this.removeMenu(captionMenu, captionBtn); + } + if (trackSwitchMenu) { + this.removeMenu(trackSwitchMenu, trackSwitchBtn); + } + if (bitrateListMenu) { + this.removeMenu(bitrateListMenu, bitrateListBtn); + } + }, + + reset: function () { + window.removeEventListener('resize', handleMenuPositionOnResize); + + this.resetSelectionMenus(); + + menuHandlersList = []; + seeking = false; + + if (seekbarPlay) { + seekbarPlay.style.width = '0%'; + } + + if (seekbarBuffer) { + seekbarBuffer.style.width = '0%'; + } + }, + + destroy: function () { + this.reset(); + + playPauseBtn.removeEventListener('click', _onPlayPauseClick); + muteBtn.removeEventListener('click', onMuteClick); + fullscreenBtn.removeEventListener('click', onFullscreenClick); + seekbar.removeEventListener('mousedown', onSeeking); + volumebar.removeEventListener('input', setVolume); + seekbar.removeEventListener('mousemove', onSeekBarMouseMove); + seekbar.removeEventListener('touchmove', onSeekBarMouseMove); + seekbar.removeEventListener('mouseout', onSeekBarMouseMoveOut); + seekbar.removeEventListener('touchcancel', onSeekBarMouseMoveOut); + seekbar.removeEventListener('touchend', onSeekBarMouseMoveOut); + + removePlayerEventsListeners(); + + document.removeEventListener('fullscreenchange', onFullScreenChange); + document.removeEventListener('MSFullscreenChange', onFullScreenChange); + document.removeEventListener('mozfullscreenchange', onFullScreenChange); + document.removeEventListener('webkitfullscreenchange', onFullScreenChange); + } + }; +}; diff --git a/client/components/video/Player2.vue b/client/components/video/Player2.vue new file mode 100644 index 000000000..ae49fc6f9 --- /dev/null +++ b/client/components/video/Player2.vue @@ -0,0 +1,56 @@ + + + + + diff --git a/client/composables/videoplayer/videoState.ts b/client/composables/videoplayer/videoState.ts new file mode 100644 index 000000000..d577e3bd3 --- /dev/null +++ b/client/composables/videoplayer/videoState.ts @@ -0,0 +1,23 @@ +import { VideoplaybackAdapter } from '~/utils/videoplayer/adapters/adapter'; + +export const useVideoState = ( + videoRef: Ref, + adapter: VideoplaybackAdapter, + source: Ref +) => { + const videoState = reactive({ + playing: false, + buffering: false, + currentTime: 0, + duration: 0, + volume: 1 + }); + + onMounted(async () => { + const adapterInstance = await adapter(videoRef, source); + }); + + return { + videoState + }; +}; diff --git a/client/pages/watch.vue b/client/pages/watch.vue index f2da62a72..c3146287b 100644 --- a/client/pages/watch.vue +++ b/client/pages/watch.vue @@ -301,7 +301,7 @@ const watchPageTitle = computed(() => { - { :autoplay="isAutoplaying" class="video-player-p" @video-ended="onVideoEnded" - /> + /> --> + +
diff --git a/client/utils/videoplayer/adapters/adapter.ts b/client/utils/videoplayer/adapters/adapter.ts new file mode 100644 index 000000000..3bc40979b --- /dev/null +++ b/client/utils/videoplayer/adapters/adapter.ts @@ -0,0 +1,22 @@ +export type EventListenerCallback = (e: any) => void; + +export interface VideoplaybackAdapterResponse { + onPlaybackStarted: (callback: EventListenerCallback) => void; + onPlaybackPaused: (callback: EventListenerCallback) => void; + onPlaybackTimeUpdated: (callback: EventListenerCallback) => void; + onStreamActivated: (callback: EventListenerCallback) => void; + onStreamDeactivated: (callback: EventListenerCallback) => void; + onStreamTeardownComplete: (callback: EventListenerCallback) => void; + onTextTracksAdded: (callback: EventListenerCallback) => void; + onBufferLevelUpdated: (callback: EventListenerCallback) => void; +} + +export type VideoplaybackAdapterOptions = { + videoRef: Ref; + source: Ref; + startTime: Ref; +}; + +export type VideoplaybackAdapter = ( + options: VideoplaybackAdapterOptions +) => Promise; diff --git a/client/utils/videoplayer/adapters/dashAdapter.ts b/client/utils/videoplayer/adapters/dashAdapter.ts new file mode 100644 index 000000000..78e2b881b --- /dev/null +++ b/client/utils/videoplayer/adapters/dashAdapter.ts @@ -0,0 +1,62 @@ +import { + EventListenerCallback, + VideoplaybackAdapter, + VideoplaybackAdapterResponse +} from './adapter'; + +export const dashAdapter: VideoplaybackAdapter = async options => { + const { source, startTime, videoRef } = options; + const dashjs = await import('dashjs'); + const mediaPlayer = dashjs.MediaPlayer().create(); + + const onPlaybackStarted = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_STARTED, callback); + }; + + const onPlaybackPaused = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, callback); + }; + + const onPlaybackTimeUpdated = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED, callback); + }; + + const onStreamActivated = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.STREAM_ACTIVATED, callback); + }; + + const onStreamDeactivated = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.STREAM_DEACTIVATED, callback); + }; + + const onStreamTeardownComplete = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.STREAM_TEARDOWN_COMPLETE, callback); + }; + + const onTextTracksAdded = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED, callback); + }; + + const onBufferLevelUpdated = (callback: EventListenerCallback) => { + mediaPlayer.on(dashjs.MediaPlayer.events.BUFFER_LEVEL_UPDATED, callback); + }; + + watch(source, (newValue, oldValue) => { + if (newValue !== oldValue) { + mediaPlayer.initialize(videoRef.value, source.value, false, startTime.value); + } + }); + + mediaPlayer.initialize(videoRef.value, source.value, false, startTime.value); + + return { + onPlaybackStarted, + onPlaybackPaused, + onPlaybackTimeUpdated, + onStreamActivated, + onStreamDeactivated, + onStreamTeardownComplete, + onTextTracksAdded, + onBufferLevelUpdated + }; +}; diff --git a/client/utils/videoplayer/helpers/dash.ts b/client/utils/videoplayer/helpers/dash.ts index 5400b8d50..17125f807 100644 --- a/client/utils/videoplayer/helpers/dash.ts +++ b/client/utils/videoplayer/helpers/dash.ts @@ -7,15 +7,6 @@ export class DashHelper { this.dashPlayerInstance = MediaPlayer().create(); this.videoRef = videoRef; - this.dashPlayerInstance.updateSettings({ - streaming: { - abr: { - limitBitrateByPortal: true, - usePixelRatioInLimitBitrateByPortal: true - } - } - }); - this.videoAutoSwitchingMode = this.dashPlayerInstance.getSettings().streaming.abr.autoSwitchBitrate.video; this.audioAutoSwitchingMode = From 2b60cfa4c89ff558bc916671ce2ddb3f35be7ab1 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Thu, 5 Oct 2023 23:00:32 +0200 Subject: [PATCH 002/121] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20upgrade=20lockfile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 61 ++++++++++++++++++++++++--------------------- server/package.json | 2 +- 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d9952bbd..5d2241470 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -193,7 +193,7 @@ importers: version: 2.2.0(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(cache-manager@5.4.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/common': specifier: 10.3.0 - version: 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + version: 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/config': specifier: 3.1.1 version: 3.1.1(@nestjs/common@10.3.0)(reflect-metadata@0.1.13) @@ -214,7 +214,7 @@ importers: version: 4.0.0(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(reflect-metadata@0.1.13) '@nestjs/swagger': specifier: 7.2.0 - version: 7.2.0(@fastify/static@6.12.0)(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13) + version: 7.2.0(@fastify/static@6.12.0)(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13) archiver: specifier: 6.0.1 version: 6.0.1 @@ -234,8 +234,8 @@ importers: specifier: 0.5.1 version: 0.5.1 class-validator: - specifier: '0.14' - version: 0.14.1 + specifier: 0.14.0 + version: 0.14.0 cookie-parser: specifier: 1.4.6 version: 1.4.6 @@ -422,7 +422,7 @@ importers: devDependencies: '@nestjs/common': specifier: 10.3.0 - version: 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + version: 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': specifier: 10.3.0 version: 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) @@ -2070,7 +2070,7 @@ packages: '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 '@nestjs/core': ^8.0.0 || ^9.0.0 || ^10.0.0 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) tslib: 2.6.0 dev: false @@ -2083,7 +2083,7 @@ packages: bull: ^3.3 || ^4.0.0 dependencies: '@nestjs/bull-shared': 10.0.1(@nestjs/common@10.3.0)(@nestjs/core@10.3.0) - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) bull: 4.12.2 tslib: 2.6.0 @@ -2098,7 +2098,7 @@ packages: reflect-metadata: ^0.1.12 rxjs: ^7.0.0 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) cache-manager: 5.4.0 reflect-metadata: 0.1.13 @@ -2146,7 +2146,7 @@ packages: - webpack-cli dev: true - /@nestjs/common@10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1): + /@nestjs/common@10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1): resolution: {integrity: sha512-DGv34UHsZBxCM3H5QGE2XE/+oLJzz5+714JQjBhjD9VccFlQs3LRxo/epso4l7nJIiNlZkPyIUC8WzfU/5RTsQ==} peerDependencies: class-transformer: '*' @@ -2160,7 +2160,7 @@ packages: optional: true dependencies: class-transformer: 0.5.1 - class-validator: 0.14.1 + class-validator: 0.14.0 iterare: 1.2.1 reflect-metadata: 0.1.13 rxjs: 7.8.1 @@ -2173,7 +2173,7 @@ packages: '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 reflect-metadata: ^0.1.13 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) dotenv: 16.3.1 dotenv-expand: 10.0.0 lodash: 4.17.21 @@ -2199,7 +2199,7 @@ packages: '@nestjs/websockets': optional: true dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/websockets': 10.3.0(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nuxtjs/opencollective': 0.3.2 fast-safe-stringify: 2.1.1 @@ -2217,12 +2217,12 @@ packages: peerDependencies: '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@types/jsonwebtoken': 9.0.5 jsonwebtoken: 9.0.2 dev: false - /@nestjs/mapped-types@2.0.4(@nestjs/common@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13): + /@nestjs/mapped-types@2.0.4(@nestjs/common@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13): resolution: {integrity: sha512-xl+gUSp0B+ln1VSNoUftlglk8dfpUes3DHGxKZ5knuBxS5g2H/8p9/DSBOYWUfO5f4u9s6ffBPZ71WO+tbe5SA==} peerDependencies: '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 @@ -2235,9 +2235,9 @@ packages: class-validator: optional: true dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) class-transformer: 0.5.1 - class-validator: 0.14.1 + class-validator: 0.14.0 reflect-metadata: 0.1.13 dev: false @@ -2250,7 +2250,7 @@ packages: reflect-metadata: ^0.1.12 rxjs: ^7.0.0 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) mongoose: 7.6.8 reflect-metadata: 0.1.13 @@ -2274,7 +2274,7 @@ packages: '@fastify/formbody': 7.4.0 '@fastify/middie': 8.3.0 '@fastify/static': 6.12.0 - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) fastify: 4.25.1 light-my-request: 5.11.0 @@ -2291,7 +2291,7 @@ packages: '@nestjs/core': ^8.0.0 || ^9.0.0 || ^10.0.0 reflect-metadata: ^0.1.12 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) cron: 3.1.3 reflect-metadata: 0.1.13 @@ -2313,7 +2313,7 @@ packages: - chokidar dev: true - /@nestjs/swagger@7.2.0(@fastify/static@6.12.0)(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13): + /@nestjs/swagger@7.2.0(@fastify/static@6.12.0)(@nestjs/common@10.3.0)(@nestjs/core@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13): resolution: {integrity: sha512-W7WPq561/79w27ZEgViXS7c5hqPwT7QXhsLsSeu2jeBROUhMM825QKDFKbMmtb643IW5dznJ4PjherlZZgtMvg==} peerDependencies: '@fastify/static': ^6.0.0 @@ -2331,11 +2331,11 @@ packages: optional: true dependencies: '@fastify/static': 6.12.0 - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) - '@nestjs/mapped-types': 2.0.4(@nestjs/common@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13) + '@nestjs/mapped-types': 2.0.4(@nestjs/common@10.3.0)(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13) class-transformer: 0.5.1 - class-validator: 0.14.1 + class-validator: 0.14.0 js-yaml: 4.1.0 lodash: 4.17.21 path-to-regexp: 3.2.0 @@ -2356,7 +2356,7 @@ packages: '@nestjs/platform-express': optional: true dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) tslib: 2.6.2 dev: true @@ -2373,7 +2373,7 @@ packages: '@nestjs/platform-socket.io': optional: true dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/core': 10.3.0(@nestjs/common@10.3.0)(@nestjs/websockets@10.3.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) iterare: 1.2.1 object-hash: 3.0.0 @@ -2835,6 +2835,7 @@ packages: dependencies: is-glob: 4.0.3 micromatch: 4.0.5 + napi-wasm: 1.1.0 dev: true bundledDependencies: - napi-wasm @@ -5409,8 +5410,8 @@ packages: /class-transformer@0.5.1: resolution: {integrity: sha512-SQa1Ws6hUbfC98vKGxZH3KFY0Y1lm5Zm0SY8XX9zbK7FJCyVEac3ATW0RIpwzW+oOfmHE5PMPufDG9hCfoEOMw==} - /class-validator@0.14.1: - resolution: {integrity: sha512-2VEG9JICxIqTpoK1eMzZqaV+u/EiwEJkMGzTrZf6sU/fwsnOITVgYJ8yojSy6CaXtO9V0Cc6ZQZ8h8m4UBuLwQ==} + /class-validator@0.14.0: + resolution: {integrity: sha512-ct3ltplN8I9fOwUd8GrP8UQixwff129BkEtuWDKL5W45cQuLd19xqmTLu5ge78YDm/fdje6FMt0hGOhl0lii3A==} dependencies: '@types/validator': 13.11.8 libphonenumber-js: 1.10.53 @@ -10080,6 +10081,10 @@ packages: hasBin: true dev: true + /napi-wasm@1.1.0: + resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==} + dev: true + /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true @@ -10099,7 +10104,7 @@ packages: '@nestjs/common': ^5.0.0 || ^6.6.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 winston: ^3.0.0 dependencies: - '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.1)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/common': 10.3.0(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) fast-safe-stringify: 2.1.1 winston: 3.11.0 dev: false diff --git a/server/package.json b/server/package.json index 6bef7dda5..5fc59f422 100644 --- a/server/package.json +++ b/server/package.json @@ -41,7 +41,7 @@ "cache-manager": "5.4.0", "cache-manager-redis-yet": "4.1.2", "class-transformer": "0.5.1", - "class-validator": "0.14", + "class-validator": "0.14.0", "cookie-parser": "1.4.6", "dayjs": "1.11.10", "destr": "2.0.2", From 103e8337e31e47486cfaee15ee2aee91d29f8898 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Fri, 6 Oct 2023 02:55:38 +0200 Subject: [PATCH 003/121] =?UTF-8?q?=F0=9F=9A=A7=20Work=20on=20new=20videop?= =?UTF-8?q?layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../video/ControlBar.js => ControlBar.js | 0 client/components/video/Player2.vue | 50 ++---- client/composables/index.ts | 2 + client/composables/videoplayer/uiState.ts | 0 client/composables/videoplayer/videoSource.ts | 34 ++++ client/composables/videoplayer/videoState.ts | 150 +++++++++++++++++- client/pages/watch.vue | 7 +- client/utils/index.ts | 16 +- client/utils/videoplayer/adapters/adapter.ts | 22 ++- .../utils/videoplayer/adapters/dashAdapter.ts | 101 ++++++++---- 10 files changed, 300 insertions(+), 82 deletions(-) rename client/components/video/ControlBar.js => ControlBar.js (100%) create mode 100644 client/composables/videoplayer/uiState.ts create mode 100644 client/composables/videoplayer/videoSource.ts diff --git a/client/components/video/ControlBar.js b/ControlBar.js similarity index 100% rename from client/components/video/ControlBar.js rename to ControlBar.js diff --git a/client/components/video/Player2.vue b/client/components/video/Player2.vue index ae49fc6f9..a0be7ccbc 100644 --- a/client/components/video/Player2.vue +++ b/client/components/video/Player2.vue @@ -1,56 +1,36 @@ diff --git a/client/composables/index.ts b/client/composables/index.ts index 510e4b1e9..0793979b1 100644 --- a/client/composables/index.ts +++ b/client/composables/index.ts @@ -6,3 +6,5 @@ export * from './api/user'; export * from './api/channels'; export * from './api/admin'; export * from './api/session'; +export * from './videoplayer/videoState'; +export * from './videoplayer/videoSource'; diff --git a/client/composables/videoplayer/uiState.ts b/client/composables/videoplayer/uiState.ts new file mode 100644 index 000000000..e69de29bb diff --git a/client/composables/videoplayer/videoSource.ts b/client/composables/videoplayer/videoSource.ts new file mode 100644 index 000000000..05d02ad4c --- /dev/null +++ b/client/composables/videoplayer/videoSource.ts @@ -0,0 +1,34 @@ +import { ApiDto } from '@/utils/shared'; + +export const useVideoSource = (video: Ref>) => { + const config = useRuntimeConfig(); + + const videoSource = computed(() => { + let videoPlaybackProxy = `${window.location.origin}/api`; + if ( + typeof config.public.videoplaybackProxy === 'string' && + config.public.videoplaybackProxy?.length > 0 + ) { + videoPlaybackProxy = config.public.videoplaybackProxy; + } + + const manifest = video.value.dashManifest.replace( + /https:\/\/.*?.googlevideo\.com/gi, + videoPlaybackProxy + ); + const manifestUrl = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(manifest); + return manifestUrl; + }); + + const adapterType = computed(() => { + if (video.value.dashManifest) { + return 'dash'; + } + return 'native'; + }); + + return { + videoSource, + adapterType + }; +}; diff --git a/client/composables/videoplayer/videoState.ts b/client/composables/videoplayer/videoState.ts index d577e3bd3..cc13ca123 100644 --- a/client/composables/videoplayer/videoState.ts +++ b/client/composables/videoplayer/videoState.ts @@ -1,23 +1,163 @@ -import { VideoplaybackAdapter } from '~/utils/videoplayer/adapters/adapter'; +import { + VideoplaybackAdapterResponse, + VideoplaybackAdapterType +} from '@/utils/videoplayer/adapters/adapter'; export const useVideoState = ( videoRef: Ref, - adapter: VideoplaybackAdapter, - source: Ref + adapterType: Ref, + source: Ref, + startTime?: Ref ) => { const videoState = reactive({ playing: false, buffering: false, + bufferLevel: 0, currentTime: 0, duration: 0, - volume: 1 + volume: 1, + loop: false, + speed: 1 }); + const adapterInstance = ref(); + + const instantiateAdapter = async () => { + if (adapterInstance.value) { + adapterInstance.value.destroy(); + adapterInstance.value = undefined; + } + + switch (adapterType.value) { + case 'dash': + adapterInstance.value = await dashAdapter({ videoRef, source, startTime }); + break; + case 'hls': + case 'native': + break; + } + + adapterInstance.value.onPlaybackStarted(() => { + videoState.playing = true; + updateTimeAndDuration(); + }); + adapterInstance.value.onPlaybackPaused(() => { + videoState.playing = false; + updateTimeAndDuration(); + }); + adapterInstance.value.onPlaybackTimeUpdated(() => { + updateTimeAndDuration(); + }); + adapterInstance.value.onStreamActivated(() => { + updateTimeAndDuration(); + }); + adapterInstance.value.onStreamTeardownComplete(() => { + updateTimeAndDuration(); + }); + adapterInstance.value.onBufferLevelUpdated(() => { + videoState.bufferLevel = adapterInstance.value?.getBufferLevel() ?? 0; + }); + adapterInstance.value.onWaiting(() => { + videoState.buffering = true; + }); + adapterInstance.value.onCanPlay(() => { + videoState.buffering = false; + }); + adapterInstance.value.onVolumeChanged(() => { + videoState.volume = adapterInstance.value?.getVolume() ?? 1; + }); + adapterInstance.value.onPlaybackRateChanged(() => { + videoState.speed = adapterInstance.value?.getPlaybackRate() ?? 1; + }); + }; + onMounted(async () => { - const adapterInstance = await adapter(videoRef, source); + await instantiateAdapter(); + const videoAttributeObserver = new MutationObserver(mutations => { + mutations.forEach(mutation => { + if (mutation.type === 'attributes') { + if (mutation.attributeName === 'loop') { + videoState.loop = videoRef.value.loop; + } + } + }); + }); + videoAttributeObserver.observe(videoRef.value, { attributes: true }); + }); + + watch(adapterType, async (newValue, oldValue) => { + if (newValue !== oldValue) { + await instantiateAdapter(); + } }); + const updateTimeAndDuration = () => { + updateTime(); + updateDuration(); + }; + + const updateTime = () => { + if (adapterInstance.value) { + const currentTime = adapterInstance.value.getTime(); + if (isReasonableNumber(currentTime)) { + videoState.currentTime = currentTime; + } else { + videoState.currentTime = 0; + } + } + }; + + const updateDuration = () => { + if (adapterInstance.value) { + const duration = adapterInstance.value.getDuration(); + if (isReasonableNumber(duration)) { + videoState.duration = duration; + } else { + videoState.duration = 0; + } + } + }; + + watch( + () => videoState.playing, + newValue => { + if (newValue) { + adapterInstance.value?.play(); + } else { + adapterInstance.value?.pause(); + } + } + ); + watch( + () => videoState.volume, + newValue => { + adapterInstance.value?.setVolume(newValue); + } + ); + watch( + () => videoState.speed, + newValue => { + adapterInstance.value?.setPlaybackRate(newValue); + } + ); + watch( + () => videoState.currentTime, + newValue => { + adapterInstance.value?.setTime(newValue); + } + ); + watch( + () => videoState.loop, + newValue => { + videoRef.value.loop = newValue; + } + ); + return { videoState }; }; + +const isReasonableNumber = (value: number) => { + return typeof value === 'number' && !isNaN(value) && value >= 0; +}; diff --git a/client/pages/watch.vue b/client/pages/watch.vue index c3146287b..2213a099f 100644 --- a/client/pages/watch.vue +++ b/client/pages/watch.vue @@ -311,8 +311,11 @@ const watchPageTitle = computed(() => { class="video-player-p" @video-ended="onVideoEnded" /> --> - - +
diff --git a/client/utils/index.ts b/client/utils/index.ts index 86458c0bc..b695cf26d 100644 --- a/client/utils/index.ts +++ b/client/utils/index.ts @@ -1,10 +1,6 @@ -export { getCommentReplies, getComments, getCommentsContinuation } from './api/comments'; -export { getDislikes } from './api/videos'; -export { getPlaylists } from './api/playlists'; -export { - getChannelVideosContinuation, - getChannelPlaylistsContinuation, - getRelatedChannelsContinuation, - getChannelCommunityPostsContinuation -} from './api/channels'; -export { addBlockedVideo, removeBlockedVideo } from './api/admin'; +export * from './api/comments'; +export * from './api/videos'; +export * from './api/playlists'; +export * from './api/channels'; +export * from './api/admin'; +export * from './videoplayer/adapters/dashAdapter'; diff --git a/client/utils/videoplayer/adapters/adapter.ts b/client/utils/videoplayer/adapters/adapter.ts index 3bc40979b..c255e1e6a 100644 --- a/client/utils/videoplayer/adapters/adapter.ts +++ b/client/utils/videoplayer/adapters/adapter.ts @@ -9,14 +9,34 @@ export interface VideoplaybackAdapterResponse { onStreamTeardownComplete: (callback: EventListenerCallback) => void; onTextTracksAdded: (callback: EventListenerCallback) => void; onBufferLevelUpdated: (callback: EventListenerCallback) => void; + onCanPlay: (callback: EventListenerCallback) => void; + onWaiting: (callback: EventListenerCallback) => void; + onVolumeChanged: (callback: EventListenerCallback) => void; + onPlaybackRateChanged: (callback: EventListenerCallback) => void; + + getTime: () => number; + getDuration: () => number; + getBufferLevel: () => number; + getVolume: () => number; + getPlaybackRate: () => number; + + setVolume: (volume: number) => void; + setTime: (time: number) => void; + setPlaybackRate: (rate: number) => void; + play: () => void; + pause: () => void; + + destroy: () => void; } export type VideoplaybackAdapterOptions = { videoRef: Ref; source: Ref; - startTime: Ref; + startTime?: Ref; }; export type VideoplaybackAdapter = ( options: VideoplaybackAdapterOptions ) => Promise; + +export type VideoplaybackAdapterType = 'dash' | 'hls' | 'native'; diff --git a/client/utils/videoplayer/adapters/dashAdapter.ts b/client/utils/videoplayer/adapters/dashAdapter.ts index 78e2b881b..07c5e6a4b 100644 --- a/client/utils/videoplayer/adapters/dashAdapter.ts +++ b/client/utils/videoplayer/adapters/dashAdapter.ts @@ -1,53 +1,79 @@ -import { - EventListenerCallback, - VideoplaybackAdapter, - VideoplaybackAdapterResponse -} from './adapter'; +import { EventListenerCallback, VideoplaybackAdapter } from './adapter'; export const dashAdapter: VideoplaybackAdapter = async options => { const { source, startTime, videoRef } = options; const dashjs = await import('dashjs'); const mediaPlayer = dashjs.MediaPlayer().create(); - const onPlaybackStarted = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_STARTED, callback); + const registerCallback = (event: string) => (callback: EventListenerCallback) => { + mediaPlayer.on(event, callback); }; - const onPlaybackPaused = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, callback); - }; + // Register callbacks + const onPlaybackStarted = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_STARTED); + const onPlaybackPaused = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_PAUSED); + const onPlaybackTimeUpdated = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED); + const onStreamActivated = registerCallback(dashjs.MediaPlayer.events.STREAM_ACTIVATED); + const onStreamDeactivated = registerCallback(dashjs.MediaPlayer.events.STREAM_DEACTIVATED); + const onStreamTeardownComplete = registerCallback( + dashjs.MediaPlayer.events.STREAM_TEARDOWN_COMPLETE + ); + const onTextTracksAdded = registerCallback(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED); + const onBufferLevelUpdated = registerCallback(dashjs.MediaPlayer.events.BUFFER_LEVEL_UPDATED); + const onCanPlay = registerCallback(dashjs.MediaPlayer.events.CAN_PLAY); + const onWaiting = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_WAITING); + const onVolumeChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_VOLUME_CHANGED); + const onPlaybackRateChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_RATE_CHANGED); - const onPlaybackTimeUpdated = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED, callback); + // Getters + const getBufferLevel = () => { + let bufferLevel = 0; + if (typeof mediaPlayer.getDashMetrics === 'function') { + const dashMetrics = mediaPlayer.getDashMetrics(); + if (dashMetrics) { + bufferLevel = dashMetrics.getCurrentBufferLevel('video'); + if (!bufferLevel) { + bufferLevel = dashMetrics.getCurrentBufferLevel('audio'); + } + } + } + return bufferLevel; }; + const getTime = mediaPlayer.time; + const getDuration = mediaPlayer.duration; + const getVolume = mediaPlayer.getVolume; + const getPlaybackRate = mediaPlayer.getPlaybackRate; - const onStreamActivated = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.STREAM_ACTIVATED, callback); + // Setters + const setVolume = (volume: number) => { + mediaPlayer.setVolume(volume); }; - - const onStreamDeactivated = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.STREAM_DEACTIVATED, callback); + const setTime = (time: number) => { + mediaPlayer.seek(time); }; - - const onStreamTeardownComplete = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.STREAM_TEARDOWN_COMPLETE, callback); + const setPlaybackRate = (rate: number) => { + mediaPlayer.setPlaybackRate(rate); }; - - const onTextTracksAdded = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED, callback); + const play = () => { + mediaPlayer.play(); }; - - const onBufferLevelUpdated = (callback: EventListenerCallback) => { - mediaPlayer.on(dashjs.MediaPlayer.events.BUFFER_LEVEL_UPDATED, callback); + const pause = () => { + mediaPlayer.pause(); }; + // Initialize player watch(source, (newValue, oldValue) => { if (newValue !== oldValue) { - mediaPlayer.initialize(videoRef.value, source.value, false, startTime.value); + const startTimeNumber = startTime?.value ?? 0; + mediaPlayer.initialize(videoRef.value, source.value, false, startTimeNumber); } }); + const startTimeNumber = startTime?.value ?? 0; + mediaPlayer.initialize(videoRef.value, source.value, false, startTimeNumber); - mediaPlayer.initialize(videoRef.value, source.value, false, startTime.value); + const destroy = () => { + mediaPlayer.destroy(); + }; return { onPlaybackStarted, @@ -57,6 +83,23 @@ export const dashAdapter: VideoplaybackAdapter = async options => { onStreamDeactivated, onStreamTeardownComplete, onTextTracksAdded, - onBufferLevelUpdated + onBufferLevelUpdated, + onPlaybackRateChanged, + onCanPlay, + onWaiting, + onVolumeChanged, + + getTime, + getDuration, + getBufferLevel, + getPlaybackRate, + + getVolume, + setVolume, + setTime, + setPlaybackRate, + play, + pause, + destroy }; }; From 3a13ac5d8afb3b88f041f81b40da432accdf89d1 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Sat, 7 Oct 2023 02:29:56 +0200 Subject: [PATCH 004/121] =?UTF-8?q?=F0=9F=9A=A7=20Work=20on=20new=20videop?= =?UTF-8?q?layer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/flip/Player.vue | 33 + client/components/flip/PlayerUI.vue | 74 ++ client/components/flip/Seekbar.vue | 78 ++ client/components/video/Player2.vue | 36 - client/components/videoplayer/VideoPlayer.vue | 944 +++++++++--------- client/composables/index.ts | 1 + client/composables/videoplayer/uiState.ts | 40 + client/composables/videoplayer/videoState.ts | 41 +- client/pages/profile/index.vue | 1 - client/pages/watch.vue | 2 +- client/utils/humanizeBitrate.ts | 9 + client/utils/videoplayer/adapters/adapter.ts | 6 + .../utils/videoplayer/adapters/dashAdapter.ts | 27 + 13 files changed, 776 insertions(+), 516 deletions(-) create mode 100644 client/components/flip/Player.vue create mode 100644 client/components/flip/PlayerUI.vue create mode 100644 client/components/flip/Seekbar.vue delete mode 100644 client/components/video/Player2.vue create mode 100644 client/utils/humanizeBitrate.ts diff --git a/client/components/flip/Player.vue b/client/components/flip/Player.vue new file mode 100644 index 000000000..da6f87c95 --- /dev/null +++ b/client/components/flip/Player.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/client/components/flip/PlayerUI.vue b/client/components/flip/PlayerUI.vue new file mode 100644 index 000000000..265b3e417 --- /dev/null +++ b/client/components/flip/PlayerUI.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/client/components/flip/Seekbar.vue b/client/components/flip/Seekbar.vue new file mode 100644 index 000000000..ea53603c3 --- /dev/null +++ b/client/components/flip/Seekbar.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/client/components/video/Player2.vue b/client/components/video/Player2.vue deleted file mode 100644 index a0be7ccbc..000000000 --- a/client/components/video/Player2.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - - - diff --git a/client/components/videoplayer/VideoPlayer.vue b/client/components/videoplayer/VideoPlayer.vue index dc2358146..700353fff 100644 --- a/client/components/videoplayer/VideoPlayer.vue +++ b/client/components/videoplayer/VideoPlayer.vue @@ -383,476 +383,476 @@ button.pictureInPictureToggleButton { border-radius: 15px !important; } -.video-player { - width: 100%; - background-color: #000; - display: flex; - position: relative; - overflow: hidden; - max-height: calc(100vh - 170px); - z-index: 12; - - &.embedded { - height: 100vh !important; - max-height: 100% !important; - .video-element-container { - max-height: 100vh; - max-width: 100vw; - - .video { - max-width: 100%; - } - } - } - - &.fullscreen { - .video-element-container { - max-height: 100vh; - max-width: 100vw; - - .video { - max-width: 100%; - } - - // &.zoom { - // .video { - // // width: 100vw !important; - // } - // } - } - } - - .video-element-container { - height: 100%; - position: relative; - transform: translate(-50%, -50%); - max-height: calc(100vh - 170px); - top: 50%; - left: 50%; - margin: 0; - // transition: max-height 300ms $dynamic-easing, height 300ms $dynamic-easing; - - .video { - height: 100%; - z-index: 100; - transition: opacity 1200ms $intro-easing; - } - } - - .video-spinner { - position: absolute !important; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 200; - } - - .video-thumbnail-overlay { - position: absolute; - margin: auto; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-repeat: no-repeat; - background-size: auto 100%; - background-position: center; - z-index: 120; - pointer-events: none; - user-select: none; - opacity: 1; - transition: opacity 600ms $intro-easing; - - &.autoplay { - transition: opacity 200ms $intro-easing; - } - - &.hidden { - opacity: 0; - } - } - - .video-controls-overlay { - position: absolute; - margin: 0 auto; - top: 0; - left: 0; - height: 100%; - width: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - transition: opacity 300ms $intro-easing; - opacity: 0; - z-index: 140; - pointer-events: none; - color: #fff; - - &:not(.visible) { - pointer-events: none !important; - touch-action: none !important; - - .top-control-overlay { - transform: translate3d(0, -100%, 0); - } - - .bottom-control-overlay { - transform: translate3d(0, 100%, 0); - } - } - - &.visible { - opacity: 1; - } - - .top-control-overlay { - position: relative; - width: 100%; - margin: 0 auto; - height: $bottom-overlay-height - 5px; - display: flex; - flex-direction: row; - justify-content: space-between; - box-sizing: border-box; - transition: transform 300ms $intro-easing; - - .left-top-controls { - .video-fullscreen-title { - margin: 10px; - font-size: 1.2rem; - height: 40px; - line-height: 40px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - width: 70%; - position: absolute; - } - } - - .right-top-controls { - .vt-icon { - width: 40px; - height: 40px; - cursor: pointer; - pointer-events: all; - } - } - - &.hidden { - opacity: 0; - } - - &:before { - content: ''; - position: absolute; - width: 100%; - height: $bottom-overlay-height; - top: 0; - left: 0; - z-index: -1; - background-image: $video-player-gradient; - } - } - - .center-control-overlay { - display: flex; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - .play-btn-container { - pointer-events: all; - margin: auto; - // filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16)) - // drop-shadow(0 3px 6px rgba(0, 0, 0, 0.23)); - - .play-btn { - margin: auto; - width: 60px; - height: 60px; - background-color: #fff; - opacity: 1; - transition: - clip-path 300ms $intro-easing, - opacity 300ms $intro-easing, - transform 300ms $intro-easing; - clip-path: polygon( - 18% 4%, - 18% 4%, - 18% 96%, - 18% 96%, - 18% 4%, - 18% 4%, - 95% 50%, - 95% 50%, - 18% 96%, - 18% 4% - ); - - &.playing { - opacity: 0.6; - clip-path: polygon( - 38% 4%, - 18% 4%, - 18% 96%, - 38% 96%, - 38% 4%, - 82% 4%, - 82% 4%, - 82% 96%, - 62% 96%, - 62% 4% - ); - } - } - } - } - - .bottom-control-overlay { - pointer-events: all; - height: $bottom-overlay-height; - width: 100%; - display: flex; - flex-direction: column; - z-index: 141; - transition: - opacity 300ms $intro-easing, - transform 300ms $intro-easing; - position: relative; - - &:before { - content: ''; - position: absolute; - width: 100%; - height: $bottom-overlay-height; - top: 0; - left: 0; - z-index: -1; - background-image: $video-player-gradient; - transform: rotate(180deg); - } - - .seekbar { - height: $video-seekbar-height; - width: calc(100% - 20px); - margin: 0 auto; - position: relative; - z-index: 142; - display: flex; - box-sizing: border-box; - - &:hover, - &.dragging { - .seekbar-background, - .seekbar-loading-progress, - .seekbar-playback-progress { - height: $video-seekbar-line-height + 4px; - } - - .seekbar-circle { - transform: translate(-50%, 2.5px) scale(1); - } - - .seekbar-hover-timestamp { - opacity: 1; - transform: translateX(-50%) scale(1); - } - - .seekbar-preview { - opacity: 1; - } - - .chapter-title { - opacity: 1; - } - - .seekbar-background-chapters, - .seekbar-loading-progress-chapters, - .seekbar-playback-progress-chapters { - .seekbar-background-chapter, - .seekbar-loading-progress-chapter, - .seekbar-playback-progress-chapter { - &.hovering { - transform: scale(1, 3); - } - } - } - } - - .seekbar-preview { - &:hover { - opacity: 1; - } - } - - @mixin seekbar-part { - position: absolute; - left: 0; - top: 50%; - transform: translateY(-50%); - width: 100%; - transition: height 100ms linear; - } - - .seekbar-circle { - width: 15px; - height: 15px; - background-color: var(--theme-color); - border-radius: 50%; - position: relative; - transform: translate(-50%, 2.5px) scale(0); - transition: transform 100ms linear; - z-index: 147; - pointer-events: none; - cursor: pointer; - } - - .seekbar-hover-timestamp { - position: relative; - bottom: 45px; - background-color: $video-thmb-overlay-bgcolor; - padding: 4px 6px; - height: 25px; - line-height: 17px; - opacity: 0; - transform: translateX(-50%) scale(0.9); - box-sizing: border-box; - border-radius: 3px; - pointer-events: none; - transition: - opacity 300ms $intro-easing, - transform 100ms $intro-easing; - } - - .seekbar-clickable { - @include seekbar-part; - height: 100%; - z-index: 146; - cursor: pointer; - } - .seekbar-background { - @include seekbar-part; - height: $video-seekbar-line-height; - background-color: var(--line-color); - z-index: 142; - } - .seekbar-background-chapters { - @include seekbar-part; - height: $video-seekbar-line-height; - z-index: 142; - - .seekbar-background-chapter { - position: absolute; - background-color: var(--line-color); - height: 100%; - transition: transform 100ms linear; - } - } - - .seekbar-loading-progress { - @include seekbar-part; - height: $video-seekbar-line-height; - background-color: var(--line-accent-color); - z-index: 143; - } - - .seekbar-loading-progress-chapters { - @include seekbar-part; - height: $video-seekbar-line-height; - z-index: 143; - - .seekbar-loading-progress-chapter { - position: absolute; - background-color: var(--line-accent-color); - height: 100%; - transition: transform 100ms linear; - } - } - - .chapter-title { - position: absolute; - bottom: 15px; - white-space: nowrap; - opacity: 0; - transition: - opacity 300ms $intro-easing, - left 300ms $intro-easing; - text-shadow: 0 0 4px #000; - } - - .seekbar-playback-progress { - @include seekbar-part; - height: $video-seekbar-line-height; - background-color: var(--theme-color); - z-index: 144; - } - - .seekbar-playback-progress-chapters { - @include seekbar-part; - height: $video-seekbar-line-height; - z-index: 144; - - .seekbar-playback-progress-chapter { - position: absolute; - background-color: var(--theme-color); - height: 100%; - transition: transform 100ms linear; - } - } - } - - .bottom-controls { - $bottom-controls-height: $bottom-overlay-height - $video-seekbar-height; - width: calc(100% - 20px); - margin: 0 auto; - height: $bottom-controls-height - 5px; - display: flex; - flex-direction: row; - justify-content: space-between; - box-sizing: border-box; - - .left-bottom-controls, - .right-bottom-controls { - display: flex; - flex-direction: row; - - .video-time-progress { - height: 100%; - display: flex; - margin: 0 0 0 10px; - - .video-time-current-progress { - margin: auto; - font-family: $default-font; - font-size: 1.1rem; - } - } - - .vt-icon { - width: 28px; - height: 28px; - margin: 2px 5px; - cursor: pointer; - } - - .play-icon { - margin: -1px 10px 0 0; - height: 32px; - - svg { - width: 32px; - height: 32px; - } - } - } - } - - &.hidden { - opacity: 0; - } - } - } -} +// .video-player { +// width: 100%; +// background-color: #000; +// display: flex; +// position: relative; +// overflow: hidden; +// max-height: calc(100vh - 170px); +// z-index: 12; + +// &.embedded { +// height: 100vh !important; +// max-height: 100% !important; +// .video-element-container { +// max-height: 100vh; +// max-width: 100vw; + +// .video { +// max-width: 100%; +// } +// } +// } + +// &.fullscreen { +// .video-element-container { +// max-height: 100vh; +// max-width: 100vw; + +// .video { +// max-width: 100%; +// } + +// // &.zoom { +// // .video { +// // // width: 100vw !important; +// // } +// // } +// } +// } + +// .video-element-container { +// height: 100%; +// position: relative; +// transform: translate(-50%, -50%); +// max-height: calc(100vh - 170px); +// top: 50%; +// left: 50%; +// margin: 0; +// // transition: max-height 300ms $dynamic-easing, height 300ms $dynamic-easing; + +// .video { +// height: 100%; +// z-index: 100; +// transition: opacity 1200ms $intro-easing; +// } +// } + +// .video-spinner { +// position: absolute !important; +// top: 50%; +// left: 50%; +// transform: translate(-50%, -50%); +// z-index: 200; +// } + +// .video-thumbnail-overlay { +// position: absolute; +// margin: auto; +// width: 100%; +// height: 100%; +// top: 0; +// left: 0; +// background-repeat: no-repeat; +// background-size: auto 100%; +// background-position: center; +// z-index: 120; +// pointer-events: none; +// user-select: none; +// opacity: 1; +// transition: opacity 600ms $intro-easing; + +// &.autoplay { +// transition: opacity 200ms $intro-easing; +// } + +// &.hidden { +// opacity: 0; +// } +// } + +// .video-controls-overlay { +// position: absolute; +// margin: 0 auto; +// top: 0; +// left: 0; +// height: 100%; +// width: 100%; +// display: flex; +// flex-direction: column; +// justify-content: space-between; +// transition: opacity 300ms $intro-easing; +// opacity: 0; +// z-index: 140; +// pointer-events: none; +// color: #fff; + +// &:not(.visible) { +// pointer-events: none !important; +// touch-action: none !important; + +// .top-control-overlay { +// transform: translate3d(0, -100%, 0); +// } + +// .bottom-control-overlay { +// transform: translate3d(0, 100%, 0); +// } +// } + +// &.visible { +// opacity: 1; +// } + +// .top-control-overlay { +// position: relative; +// width: 100%; +// margin: 0 auto; +// height: $bottom-overlay-height - 5px; +// display: flex; +// flex-direction: row; +// justify-content: space-between; +// box-sizing: border-box; +// transition: transform 300ms $intro-easing; + +// .left-top-controls { +// .video-fullscreen-title { +// margin: 10px; +// font-size: 1.2rem; +// height: 40px; +// line-height: 40px; +// overflow: hidden; +// white-space: nowrap; +// text-overflow: ellipsis; +// width: 70%; +// position: absolute; +// } +// } + +// .right-top-controls { +// .vt-icon { +// width: 40px; +// height: 40px; +// cursor: pointer; +// pointer-events: all; +// } +// } + +// &.hidden { +// opacity: 0; +// } + +// &:before { +// content: ''; +// position: absolute; +// width: 100%; +// height: $bottom-overlay-height; +// top: 0; +// left: 0; +// z-index: -1; +// background-image: $video-player-gradient; +// } +// } + +// .center-control-overlay { +// display: flex; +// position: absolute; +// top: 50%; +// left: 50%; +// transform: translate(-50%, -50%); + +// .play-btn-container { +// pointer-events: all; +// margin: auto; +// // filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.16)) +// // drop-shadow(0 3px 6px rgba(0, 0, 0, 0.23)); + +// .play-btn { +// margin: auto; +// width: 60px; +// height: 60px; +// background-color: #fff; +// opacity: 1; +// transition: +// clip-path 300ms $intro-easing, +// opacity 300ms $intro-easing, +// transform 300ms $intro-easing; +// clip-path: polygon( +// 18% 4%, +// 18% 4%, +// 18% 96%, +// 18% 96%, +// 18% 4%, +// 18% 4%, +// 95% 50%, +// 95% 50%, +// 18% 96%, +// 18% 4% +// ); + +// &.playing { +// opacity: 0.6; +// clip-path: polygon( +// 38% 4%, +// 18% 4%, +// 18% 96%, +// 38% 96%, +// 38% 4%, +// 82% 4%, +// 82% 4%, +// 82% 96%, +// 62% 96%, +// 62% 4% +// ); +// } +// } +// } +// } + +// .bottom-control-overlay { +// pointer-events: all; +// height: $bottom-overlay-height; +// width: 100%; +// display: flex; +// flex-direction: column; +// z-index: 141; +// transition: +// opacity 300ms $intro-easing, +// transform 300ms $intro-easing; +// position: relative; + +// &:before { +// content: ''; +// position: absolute; +// width: 100%; +// height: $bottom-overlay-height; +// top: 0; +// left: 0; +// z-index: -1; +// background-image: $video-player-gradient; +// transform: rotate(180deg); +// } + +// .seekbar { +// height: $video-seekbar-height; +// width: calc(100% - 20px); +// margin: 0 auto; +// position: relative; +// z-index: 142; +// display: flex; +// box-sizing: border-box; + +// &:hover, +// &.dragging { +// .seekbar-background, +// .seekbar-loading-progress, +// .seekbar-playback-progress { +// height: $video-seekbar-line-height + 4px; +// } + +// .seekbar-circle { +// transform: translate(-50%, 2.5px) scale(1); +// } + +// .seekbar-hover-timestamp { +// opacity: 1; +// transform: translateX(-50%) scale(1); +// } + +// .seekbar-preview { +// opacity: 1; +// } + +// .chapter-title { +// opacity: 1; +// } + +// .seekbar-background-chapters, +// .seekbar-loading-progress-chapters, +// .seekbar-playback-progress-chapters { +// .seekbar-background-chapter, +// .seekbar-loading-progress-chapter, +// .seekbar-playback-progress-chapter { +// &.hovering { +// transform: scale(1, 3); +// } +// } +// } +// } + +// .seekbar-preview { +// &:hover { +// opacity: 1; +// } +// } + +// @mixin seekbar-part { +// position: absolute; +// left: 0; +// top: 50%; +// transform: translateY(-50%); +// width: 100%; +// transition: height 100ms linear; +// } + +// .seekbar-circle { +// width: 15px; +// height: 15px; +// background-color: var(--theme-color); +// border-radius: 50%; +// position: relative; +// transform: translate(-50%, 2.5px) scale(0); +// transition: transform 100ms linear; +// z-index: 147; +// pointer-events: none; +// cursor: pointer; +// } + +// .seekbar-hover-timestamp { +// position: relative; +// bottom: 45px; +// background-color: $video-thmb-overlay-bgcolor; +// padding: 4px 6px; +// height: 25px; +// line-height: 17px; +// opacity: 0; +// transform: translateX(-50%) scale(0.9); +// box-sizing: border-box; +// border-radius: 3px; +// pointer-events: none; +// transition: +// opacity 300ms $intro-easing, +// transform 100ms $intro-easing; +// } + +// .seekbar-clickable { +// @include seekbar-part; +// height: 100%; +// z-index: 146; +// cursor: pointer; +// } +// .seekbar-background { +// @include seekbar-part; +// height: $video-seekbar-line-height; +// background-color: var(--line-color); +// z-index: 142; +// } +// .seekbar-background-chapters { +// @include seekbar-part; +// height: $video-seekbar-line-height; +// z-index: 142; + +// .seekbar-background-chapter { +// position: absolute; +// background-color: var(--line-color); +// height: 100%; +// transition: transform 100ms linear; +// } +// } + +// .seekbar-loading-progress { +// @include seekbar-part; +// height: $video-seekbar-line-height; +// background-color: var(--line-accent-color); +// z-index: 143; +// } + +// .seekbar-loading-progress-chapters { +// @include seekbar-part; +// height: $video-seekbar-line-height; +// z-index: 143; + +// .seekbar-loading-progress-chapter { +// position: absolute; +// background-color: var(--line-accent-color); +// height: 100%; +// transition: transform 100ms linear; +// } +// } + +// .chapter-title { +// position: absolute; +// bottom: 15px; +// white-space: nowrap; +// opacity: 0; +// transition: +// opacity 300ms $intro-easing, +// left 300ms $intro-easing; +// text-shadow: 0 0 4px #000; +// } + +// .seekbar-playback-progress { +// @include seekbar-part; +// height: $video-seekbar-line-height; +// background-color: var(--theme-color); +// z-index: 144; +// } + +// .seekbar-playback-progress-chapters { +// @include seekbar-part; +// height: $video-seekbar-line-height; +// z-index: 144; + +// .seekbar-playback-progress-chapter { +// position: absolute; +// background-color: var(--theme-color); +// height: 100%; +// transition: transform 100ms linear; +// } +// } +// } + +// .bottom-controls { +// $bottom-controls-height: $bottom-overlay-height - $video-seekbar-height; +// width: calc(100% - 20px); +// margin: 0 auto; +// height: $bottom-controls-height - 5px; +// display: flex; +// flex-direction: row; +// justify-content: space-between; +// box-sizing: border-box; + +// .left-bottom-controls, +// .right-bottom-controls { +// display: flex; +// flex-direction: row; + +// .video-time-progress { +// height: 100%; +// display: flex; +// margin: 0 0 0 10px; + +// .video-time-current-progress { +// margin: auto; +// font-family: $default-font; +// font-size: 1.1rem; +// } +// } + +// .vt-icon { +// width: 28px; +// height: 28px; +// margin: 2px 5px; +// cursor: pointer; +// } + +// .play-icon { +// margin: -1px 10px 0 0; +// height: 32px; + +// svg { +// width: 32px; +// height: 32px; +// } +// } +// } +// } + +// &.hidden { +// opacity: 0; +// } +// } +// } +// } diff --git a/client/composables/index.ts b/client/composables/index.ts index 0793979b1..b38c2b25c 100644 --- a/client/composables/index.ts +++ b/client/composables/index.ts @@ -8,3 +8,4 @@ export * from './api/admin'; export * from './api/session'; export * from './videoplayer/videoState'; export * from './videoplayer/videoSource'; +export * from './videoplayer/uiState'; diff --git a/client/composables/videoplayer/uiState.ts b/client/composables/videoplayer/uiState.ts index e69de29bb..518f2b621 100644 --- a/client/composables/videoplayer/uiState.ts +++ b/client/composables/videoplayer/uiState.ts @@ -0,0 +1,40 @@ +const UI_TIMEOUT = 3000; + +export const useUiState = () => { + const uiState = reactive({ + visible: true + }); + + const cursor = computed(() => { + return uiState.visible ? 'default' : 'none'; + }); + + const showUITimeout = ref(); + const showUI = () => { + uiState.visible = true; + clearTimeout(showUITimeout.value); + showUITimeout.value = setTimeout(() => { + // uiState.visible = false; + }, UI_TIMEOUT); + }; + + const hideUI = () => { + // uiState.visible = false; + clearTimeout(showUITimeout.value); + }; + + const onMouseMove = (_e: MouseEvent) => { + showUI(); + }; + const onMouseLeave = (_e: MouseEvent) => { + hideUI(); + }; + + return { + uiState, + cursor, + + onMouseMove, + onMouseLeave + }; +}; diff --git a/client/composables/videoplayer/videoState.ts b/client/composables/videoplayer/videoState.ts index cc13ca123..846b9a244 100644 --- a/client/composables/videoplayer/videoState.ts +++ b/client/composables/videoplayer/videoState.ts @@ -3,8 +3,23 @@ import { VideoplaybackAdapterType } from '@/utils/videoplayer/adapters/adapter'; +export type VideoState = { + playing: boolean; + buffering: boolean; + bufferLevel: number; + currentTime: number; + duration: number; + volume: number; + loop: boolean; + speed: number; + videoQualityList: string[]; + audioQualityList: string[]; + videoTrackList: string[]; + audioTrackList: string[]; +}; + export const useVideoState = ( - videoRef: Ref, + videoElementRef: Ref, adapterType: Ref, source: Ref, startTime?: Ref @@ -17,7 +32,11 @@ export const useVideoState = ( duration: 0, volume: 1, loop: false, - speed: 1 + speed: 1, + videoQualityList: [], + audioQualityList: [], + videoTrackList: [], + audioTrackList: [] }); const adapterInstance = ref(); @@ -30,7 +49,7 @@ export const useVideoState = ( switch (adapterType.value) { case 'dash': - adapterInstance.value = await dashAdapter({ videoRef, source, startTime }); + adapterInstance.value = await dashAdapter({ videoRef: videoElementRef, source, startTime }); break; case 'hls': case 'native': @@ -50,6 +69,7 @@ export const useVideoState = ( }); adapterInstance.value.onStreamActivated(() => { updateTimeAndDuration(); + updateQualityLists(); }); adapterInstance.value.onStreamTeardownComplete(() => { updateTimeAndDuration(); @@ -77,12 +97,12 @@ export const useVideoState = ( mutations.forEach(mutation => { if (mutation.type === 'attributes') { if (mutation.attributeName === 'loop') { - videoState.loop = videoRef.value.loop; + videoState.loop = videoElementRef.value.loop; } } }); }); - videoAttributeObserver.observe(videoRef.value, { attributes: true }); + videoAttributeObserver.observe(videoElementRef.value, { attributes: true }); }); watch(adapterType, async (newValue, oldValue) => { @@ -96,6 +116,15 @@ export const useVideoState = ( updateDuration(); }; + const updateQualityLists = () => { + if (adapterInstance.value) { + videoState.videoQualityList = adapterInstance.value.getVideoQualityList(); + videoState.audioQualityList = adapterInstance.value.getAudioQualityList(); + videoState.videoTrackList = adapterInstance.value.getVideoTrackList(); + videoState.audioTrackList = adapterInstance.value.getAudioTrackList(); + } + }; + const updateTime = () => { if (adapterInstance.value) { const currentTime = adapterInstance.value.getTime(); @@ -149,7 +178,7 @@ export const useVideoState = ( watch( () => videoState.loop, newValue => { - videoRef.value.loop = newValue; + videoElementRef.value.loop = newValue; } ); diff --git a/client/pages/profile/index.vue b/client/pages/profile/index.vue index 2204bac68..fc8211a25 100644 --- a/client/pages/profile/index.vue +++ b/client/pages/profile/index.vue @@ -121,7 +121,6 @@ const onProfileImageChange = (e: any) => { message: reason?.message ?? 'Unknown error' }); } - console.log(reason.message); profileImageLoading.value = false; } ) diff --git a/client/pages/watch.vue b/client/pages/watch.vue index 2213a099f..a545fd0cf 100644 --- a/client/pages/watch.vue +++ b/client/pages/watch.vue @@ -311,7 +311,7 @@ const watchPageTitle = computed(() => { class="video-player-p" @video-ended="onVideoEnded" /> --> - { + if (bitrate < 1000) { + return `${bitrate} bps`; + } + if (bitrate < 1000000) { + return `${Math.round(bitrate / 1000)} kbps`; + } + return `${Math.round(bitrate / 1000000)} mbps`; +}; diff --git a/client/utils/videoplayer/adapters/adapter.ts b/client/utils/videoplayer/adapters/adapter.ts index c255e1e6a..083e98774 100644 --- a/client/utils/videoplayer/adapters/adapter.ts +++ b/client/utils/videoplayer/adapters/adapter.ts @@ -1,3 +1,5 @@ +import type { BitrateInfo, MediaInfo } from 'dashjs'; + export type EventListenerCallback = (e: any) => void; export interface VideoplaybackAdapterResponse { @@ -19,6 +21,10 @@ export interface VideoplaybackAdapterResponse { getBufferLevel: () => number; getVolume: () => number; getPlaybackRate: () => number; + getVideoQualityList: () => BitrateInfo[]; + getAudioQualityList: () => BitrateInfo[]; + getVideoTrackList: () => (MediaInfo & { label?: string })[]; + getAudioTrackList: () => (MediaInfo & { label?: string })[]; setVolume: (volume: number) => void; setTime: (time: number) => void; diff --git a/client/utils/videoplayer/adapters/dashAdapter.ts b/client/utils/videoplayer/adapters/dashAdapter.ts index 07c5e6a4b..279f720a1 100644 --- a/client/utils/videoplayer/adapters/dashAdapter.ts +++ b/client/utils/videoplayer/adapters/dashAdapter.ts @@ -39,6 +39,29 @@ export const dashAdapter: VideoplaybackAdapter = async options => { } return bufferLevel; }; + const getVideoQualityList = () => { + return mediaPlayer.getBitrateInfoListFor('video').map(bitrateInfo => ({ + ...bitrateInfo, + label: `${bitrateInfo.height}p - ${humanizeBitrate(bitrateInfo.bitrate)}` + })); + }; + const getAudioQualityList = () => { + return mediaPlayer.getBitrateInfoListFor('audio').map(bitrateInfo => ({ + ...bitrateInfo, + label: `${bitrateInfo.height}p - ${humanizeBitrate(bitrateInfo.bitrate)}` + })); + }; + const getVideoTrackList = () => { + return mediaPlayer.getTracksFor('video'); + }; + const getAudioTrackList = () => { + return mediaPlayer.getTracksFor('audio').map(audioTrack => { + return { + ...audioTrack, + label: audioTrack.labels?.[0]?.text ?? audioTrack.lang + }; + }); + }; const getTime = mediaPlayer.time; const getDuration = mediaPlayer.duration; const getVolume = mediaPlayer.getVolume; @@ -93,6 +116,10 @@ export const dashAdapter: VideoplaybackAdapter = async options => { getDuration, getBufferLevel, getPlaybackRate, + getVideoQualityList, + getAudioQualityList, + getVideoTrackList, + getAudioTrackList, getVolume, setVolume, From 16cd0f84bf7cc4f5c5eeaffdd9ebcfe358da0aca Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Sun, 8 Oct 2023 01:15:07 +0200 Subject: [PATCH 005/121] =?UTF-8?q?=F0=9F=9A=A7=20work=20on=20video=20play?= =?UTF-8?q?er?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/flip/ControlButtons.vue | 92 ++++++++++++++ client/components/flip/Controls.vue | 35 ++++++ client/components/flip/Player.vue | 13 +- client/components/flip/PlayerUI.vue | 61 ++++------ client/components/flip/Seekbar.vue | 115 ++++++++++++++++-- client/composables/videoplayer/uiState.ts | 84 ++++++++++--- client/composables/videoplayer/videoState.ts | 78 ++++-------- client/utils/icons.ts | 1 + client/utils/shared.ts | 1 + client/utils/videoplayer/adapters/adapter.ts | 2 + .../utils/videoplayer/adapters/dashAdapter.ts | 10 +- shared/util.ts | 2 +- 12 files changed, 368 insertions(+), 126 deletions(-) create mode 100644 client/components/flip/ControlButtons.vue create mode 100644 client/components/flip/Controls.vue diff --git a/client/components/flip/ControlButtons.vue b/client/components/flip/ControlButtons.vue new file mode 100644 index 000000000..213468f01 --- /dev/null +++ b/client/components/flip/ControlButtons.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/client/components/flip/Controls.vue b/client/components/flip/Controls.vue new file mode 100644 index 000000000..90a4ba3b5 --- /dev/null +++ b/client/components/flip/Controls.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/client/components/flip/Player.vue b/client/components/flip/Player.vue index da6f87c95..2faa27ad0 100644 --- a/client/components/flip/Player.vue +++ b/client/components/flip/Player.vue @@ -9,20 +9,17 @@ const videoElementRef = ref(null); const videoObj = toRef(props, 'video'); const startTime = toRef(props, 'startTime'); -const { proxyUrl } = useImgProxy(); const { videoSource, adapterType } = useVideoSource(videoObj); -const { videoState } = useVideoState(videoElementRef, adapterType, videoSource, startTime); +const videoState = useVideoState(videoElementRef, adapterType, videoSource, startTime); +provide('videoState', readonly(videoState)); +provide('video', readonly(props.video)); diff --git a/client/components/flip/PlayerUI.vue b/client/components/flip/PlayerUI.vue index 265b3e417..6b405a2b3 100644 --- a/client/components/flip/PlayerUI.vue +++ b/client/components/flip/PlayerUI.vue @@ -1,25 +1,29 @@ @@ -27,7 +31,7 @@ const { uiState, onMouseMove, onMouseLeave, cursor } = useUiState(); diff --git a/client/components/flip/Seekbar.vue b/client/components/flip/Seekbar.vue index ea53603c3..738229aa2 100644 --- a/client/components/flip/Seekbar.vue +++ b/client/components/flip/Seekbar.vue @@ -1,23 +1,99 @@ @@ -30,9 +106,10 @@ const currentTimeWidth = computed(() => `${(props.currentTime / props.duration) align-items: center; pointer-events: auto; cursor: pointer; + user-select: none; .flip-seekbar { - width: calc(100% - 20px); + width: calc(100% - 30px); margin: auto; background-color: var(--line-color); height: 4px; @@ -43,6 +120,7 @@ const currentTimeWidth = computed(() => `${(props.currentTime / props.duration) position: absolute; top: 0; bottom: 0; + border-radius: 25px; height: 100%; } @@ -67,9 +145,26 @@ const currentTimeWidth = computed(() => `${(props.currentTime / props.duration) transform: scale(0); transition: transform 300ms $intro-easing; } + + .flip-hover-timestamp { + position: absolute; + bottom: 10px; + left: v-bind(hoverPositionStyle); + background-color: $video-thmb-overlay-bgcolor; + padding: 2px 6px; + border-radius: 3px; + font-size: 0.9rem; + opacity: 0; + user-select: none; + pointer-events: none; + transition: opacity 200ms $intro-easing; + } } &:hover { + .flip-hover-timestamp { + opacity: 1; + } .flip-seekbar-point { transform: scale(1); } diff --git a/client/composables/videoplayer/uiState.ts b/client/composables/videoplayer/uiState.ts index 518f2b621..db3f5e5ad 100644 --- a/client/composables/videoplayer/uiState.ts +++ b/client/composables/videoplayer/uiState.ts @@ -1,40 +1,96 @@ const UI_TIMEOUT = 3000; -export const useUiState = () => { - const uiState = reactive({ - visible: true +export type UIState = ReturnType; + +export const useUiState = (videoState: VideoState) => { + const visible = computed(() => { + if (_seeking.value || !videoState.video.playing) { + return true; + } + return _visible.value; }); + const _visible = ref(true); + const _seeking = ref(false); + const setSeeking = (seeking: boolean) => { + console.log('setSeeking', seeking); + _seeking.value = seeking; + if (!seeking) { + showUI(); + } + }; + const cursor = computed(() => { - return uiState.visible ? 'default' : 'none'; + return visible.value ? 'default' : 'none'; }); const showUITimeout = ref(); const showUI = () => { - uiState.visible = true; + _visible.value = true; clearTimeout(showUITimeout.value); showUITimeout.value = setTimeout(() => { - // uiState.visible = false; + _visible.value = false; }, UI_TIMEOUT); }; const hideUI = () => { - // uiState.visible = false; + _visible.value = false; clearTimeout(showUITimeout.value); }; - const onMouseMove = (_e: MouseEvent) => { - showUI(); + const touchEvent = ref(false); + const onPointerDown = (e: PointerEvent) => { + if (e.pointerType === 'touch') { + touchEvent.value = true; + if (e.target instanceof HTMLVideoElement) { + if (!visible.value) { + showUI(); + } else { + hideUI(); + } + } + } + }; + + const pointerMoveTimeout = ref(); + const onPointerMove = (e: PointerEvent) => { + clearTimeout(pointerMoveTimeout.value); + pointerMoveTimeout.value = setTimeout(() => { + if (e.pointerType === 'mouse' && !touchEvent.value) { + showUI(); + } + }, 10); }; - const onMouseLeave = (_e: MouseEvent) => { - hideUI(); + + const onPointerLeave = (e: PointerEvent) => { + clearTimeout(pointerMoveTimeout.value); + if (e.pointerType === 'mouse' && !touchEvent.value) { + hideUI(); + } + + if (e.pointerType === 'mouse') { + touchEvent.value = false; + } + }; + + const onPointerUp = (e: PointerEvent) => { + if (e.pointerType === 'mouse' && e.target instanceof HTMLVideoElement) { + if (videoState.video.playing) { + videoState.pause(); + } else { + videoState.play(); + } + } }; return { - uiState, + visible, cursor, - onMouseMove, - onMouseLeave + onPointerMove, + onPointerLeave, + onPointerDown, + onPointerUp, + setSeeking }; }; diff --git a/client/composables/videoplayer/videoState.ts b/client/composables/videoplayer/videoState.ts index 846b9a244..187016440 100644 --- a/client/composables/videoplayer/videoState.ts +++ b/client/composables/videoplayer/videoState.ts @@ -3,20 +3,7 @@ import { VideoplaybackAdapterType } from '@/utils/videoplayer/adapters/adapter'; -export type VideoState = { - playing: boolean; - buffering: boolean; - bufferLevel: number; - currentTime: number; - duration: number; - volume: number; - loop: boolean; - speed: number; - videoQualityList: string[]; - audioQualityList: string[]; - videoTrackList: string[]; - audioTrackList: string[]; -}; +export type VideoState = ReturnType; export const useVideoState = ( videoElementRef: Ref, @@ -43,13 +30,19 @@ export const useVideoState = ( const instantiateAdapter = async () => { if (adapterInstance.value) { - adapterInstance.value.destroy(); - adapterInstance.value = undefined; + // adapterInstance.value.destroy(); + // adapterInstance.value = undefined; } switch (adapterType.value) { case 'dash': - adapterInstance.value = await dashAdapter({ videoRef: videoElementRef, source, startTime }); + if (adapterInstance.value?.type !== 'dash') { + adapterInstance.value = await dashAdapter({ + videoRef: videoElementRef, + source, + startTime + }); + } break; case 'hls': case 'native': @@ -147,43 +140,24 @@ export const useVideoState = ( } }; - watch( - () => videoState.playing, - newValue => { - if (newValue) { - adapterInstance.value?.play(); - } else { - adapterInstance.value?.pause(); - } - } - ); - watch( - () => videoState.volume, - newValue => { - adapterInstance.value?.setVolume(newValue); - } - ); - watch( - () => videoState.speed, - newValue => { - adapterInstance.value?.setPlaybackRate(newValue); - } - ); - watch( - () => videoState.currentTime, - newValue => { - adapterInstance.value?.setTime(newValue); - } - ); - watch( - () => videoState.loop, - newValue => { - videoElementRef.value.loop = newValue; - } - ); + const play = () => adapterInstance.value?.play(); + const pause = () => adapterInstance.value?.pause(); + const setVolume = (volume: number) => adapterInstance.value?.setVolume(volume); + const setPlaybackRate = (playbackRate: number) => + adapterInstance.value?.setPlaybackRate(playbackRate); + const setTime = (time: number) => adapterInstance.value?.setTime(time); + const setLoop = (loop: boolean) => { + videoElementRef.value.loop = loop; + }; return { - videoState + video: videoState, + play, + pause, + setVolume, + setPlaybackRate, + setTime, + setLoop }; }; diff --git a/client/utils/icons.ts b/client/utils/icons.ts index b2341f7e6..1719f10a4 100644 --- a/client/utils/icons.ts +++ b/client/utils/icons.ts @@ -77,6 +77,7 @@ export const iconSafelist = [ 'mdi-thumb-up', 'mdi-trash-can-outline', 'mdi-undo', + 'mdi-volume', 'mdi-volume-high', 'mdi-volume-low', 'mdi-volume-medium', diff --git a/client/utils/shared.ts b/client/utils/shared.ts index 7e741b8cc..6a2241a66 100644 --- a/client/utils/shared.ts +++ b/client/utils/shared.ts @@ -1 +1,2 @@ +export { getTimestampFromSeconds, getSecondsFromTimestamp } from '../../shared'; export type { ApiDto, ApiErrorDto } from '../../shared'; diff --git a/client/utils/videoplayer/adapters/adapter.ts b/client/utils/videoplayer/adapters/adapter.ts index 083e98774..28d08c7d4 100644 --- a/client/utils/videoplayer/adapters/adapter.ts +++ b/client/utils/videoplayer/adapters/adapter.ts @@ -3,6 +3,8 @@ import type { BitrateInfo, MediaInfo } from 'dashjs'; export type EventListenerCallback = (e: any) => void; export interface VideoplaybackAdapterResponse { + type: 'dash' | 'hls' | 'native'; + onPlaybackStarted: (callback: EventListenerCallback) => void; onPlaybackPaused: (callback: EventListenerCallback) => void; onPlaybackTimeUpdated: (callback: EventListenerCallback) => void; diff --git a/client/utils/videoplayer/adapters/dashAdapter.ts b/client/utils/videoplayer/adapters/dashAdapter.ts index 279f720a1..054899c8c 100644 --- a/client/utils/videoplayer/adapters/dashAdapter.ts +++ b/client/utils/videoplayer/adapters/dashAdapter.ts @@ -25,6 +25,10 @@ export const dashAdapter: VideoplaybackAdapter = async options => { const onVolumeChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_VOLUME_CHANGED); const onPlaybackRateChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_RATE_CHANGED); + const destroy = () => { + mediaPlayer.destroy(); + }; + // Getters const getBufferLevel = () => { let bufferLevel = 0; @@ -94,11 +98,9 @@ export const dashAdapter: VideoplaybackAdapter = async options => { const startTimeNumber = startTime?.value ?? 0; mediaPlayer.initialize(videoRef.value, source.value, false, startTimeNumber); - const destroy = () => { - mediaPlayer.destroy(); - }; - return { + type: 'dash', + onPlaybackStarted, onPlaybackPaused, onPlaybackTimeUpdated, diff --git a/shared/util.ts b/shared/util.ts index ed74c977b..90b4789c0 100644 --- a/shared/util.ts +++ b/shared/util.ts @@ -39,7 +39,7 @@ export const getTimestampFromSeconds = (seconds: number) => { if (secondsLeft < 10) { timestamp += '0'; } - timestamp += secondsLeft; + timestamp += secondsLeft.toFixed(0); return timestamp; }; From 9811f492f15b3a5be7a878f43437f4eeabfc6d89 Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Sun, 8 Oct 2023 02:36:02 +0200 Subject: [PATCH 006/121] =?UTF-8?q?=F0=9F=90=9B=20Fix=20interaction=20and?= =?UTF-8?q?=20init?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/flip/Player.vue | 1 + client/composables/videoplayer/uiState.ts | 2 +- client/composables/videoplayer/videoState.ts | 17 +++++++------- .../utils/videoplayer/adapters/dashAdapter.ts | 23 +++++++++++++++++++ 4 files changed, 33 insertions(+), 10 deletions(-) diff --git a/client/components/flip/Player.vue b/client/components/flip/Player.vue index 2faa27ad0..00c08db2e 100644 --- a/client/components/flip/Player.vue +++ b/client/components/flip/Player.vue @@ -26,5 +26,6 @@ provide('video', readonly(props.video)); diff --git a/client/composables/videoplayer/uiState.ts b/client/composables/videoplayer/uiState.ts index db3f5e5ad..fd79f3fe2 100644 --- a/client/composables/videoplayer/uiState.ts +++ b/client/composables/videoplayer/uiState.ts @@ -59,7 +59,7 @@ export const useUiState = (videoState: VideoState) => { if (e.pointerType === 'mouse' && !touchEvent.value) { showUI(); } - }, 10); + }, 1); }; const onPointerLeave = (e: PointerEvent) => { diff --git a/client/composables/videoplayer/videoState.ts b/client/composables/videoplayer/videoState.ts index 187016440..f5c400ff1 100644 --- a/client/composables/videoplayer/videoState.ts +++ b/client/composables/videoplayer/videoState.ts @@ -30,19 +30,18 @@ export const useVideoState = ( const instantiateAdapter = async () => { if (adapterInstance.value) { - // adapterInstance.value.destroy(); - // adapterInstance.value = undefined; + adapterInstance.value.destroy(); + adapterInstance.value = undefined; } switch (adapterType.value) { case 'dash': - if (adapterInstance.value?.type !== 'dash') { - adapterInstance.value = await dashAdapter({ - videoRef: videoElementRef, - source, - startTime - }); - } + adapterInstance.value = await dashAdapter({ + videoRef: videoElementRef, + source, + startTime + }); + break; case 'hls': case 'native': diff --git a/client/utils/videoplayer/adapters/dashAdapter.ts b/client/utils/videoplayer/adapters/dashAdapter.ts index 054899c8c..06523e229 100644 --- a/client/utils/videoplayer/adapters/dashAdapter.ts +++ b/client/utils/videoplayer/adapters/dashAdapter.ts @@ -5,10 +5,20 @@ export const dashAdapter: VideoplaybackAdapter = async options => { const dashjs = await import('dashjs'); const mediaPlayer = dashjs.MediaPlayer().create(); + const eventStorage = new Map(); + const registerCallback = (event: string) => (callback: EventListenerCallback) => { + eventStorage.set(event, callback); mediaPlayer.on(event, callback); }; + const unregisterCallback = (event: string) => { + const callback = eventStorage.get(event); + if (callback) { + mediaPlayer.off(event, callback); + } + }; + // Register callbacks const onPlaybackStarted = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_STARTED); const onPlaybackPaused = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_PAUSED); @@ -26,6 +36,19 @@ export const dashAdapter: VideoplaybackAdapter = async options => { const onPlaybackRateChanged = registerCallback(dashjs.MediaPlayer.events.PLAYBACK_RATE_CHANGED); const destroy = () => { + unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_STARTED); + unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_PAUSED); + unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED); + unregisterCallback(dashjs.MediaPlayer.events.STREAM_ACTIVATED); + unregisterCallback(dashjs.MediaPlayer.events.STREAM_DEACTIVATED); + unregisterCallback(dashjs.MediaPlayer.events.STREAM_TEARDOWN_COMPLETE); + unregisterCallback(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED); + unregisterCallback(dashjs.MediaPlayer.events.BUFFER_LEVEL_UPDATED); + unregisterCallback(dashjs.MediaPlayer.events.CAN_PLAY); + unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_WAITING); + unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_VOLUME_CHANGED); + unregisterCallback(dashjs.MediaPlayer.events.PLAYBACK_RATE_CHANGED); + mediaPlayer.destroy(); }; From 732277b1998a0fe4439a44811c86013a711662dd Mon Sep 17 00:00:00 2001 From: Maurice Oegerli Date: Sun, 8 Oct 2023 17:57:18 +0200 Subject: [PATCH 007/121] =?UTF-8?q?=E2=9C=A8=20Fullscreen=20and=20title?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/flip/ControlButtons.vue | 6 ++- client/components/flip/Controls.vue | 1 + client/components/flip/PlayerUI.vue | 4 +- client/components/flip/TopBar.vue | 40 ++++++++++++++++++++ client/composables/videoplayer/uiState.ts | 45 +++++++++++++++++++++-- 5 files changed, 89 insertions(+), 7 deletions(-) create mode 100644 client/components/flip/TopBar.vue diff --git a/client/components/flip/ControlButtons.vue b/client/components/flip/ControlButtons.vue index 213468f01..80af56dab 100644 --- a/client/components/flip/ControlButtons.vue +++ b/client/components/flip/ControlButtons.vue @@ -2,6 +2,7 @@ import { getTimestampFromSeconds } from '@/utils/shared'; const videoState = inject('videoState'); +const uiState = inject('uiState'); const onPlayPauseClick = () => { if (videoState.video.playing) { @@ -37,8 +38,9 @@ const videoLengthText = computed(() => getTimestampFromSeconds(videoState.video. -
{{ videoLengthText }} diff --git a/client/components/flip/Controls.vue b/client/components/flip/Controls.vue index 90a4ba3b5..da46b1bf4 100644 --- a/client/components/flip/Controls.vue +++ b/client/components/flip/Controls.vue @@ -2,6 +2,7 @@