feature: theatre mode in the platform

[ezhil56x]

Is your feature request related to a problem? Please describe. For people using only one screen having theatre mode in the platform is really useful and a great ux

Describe the solution you'd like Currently video.js is used which supports theatre mode. So I think it is not that difficult to implement theatre mode.

[Aryam2121]

import React, { useEffect, useRef, FunctionComponent, useState } from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css';

interface VideoPlayerProps {

}

const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({ props }) => { const videoRef = useRef<HTMLVideoElement>(null); const [playing, setPlaying] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false);

useEffect(() => { const videoElement = videoRef.current; if (!videoElement) return;

const player = videojs(videoElement);

player.on('play', () => {
  setPlaying(true);
});

player.on('pause', () => {
  setPlaying(false);
});

// Listen for fullscreenchange event
player.on('fullscreenchange', () => {
  setIsFullscreen(player.isFullscreen());
});

return () => {
  player.dispose();
};

}, []);

const togglePlayPause = () => { const videoElement = videoRef.current; if (!videoElement) return;

if (videoElement.paused) {
  videoElement.play();
} else {
  videoElement.pause();
}

};

const toggleFullscreen = () => { const videoElement = videoRef.current; if (!videoElement) return;

if (!isFullscreen) {
  videoElement.requestFullscreen();
} else {
  document.exitFullscreen();
}

};

return (

<div className={isFullscreen ? 'video-container fullscreen' : 'video-container'}> <video ref={videoRef} className="video-js" />

<button onClick={togglePlayPause}> {playing ? 'Pause' : 'Play'} <button onClick={toggleFullscreen}> {isFullscreen ? 'Exit Theater Mode' : 'Enter Theater Mode'} ); };

export default VideoPlayer; /////////////////// logic is this if i am not wrong? //////////////////