feat: add autoplay for youtube when fullscreen modals is open (#651)

Author: aeksandla

src/components/FullscreenMedia/FullscreenMedia.tsx

@@ -11,7 +11,13 @@ import './FullscreenMedia.scss';
 
 export type ChildMediaRenderProps = Pick<
     MediaAllProps,
-    'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'
+    | 'fullscreen'
+    | 'imageClassName'
+    | 'videoClassName'
+    | 'youtubeClassName'
+    | 'className'
+    | 'previewImg'
+    | 'autoplay'
 >;
 
 export interface FullscreenMediaProps {
@@ -78,6 +84,8 @@ const FullscreenMedia = ({children, showFullscreenIcon = true}: FullscreenMediaP
                             videoClassName: getMediaClass('video'),
                             youtubeClassName: getMediaClass('youtube'),
                             fullscreen: true,
+                            previewImg: undefined,
+                            autoplay: true,
                         })}
                     </div>
                 </Modal>

src/components/Media/Media.tsx

@@ -16,6 +16,7 @@ const b = block('Media');
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
     youtubeClassName?: string;
+    autoplay?: boolean;
 }
 
 export const Media = (props: MediaAllProps) => {
@@ -41,6 +42,7 @@ export const Media = (props: MediaAllProps) => {
         customBarControlsClassName,
         qa,
         ratio,
+        autoplay,
     } = props;
 
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -101,6 +103,7 @@ export const Media = (props: MediaAllProps) => {
                     height={height}
                     fullscreen={fullscreen}
                     analyticsEvents={analyticsEvents}
+                    autoplay={autoplay}
                 />
             );
         }
@@ -132,6 +135,7 @@ export const Media = (props: MediaAllProps) => {
         customBarControlsClassName,
         ratio,
         youtubeClassName,
+        autoplay,
     ]);
 
     return (

src/components/VideoBlock/VideoBlock.tsx

@@ -59,6 +59,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase {
     playButton?: React.ReactNode;
     height?: number;
     fullscreen?: boolean;
+    autoplay?: boolean;
 }
 
 const VideoBlock = (props: VideoBlockProps) => {
@@ -73,6 +74,7 @@ const VideoBlock = (props: VideoBlockProps) => {
         height,
         fullscreen,
         analyticsEvents,
+        autoplay,
     } = props;
     const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview);
 
@@ -120,7 +122,10 @@ const VideoBlock = (props: VideoBlockProps) => {
             iframe.id = fullId;
 
             if (!previewImg) {
-                iframe.src = `${src}?${getPageSearchParams(attributes || {})}`;
+                iframe.src = `${src}?${getPageSearchParams({
+                    ...(attributes || {}),
+                    ...(autoplay ? AUTOPLAY_ATTRIBUTES : {}),
+                })}`;
             }
 
             iframe.width = '100%';
@@ -133,7 +138,7 @@ const VideoBlock = (props: VideoBlockProps) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]);
 
     useEffect(() => {
         setHidePreview(false);