Client:MediaViewer Added the ability to automatically play videos when opening

packages/client/src/pages/Home/MediaViewer/index.js

@@ -96,6 +96,7 @@ const FilesMediaViewer = (props) => {
     fetchPublicRoom,
     isPublicRoom,
     openUrl,
+    autoPlay,
   } = props;
 
   const navigate = useNavigate();
@@ -285,6 +286,7 @@ const FilesMediaViewer = (props) => {
             files={files}
             getIcon={getIcon}
             visible={visible}
+            autoPlay={autoPlay}
             playlist={playlist}
             prevMedia={prevMedia}
             nextMedia={nextMedia}
@@ -379,6 +381,7 @@ export default inject(
       nextMedia,
       prevMedia,
       changeUrl,
+      autoPlay,
     } = mediaViewerDataStore;
     const { deleteItemAction } = filesActionsStore;
     const { getIcon, extsImagePreviewed, extsMediaPreviewed } =
@@ -423,6 +426,7 @@ export default inject(
 
     return {
       files,
+      autoPlay,
       playlist,
       currentPostionIndex,
       nextMedia,

packages/client/src/store/MediaViewerDataStore.js

@@ -47,6 +47,8 @@ class MediaViewerDataStore {
 
   publicRoomStore;
 
+  autoPlay = true;
+
   id = null;
   visible = false;
   previewFile = null;
@@ -60,9 +62,14 @@ class MediaViewerDataStore {
     this.publicRoomStore = publicRoomStore;
   }
 
+  setAutoPlay = (value) => {
+    this.autoPlay = value;
+  };
+
   setMediaViewerData = (mediaData) => {
     this.id = mediaData.id;
     this.visible = mediaData.visible;
+    this.setAutoPlay(true);
 
     if (!mediaData.visible) this.setCurrentItem(null);
   };
@@ -109,6 +116,7 @@ class MediaViewerDataStore {
     )
       return;
 
+    this.setAutoPlay(false);
     this.previewFile = file;
     this.id = file.id;
     this.visible = visible;
@@ -167,6 +175,9 @@ class MediaViewerDataStore {
     if (postionIndex === 0) {
       return;
     }
+
+    this.setAutoPlay(false);
+
     const currentFileId = this.playlist[postionIndex].fileId;
 
     const targetFile = files.find((item) => item.id === currentFileId);
@@ -187,6 +198,8 @@ class MediaViewerDataStore {
       return;
     }
 
+    this.setAutoPlay(false);
+
     const currentFileId = this.playlist[currentPlaylistPos].fileId;
 
     const targetFile = files.find((item) => item.id === currentFileId);

packages/shared/components/media-viewer/MediaViewer.tsx

@@ -64,6 +64,7 @@ const MediaViewer = (props: MediaViewerProps): JSX.Element | undefined => {
     pluginContextMenuItems,
     currentDeviceType,
     isPublicFile = false,
+    autoPlay = false,
 
     t,
     getIcon,
@@ -453,6 +454,7 @@ const MediaViewer = (props: MediaViewerProps): JSX.Element | undefined => {
       playlistPos={playlistPos}
       isPublicFile={isPublicFile}
       isPreviewFile={isPreviewFile}
+      autoPlay={autoPlay}
       currentDeviceType={currentDeviceType}
       onClose={onClose}
       onPrevClick={prevMedia}

packages/shared/components/media-viewer/MediaViewer.types.ts

@@ -91,6 +91,9 @@ export interface MediaViewerProps {
   playlistPos: number;
   /** Indicates if the current file is a preview. */
   isPreviewFile?: boolean;
+
+  autoPlay?: boolean;
+
   isPublicFile?: boolean;
   /** List of playlists. */
   playlist: PlaylistType[];

packages/shared/components/media-viewer/sub-components/Viewer/Viewer.props.ts

@@ -38,7 +38,7 @@ interface ViewerProps {
   visible: boolean;
   isImage: boolean;
   isPdf: boolean;
-
+  autoPlay: boolean;
   playlist: PlaylistType[];
 
   audioIcon: string;

packages/shared/components/media-viewer/sub-components/Viewer/index.tsx

@@ -59,6 +59,7 @@ export const Viewer = (props: ViewerProps) => {
     fileUrl,
     toolbar,
     playlist,
+    autoPlay,
     audioIcon,
     errorTitle,
     targetFile,
@@ -277,6 +278,7 @@ export const Viewer = (props: ViewerProps) => {
         <ViewerPlayer
           isError={isError}
           src={fileUrl}
+          autoPlay={autoPlay}
           devices={devices}
           isAudio={isAudio}
           isVideo={isVideo}

packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.props.ts

@@ -39,6 +39,7 @@ interface ViewerPlayerProps {
   isFullScreen: boolean;
   panelVisible: boolean;
   isPreviewFile?: boolean;
+  autoPlay: boolean;
   isOpenContextMenu: boolean;
   isThirdParty?: boolean;
   mobileDetails: JSX.Element;

packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx

@@ -81,6 +81,7 @@ export const ViewerPlayer = ({
   isVideo,
   isError,
   devices,
+  autoPlay,
   audioIcon,
   errorTitle,
   isLastImage,
@@ -643,6 +644,7 @@ export const ViewerPlayer = ({
             playsInline
             ref={videoRef}
             hidden={isAudio}
+            autoPlay={autoPlay}
             preload="metadata"
             style={omit(style, ["x", "y"])}
             src={thumbnailSrc ? src : `${src}#t=0.001`}

packages/shared/components/media-viewer/sub-components/ViewerWrapper/ViewerWrapper.props.ts

@@ -35,6 +35,7 @@ interface ViewerWrapperProps {
   targetFile?: TFile;
   playlistPos: number;
   userAccess?: boolean;
+  autoPlay: boolean;
   playlist: PlaylistType[];
   currentDeviceType?: DeviceType;
 

packages/shared/components/media-viewer/sub-components/ViewerWrapper/index.tsx

@@ -57,6 +57,7 @@ const ViewerWrapper = memo(
       isPreviewFile,
       currentDeviceType,
       isPublicFile,
+      autoPlay,
 
       onClose,
       onNextClick,
@@ -167,6 +168,7 @@ const ViewerWrapper = memo(
         visible={visible}
         isImage={isImage}
         toolbar={toolbar}
+        autoPlay={autoPlay}
         playlist={playlist}
         audioIcon={audioIcon}
         errorTitle={errorTitle}