From d088bcd8a6652612b8933f6267e7b377ba3d572e Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Fri, 19 Sep 2025 13:07:41 +0300 Subject: [PATCH] fix: Remove code that is not related with latest version of video.js --- .../js/components/comments/Comments.jsx | 31 --- .../media-viewer/VideoViewer/index.js | 254 +----------------- 2 files changed, 6 insertions(+), 279 deletions(-) diff --git a/frontend/src/static/js/components/comments/Comments.jsx b/frontend/src/static/js/components/comments/Comments.jsx index 9d99b491..711f5ed5 100644 --- a/frontend/src/static/js/components/comments/Comments.jsx +++ b/frontend/src/static/js/components/comments/Comments.jsx @@ -9,9 +9,6 @@ import { LinksContext, MemberContext, SiteContext } from '../../utils/contexts/' import { PopupMain, UserThumbnail } from '../_shared'; import { replaceString } from '../../utils/helpers/'; -import './videojs-markers.js'; -import './videojs.markers.css'; -import { enableMarkers, addMarker } from './videojs-markers_config.js'; import { translateString } from '../../utils/helpers/'; import './Comments.scss'; @@ -457,36 +454,8 @@ export default function CommentsList(props) { return text.replace(timeRegex, wrapTimestampWithAnchor); } - function setMentions(text) { - let sanitizedComment = text.split('@(_').join(''); - return sanitizedComment.split('_]').join(''); - } - function setTimestampAnchorsAndMarkers(text, videoPlayer) { - function wrapTimestampWithAnchor(match, string) { - let split = match.split(':'), - s = 0, - m = 1; - let searchParameters = new URLSearchParams(window.location.search); - while (split.length > 0) { - s += m * parseInt(split.pop(), 10); - m *= 60; - } - if (MediaCMS.features.media.actions.timestampTimebar) { - addMarker(videoPlayer, s, text); - } - - searchParameters.set('t', s); - const wrapped = - '' + match + ''; - return wrapped; - } - - const timeRegex = new RegExp('((\\d)?\\d:)?(\\d)?\\d:\\d\\d', 'g'); - return text.replace(timeRegex, wrapTimestampWithAnchor); - } function onCommentSubmit(commentId) { onCommentsLoad(); diff --git a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js index a87b2501..d18f02f1 100644 --- a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js +++ b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js @@ -4,7 +4,7 @@ import { VideoViewerActions } from '../../../utils/actions/'; import { SiteContext, SiteConsumer } from '../../../utils/contexts/'; import { PageStore, MediaPageStore, VideoViewerStore } from '../../../utils/stores/'; import { addClassname, removeClassname, formatInnerLink } from '../../../utils/helpers/'; -import { BrowserCache, UpNextLoaderView, MediaDurationInfo, PlayerRecommendedMedia } from '../../../utils/classes/'; +import { BrowserCache, UpNextLoaderView, MediaDurationInfo } from '../../../utils/classes/'; import { orderedSupportedVideoFormats, videoAvailableCodecsAndResolutions, @@ -159,19 +159,10 @@ export default class VideoViewer extends React.PureComponent { this.onClickPrevious = this.onClickPrevious.bind(this); this.onStateUpdate = this.onStateUpdate.bind(this); - this.onVideoEnd = this.onVideoEnd.bind(this); - this.onVideoRestart = this.onVideoRestart.bind(this); } componentDidMount() { if (this.videoSources.length) { - this.recommendedMedia = this.props.data.related_media.length - ? new PlayerRecommendedMedia( - this.props.data.related_media, - this.props.inEmbed, - !PageStore.get('config-media-item').displayViews - ) - : null; this.upNextLoaderView = !this.props.inEmbed && this.props.data.related_media.length @@ -323,36 +314,6 @@ export default class VideoViewer extends React.PureComponent { } } - componentWillUnmount() { - this.unsetRecommendedMedia(); - } - - initRecommendedMedia() { - if (null === this.recommendedMedia) { - return; - } - - if (!this.props.inEmbed) { - this.recommendedMedia.init(); - } - - this.playerInstance.player.on('fullscreenchange', this.recommendedMedia.onResize); - - PageStore.on('window_resize', this.recommendedMedia.onResize); - - VideoViewerStore.on('changed_viewer_mode', this.recommendedMedia.onResize); - } - - unsetRecommendedMedia() { - if (null === this.recommendedMedia) { - return; - } - this.playerInstance.player.off('fullscreenchange', this.recommendedMedia.onResize); - PageStore.removeListener('window_resize', this.recommendedMedia.onResize); - VideoViewerStore.removeListener('changed_viewer_mode', this.recommendedMedia.onResize); - this.recommendedMedia.destroy(); - } - onClickNext() { const playlistId = MediaPageStore.get('playlist-id'); @@ -423,87 +384,13 @@ export default class VideoViewer extends React.PureComponent { if (!this.props.inEmbed) { this.playerElem.parentNode.focus(); // Focus on player. } - - if (null !== this.recommendedMedia) { - this.recommendedMedia.initWrappers(this.playerElem.parentNode); - - if (this.props.inEmbed) { - this.playerInstance.player.one('pause', this.recommendedMedia.init); - this.initRecommendedMedia(); - } - } - - this.playerInstance.player.one('ended', this.onVideoEnd); - } - - onVideoRestart() { - if (null !== this.recommendedMedia) { - this.recommendedMedia.updateDisplayType('inline'); - - if (this.props.inEmbed) { - this.playerInstance.player.one('pause', this.recommendedMedia.init); - } - - this.playerInstance.player.one('ended', this.onVideoEnd); - } - } - - onVideoEnd() { - if (null !== this.recommendedMedia) { - if (!this.props.inEmbed) { - this.initRecommendedMedia(); - } - - this.recommendedMedia.updateDisplayType('full'); - this.playerInstance.player.one('playing', this.onVideoRestart); - } - - const playlistId = this.props.inEmbed ? null : MediaPageStore.get('playlist-id'); - - if (playlistId) { - const moreMediaEl = document.querySelector('.video-player .more-media'); - const actionsAnimEl = document.querySelector('.video-player .vjs-actions-anim'); - - this.upNextLoaderView.cancelTimer(); - - const nextMediaUrl = MediaPageStore.get('playlist-next-media-url'); - - if (nextMediaUrl) { - if (moreMediaEl) { - moreMediaEl.style.display = 'none'; - } - - if (actionsAnimEl) { - actionsAnimEl.style.display = 'none'; - } - - window.location.href = nextMediaUrl; - } - - this.upNextLoaderView.hideTimerView(); - - return; - } - - if (this.upNextLoaderView) { - if (PageStore.get('media-auto-play')) { - this.upNextLoaderView.startTimer(); - this.playerInstance.player.one( - 'play', - function () { - this.upNextLoaderView.cancelTimer(); - }.bind(this) - ); - } else { - this.upNextLoaderView.cancelTimer(); - } - } } onUpdateMediaAutoPlay() { if (this.upNextLoaderView) { if (PageStore.get('media-auto-play')) { - this.upNextLoaderView.showTimerView(this.playerInstance.isEnded()); + // non compatible with videojs 8 + // this.upNextLoaderView.showTimerView(this.playerInstance.isEnded()); } else { this.upNextLoaderView.hideTimerView(); } @@ -552,12 +439,11 @@ export default class VideoViewer extends React.PureComponent { ref="playerContainerInner" style={this.props.containerStyles} > - {this.state.displayPlayer && null == MediaPageStore.get('media-load-error-type') ? ( + {/* this.state.displayPlayer && */ null == MediaPageStore.get('media-load-error-type') ? (
{(site) => { return React.createElement(VideoJSEmbed, { - nextLink: nextLink, data: this.props.data, playerVolume: this.browserCache.get('player-volume'), playerSoundMuted: this.browserCache.get('player-sound-muted'), @@ -579,6 +465,7 @@ export default class VideoViewer extends React.PureComponent { inEmbed: this.props.inEmbed, hasTheaterMode: !this.props.inEmbed, hasNextLink: !!nextLink, + nextLink: nextLink, hasPreviousLink: !!previousLink, errorMessage: MediaPageStore.get('media-load-error-message'), onClickNextCallback: this.onClickNext, @@ -592,59 +479,6 @@ export default class VideoViewer extends React.PureComponent { ) : null}
- {/*
-
- {this.state.displayPlayer && null !== MediaPageStore.get('media-load-error-type') ? ( - - ) : null} - - {this.state.displayPlayer && null == MediaPageStore.get('media-load-error-type') ? ( -
- - {(site) => ( - - )} - -
- ) : null} -
-
*/} ); } @@ -657,80 +491,4 @@ VideoViewer.defaultProps = { VideoViewer.propTypes = { inEmbed: PropTypes.bool, -}; - -function findGetParameter(parameterName) { - let result = null; - let tmp = []; - var items = location.search.substr(1).split('&'); - for (let i = 0; i < items.length; i++) { - tmp = items[i].split('='); - if (tmp[0] === parameterName) { - result = decodeURIComponent(tmp[1]); - } - } - return result; -} - -function handleCanvas(videoElem) { - // Make sure it's a video element - - if (!videoElem || !videoElem.tagName || videoElem.tagName.toLowerCase() !== 'video') { - console.error('Invalid video element:', videoElem); - return; - } - - const Player = videojs(videoElem); - Player.playsinline(true); - - Player.on('loadedmetadata', function () { - const muted = parseInt(findGetParameter('muted')); - const autoplay = parseInt(findGetParameter('autoplay')); - const timestamp = parseInt(findGetParameter('t')); - - // Handle timestamp clicks - document.addEventListener('click', function (e) { - if (e.target.classList.contains('video-timestamp')) { - e.preventDefault(); - const timestamp = parseInt(e.target.dataset.timestamp, 10); - - if (timestamp >= 0 && timestamp < Player.duration()) { - Player.currentTime(timestamp); - } else if (timestamp >= 0) { - Player.play(); - } - } - }); - - if (muted == 1) { - Player.muted(true); - } - - if (timestamp >= 0 && timestamp < Player.duration()) { - // Start the video from the given time - Player.currentTime(timestamp); - } else if (timestamp >= 0 && timestamp >= Player.duration()) { - // Restart the video if the given time is greater than the duration - Player.play(); - } - if (autoplay === 1) { - Player.play(); - } - }); -} - -const observer = new MutationObserver((mutations, me) => { - const playerContainer = document.querySelector('.video-js.vjs-mediacms'); - if (playerContainer) { - const video = playerContainer.querySelector('video'); - if (video) { - handleCanvas(video); - me.disconnect(); - } - } -}); - -observer.observe(document, { - childList: true, - subtree: true, -}); +}; \ No newline at end of file