Merge pull request #2622 from tekdi/release-prod-fix

Release prod fix to learner qa

Author: rushi-tekdi

apps/learner-web-app/src/components/Content/Player.tsx

@@ -57,6 +57,7 @@ const App = ({
   const [breadCrumbs, setBreadCrumbs] = useState<any>();
   const [isShowMoreContent, setIsShowMoreContent] = useState(false);
   const [mimeType, setMemetype] = useState('');
+  const [isVideo, setIsVideo] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
   const [showJotFormModal, setShowJotFormModal] = useState(false);
@@ -66,6 +67,31 @@ const App = ({
     mimeType: string;
   } | null>(null);
 
+  const [isPortrait, setIsPortrait] = useState(false);
+
+  useEffect(() => {
+    setIsVideo(mimeType=='video/mp4' || mimeType=='video/webm');
+  }, [mimeType]);
+
+  // Check if device is in portrait mode (width < height)
+  useEffect(() => {
+    const checkOrientation = () => {
+      setIsPortrait(window.innerWidth < window.innerHeight);
+    };
+
+    // Check on mount
+    checkOrientation();
+
+    // Listen for resize and orientation changes
+    window.addEventListener('resize', checkOrientation);
+    window.addEventListener('orientationchange', checkOrientation);
+
+    return () => {
+      window.removeEventListener('resize', checkOrientation);
+      window.removeEventListener('orientationchange', checkOrientation);
+    };
+  }, []);
+
   let activeLink = null;
   if (typeof window !== 'undefined') {
     const searchParams = new URLSearchParams(window.location.search);
@@ -403,9 +429,13 @@ const App = ({
           unitId={unitId}
           mimeType={mimeType}
           {..._config?.player}
+          isPortrait={isPortrait}
+          isVideo={isVideo}
         />
         {item?.content?.artifactUrl &&
+          
           isDownloadableMimeType(item?.content?.mimeType || mimeType) &&
+          (!isPortrait || (isVideo && !isPortrait)) &&
           isDownloadContentEnabled() && (
             <Box
               sx={{
@@ -457,7 +487,8 @@ const App = ({
 
       <Grid
         sx={{
-          display: isShowMoreContent ? 'flex' : 'none',
+          display: isShowMoreContent && (!isPortrait || (isVideo && !isPortrait)) ? 'flex' : 'none',
+
           flexDirection: 'column',
           flex: { xs: 1, sm: 1, md: 9 },
         }}
@@ -615,13 +646,14 @@ const PlayerBox = ({
   trackable,
   isShowMoreContent,
   mimeType,
+  isPortrait,
+  isVideo
 }: any) => {
   const router = useRouter();
   const { t } = useTranslation();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [play, setPlay] = useState(false);
-  const [isPortrait, setIsPortrait] = useState(false);
 
   // Determine aspectRatio based on mimeType and mobile mode
   const getAspectRatio = () => {
@@ -631,25 +663,6 @@ const PlayerBox = ({
     return '16/9';
   };
 
-  // Check if device is in portrait mode (width < height)
-  useEffect(() => {
-    const checkOrientation = () => {
-      setIsPortrait(window.innerWidth < window.innerHeight);
-    };
-
-    // Check on mount
-    checkOrientation();
-
-    // Listen for resize and orientation changes
-    window.addEventListener('resize', checkOrientation);
-    window.addEventListener('orientationchange', checkOrientation);
-
-    return () => {
-      window.removeEventListener('resize', checkOrientation);
-      window.removeEventListener('orientationchange', checkOrientation);
-    };
-  }, []);
-
   useEffect(() => {
     if (checkAuth() || userIdLocalstorageName) {
       setPlay(true);
@@ -716,9 +729,7 @@ const PlayerBox = ({
             width: isShowMoreContent
               ? '100%'
               : { xs: '100%', sm: '100%', md: '90%', lg: '80%', xl: '70%' },
-            p:0,
-            ml:-10,
-            mr:-5,
+            ...(isPortrait && isVideo ? { p:0, ml:-10, mr:-5 } : {}),
           }}
         >
           <iframe
@@ -741,8 +752,8 @@ const PlayerBox = ({
               aspectRatio: getAspectRatio(),
             }}
             allowFullScreen
-            width={"110%"}
-            height={isPortrait ? '300%' : '100%'}
+            width={isPortrait && isVideo ? "110%" : "100%"}
+            height={isPortrait && isVideo ? '300%' : '100%'}
             title="Embedded Localhost"
             allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture"
             frameBorder="0"