diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx index 5783c6783..bc022e16e 100644 --- a/ui/component/fileRenderFloating/view.jsx +++ b/ui/component/fileRenderFloating/view.jsx @@ -129,7 +129,7 @@ export default function FileRenderFloating(props: Props) { // Listen to main-window resizing and adjust the fp position accordingly: useEffect(() => { - const handleMainWindowResize = debounce(e => { + const handleMainWindowResize = debounce((e) => { let newPos = { x: Math.round(relativePos.x * getScreenWidth()), y: Math.round(relativePos.y * getScreenHeight()), @@ -248,6 +248,7 @@ export default function FileRenderFloating(props: Props) { className={classnames('content__viewer', { 'content__viewer--floating': isFloating, 'content__viewer--inline': !isFloating, + 'content__viewer--secondary': playingUriSource === 'comment', 'content__viewer--theater-mode': !isFloating && videoTheaterMode, })} style={ diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 8a6831bcd..4f2ef44ef 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -28,11 +28,11 @@ export type Player = { ended: () => boolean, error: () => any, loadingSpinner: any, - getChild: string => any, + getChild: (string) => any, playbackRate: (?number) => number, userActive: (?boolean) => boolean, - overlay: any => void, - mobileUi: any => void, + overlay: (any) => void, + mobileUi: (any) => void, controlBar: { addChild: (string, any) => void, }, @@ -42,7 +42,7 @@ type Props = { source: string, sourceType: string, poster: ?string, - onPlayerReady: Player => void, + onPlayerReady: (Player) => void, isAudio: boolean, startMuted: boolean, autoplay: boolean, @@ -315,7 +315,7 @@ export default React.memo(function VideoJs(props: Props) { if (e.shiftKey && (e.keyCode === PERIOD_KEYCODE || e.keyCode === COMMA_KEYCODE)) { const isSpeedUp = e.keyCode === PERIOD_KEYCODE; const rate = player.playbackRate(); - let rateIndex = videoPlaybackRates.findIndex(x => x === rate); + let rateIndex = videoPlaybackRates.findIndex((x) => x === rate); if (rateIndex >= 0) { rateIndex = isSpeedUp ? Math.min(rateIndex + 1, videoPlaybackRates.length - 1) : Math.max(rateIndex - 1, 0); const nextRate = videoPlaybackRates[rateIndex]; @@ -329,6 +329,9 @@ export default React.memo(function VideoJs(props: Props) { // Theater Mode shortcut if (e.keyCode === THEATER_MODE_KEYCODE) { toggleVideoTheaterMode(); + if (player.isFullscreen()) { + player.exitFullscreen(); + } } } @@ -421,7 +424,7 @@ export default React.memo(function VideoJs(props: Props) { // Update video player and reload when source URL changes useEffect(() => { // For some reason the video player is responsible for detecting content type this way - fetch(source, { method: 'HEAD', cache: 'no-store' }).then(response => { + fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => { const player = playerRef.current; if (!player) { diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index cb96c5351..268564d12 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -9,6 +9,12 @@ border: none; } +.content__viewer--secondary { + .vjs-button--theater-mode { + display: none; + } +} + .content__viewer--floating { position: fixed; margin-bottom: 0; diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index 2d03f9398..dac8840f9 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -544,6 +544,12 @@ video::-internal-media-controls-overlay-cast-button { } } +.video-js.vjs-fullscreen { + .vjs-button--theater-mode { + display: none; + } +} + // **************************************************************************** // Tap-to-unmute // ****************************************************************************