Issue #PS-0000 fix: Fixed player UI

public/locales/en/common.json

@@ -135,7 +135,9 @@
     "SINGLE_TEAM_LEADERS_ASSIGNED":"Selected block {{selectedBlockForTL}} already has {{assignedTeamLeader}} Team Leader assigned.",
     "CONTINUE_ASSIGNED_TEAM_LEADER":"Still do you want to continue to assign team leader to {{selectedBlockForTL}}",
     "ASSIGNED_TEAM_LEADERS":"{{assignedTeamLeaderNames}} and more..",
-    "CONTINUE":"Continue"
+    "CONTINUE":"Continue",
+    "DESCRIPTION": "Description",
+    "PAGE_NOT_FOUND": "Page Not Found"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
@@ -160,7 +162,7 @@
     "VIEW_PLANS": "View Plans",
     "FOUNDATION_COURSE": "Foundation Course",
     "MAIN_COURSE": "Main Course",
-    "WORKSPACE": "Workspace App"
+    "WORKSPACE": "Workspace"
 
   },
   "FACILITATORS": {

src/components/Loader.tsx

@@ -1,16 +1,20 @@
 import { Backdrop, CircularProgress, Typography } from "@mui/material";
 import React from "react";
+import { useTranslation } from "next-i18next";
 
-const Loader: React.FC<{ showBackdrop: boolean; loadingText: string }> = ({
+
+const Loader: React.FC<{ showBackdrop: boolean; loadingText?: string }> = ({
   showBackdrop,
-  loadingText = "",
+  loadingText
 }) => {
+  const { t } = useTranslation();
+
   const Spinner = () => {
     return (
       <>
         <CircularProgress color="inherit" />
         <br />
-        <Typography variant="h2">{loadingText}...</Typography>
+        <Typography variant="h2">{t(loadingText ?? "COMMON.LOADING")}...</Typography>
       </>
     );
   };

src/components/ResourceCard.tsx

@@ -1,8 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Card, CardContent, Typography, Box } from "@mui/material";
-import Image from "next/image";
+import Image, { StaticImageData } from "next/image";
 import placeholderImage from "../../public/placeholderImage.png";
 import router from "next/router";
+import { getYouTubeThumbnail } from "@/utils/Helper";
+import { fetchContent } from "@/services/PlayerService";
 
 interface ResourceCardProps {
   title: string;
@@ -17,9 +19,40 @@ const ResourceCard: React.FC<ResourceCardProps> = ({
   resource,
   identifier,
 }) => {
+  const [thumbnailUrl, setThumbnailUrl] = useState<string | StaticImageData>(placeholderImage);
+
+  useEffect(() => {
+    const loadContent = async () => {
+      try {
+        if (identifier) {
+          if (type === 'self') {
+            const data = await fetchContent(identifier);
+            if (data?.appIcon) {
+              setThumbnailUrl(data.appIcon);
+            }
+            console.log("vivek", data);
+          } else if (type.toLowerCase() === 'youtube') {
+            const img = getYouTubeThumbnail(identifier);
+            if (img) {
+              setThumbnailUrl(img);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Unable to fetch content", error);
+      }
+    }
+    loadContent();
+
+  }, [identifier, type])
+
   const openPlayers = () => {
     sessionStorage.setItem("previousPage", window.location.href);
-    router.push(`/play/content/${identifier}`);
+    if (type === 'self') {
+      router.push(`/play/content/${identifier}`);
+    } else if (type.toLowerCase() === 'youtube') {
+      window.open(identifier);
+    }
   };
 
   return (
@@ -33,14 +66,18 @@ const ResourceCard: React.FC<ResourceCardProps> = ({
           onClick={openPlayers}
         >
           <Image
-            src={placeholderImage}
+            src={thumbnailUrl}
             alt="Resource Placeholder"
             width={100}
             height={100}
             style={{ borderRadius: "10px" }}
           />
         </Box>
-        <Typography variant="subtitle1" sx={{ mt: 1 }}>
+        <Typography variant="subtitle1" sx={{
+          mt: 1, whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}>
           {title}
         </Typography>
         <Typography variant="body2" color="textSecondary">

src/components/layouts/FullLayout.tsx

@@ -137,7 +137,7 @@ const FullLayout = ({ children }: any) => {
         sx={{
           paddingLeft: isSidebarOpen && lgUp ? "265px" : "",
           backgroundColor: "#4d4639",
-                    boxshow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
+          boxshow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
         }}
         toggleMobileSidebar={() => setMobileSidebarOpen(true)}
       />
@@ -150,15 +150,12 @@ const FullLayout = ({ children }: any) => {
         <Container
           maxWidth={false}
           sx={{
-          //  paddingTop: "20px",
+            //  paddingTop: "20px",
             paddingLeft: isSidebarOpen && lgUp ? "280px!important" : "",
             backgroundColor: "#F3F5F8",
-
           }}
         >
-          <Box 
-          sx={{ minHeight: "calc(100vh - 170px)" }}  >
-{children}</Box>
+          <Box sx={{ minHeight: "calc(100vh - 170px)" }}>{children}</Box>
           <Footer />
         </Container>
       </PageWrapper>

src/components/layouts/sidebar/Sidebar.tsx

@@ -11,16 +11,14 @@ import {
   Typography,
   useMediaQuery,
 } from "@mui/material";
-import FeatherIcon from "feather-icons-react";
 import { useTranslation } from "next-i18next";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import { useState } from "react";
 import LogoIcon from "../logo/LogoIcon";
 import Buynow from "./Buynow";
 import Menuitems from "./MenuItems";
-import Image from "next/image";
-import MasterIcon  from '../../../../public/images/database.svg';
 
 const Sidebar = ({
   isMobileSidebarOpen,
@@ -68,22 +66,18 @@ const Sidebar = ({
                   selected={location === item.href}
                   sx={{
                     mb: 1,
-                    
+
                     ...(location === item.href && {
                       color: "black",
                       backgroundColor: (theme) =>
                         `${theme.palette.primary.main}!important`,
                     }),
                   }}
                 >
-             {/* {  item.icon && (<ListItemIcon>
-  {item.icon}
-</ListItemIcon>) */}
-<ListItemIcon>
-<Image src={item.icon} alt="" />
-
-</ListItemIcon>
-      <ListItemText>
+                  <ListItemIcon>
+                    <Image src={item.icon} alt="" />
+                  </ListItemIcon>
+                  <ListItemText>
                     <Typography variant="h2" sx={{ fontWeight: "700px" }}>
                       {t(item.title)}
                     </Typography>
@@ -102,7 +96,11 @@ const Sidebar = ({
                 <Collapse in={open === index} timeout="auto" unmountOnExit>
                   <List component="div" disablePadding>
                     {item?.subOptions?.map((subItem) => (
-                      <Tooltip title={t(subItem.title)} placement="right-start" key={subItem.title}>
+                      <Tooltip
+                        title={t(subItem.title)}
+                        placement="right-start"
+                        key={subItem.title}
+                      >
                         <ListItem
                           button
                           key={subItem.title}
@@ -113,7 +111,7 @@ const Sidebar = ({
                           selected={location === subItem.href}
                           sx={{
                             pl: 8,
-                           ml: 2,
+                            ml: 2,
                             mb: 1,
                             ...(location === subItem.href && {
                               color: "black",

src/data/player-config.ts

@@ -1,4 +1,6 @@
-export const V2PlayerConfig = {
+import { PlayerConfig } from "@/utils/Interfaces";
+
+export const V2PlayerConfig: PlayerConfig = {
   context: {
     mode: "play",
     partner: [],
@@ -46,10 +48,9 @@ export const V2PlayerConfig = {
       showReplay: true,
     },
   },
-  metadata: {},
   data: {},
 };
-export const V1PlayerConfig = {
+export const V1PlayerConfig: PlayerConfig = {
   config: {
     whiteListUrl: [],
     showEndPage: true,
@@ -80,7 +81,7 @@ export const V1PlayerConfig = {
       bgImage: "assets/icons/splacebackground_1.png",
       webLink: "",
     },
-    apislug: "/action",
+    apislug: "",
     repos: ["/sunbird-plugins/renderer"],
     plugins: [
       {
@@ -103,7 +104,7 @@ export const V1PlayerConfig = {
   },
   context: {
     mode: "play",
-    partner: [],
+    // partner: [],
     pdata: {
       id: "pratham.admin.portal",
       ver: "1.0.0",
@@ -125,6 +126,5 @@ export const V1PlayerConfig = {
       lastName: "User",
     },
   },
-  data: {},
-  metadata: {},
+  data: {}
 };

src/pages/404.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import ErrorIcon from '../../public/images/404.png'; // Make sure to replace this with the actual path to your image
+import Image from 'next/image';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
+
+const PageNotFound = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      py={4}
+      display="flex"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      sx={{ height: '100vh' }} // '-webkit-fill-available' can be approximated with '100vh'
+    >
+      <Image width={270} src={ErrorIcon} alt="Error icon" />
+      <Typography
+        mt={4}
+        variant="h2"
+        fontSize="20px"
+        lineHeight="30px"
+        fontWeight="600"
+        color="black"
+      >
+        {t('COMMON.PAGE_NOT_FOUND')}
+      </Typography>
+    </Box>
+  );
+};
+
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      // Will be passed to the page component as props
+    },
+  };
+}
+
+export default PageNotFound;

src/pages/play/content/[identifier].tsx

@@ -1,33 +1,37 @@
-import React, { useEffect, useState } from "react";
-import dynamic from "next/dynamic";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { useRouter } from "next/router";
 import {
   fetchContent,
   getHierarchy,
   getQumlData,
 } from "@/services/PlayerService";
 import { PlayerConfig } from "@/utils/Interfaces";
-import { Box } from "@mui/material";
-import { V1PlayerConfig, V2PlayerConfig } from "../../../data/player-config";
+import { Box, IconButton, Typography } from "@mui/material";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
 import {
-  QUESTIONSET_MIME_TYPE,
   INTERACTIVE_MIME_TYPE,
+  QUESTIONSET_MIME_TYPE,
 } from "../../../../config.json";
+import { V1PlayerConfig, V2PlayerConfig } from "../../../data/player-config";
+import Loader from "@/components/Loader";
+import { useTranslation } from "react-i18next";
 
 // @ts-ignore
 const SunbirdPlayers = dynamic(() => import("editor/SunbirdPlayers"), {
   ssr: false,
 });
 
-let playerConfig = { config: {}, context: {}, metadata: {}, data: {} };
+let playerConfig: PlayerConfig;
 
 interface SunbirdPlayerProps {
   playerConfig: PlayerConfig;
 }
 
-const players: React.FC<SunbirdPlayerProps> = () => {
+const Players: React.FC<SunbirdPlayerProps> = () => {
   const router = useRouter();
+  const { t } = useTranslation();
   const { identifier } = router.query;
   const [loading, setLoading] = useState(true);
 
@@ -66,9 +70,37 @@ const players: React.FC<SunbirdPlayerProps> = () => {
 
   return (
     <Box>
+      <Box sx={{ display: "flex", alignItems: "center", mb: 2, mt: 2 }} onClick={() => router.back()}>
+        <IconButton>
+          <ArrowBackIcon />
+          </IconButton>
+          <Typography
+            variant="h4"
+          >
+            {t("COMMON.BACK")}
+          </Typography>
+      </Box>
+      {loading && (
+        <Box
+          width={"100%"}
+          id="check"
+          display={"flex"}
+          flexDirection={"column"}
+          alignItems={"center"}
+          mt={"5rem"}
+        >
+          <Loader showBackdrop={false} />
+        </Box>
+      )}
       <Box marginTop={"1rem"}>
+        <Typography color={'#024f9d'} sx={{padding: '0 0 4px 4px', fontWeight: 'bold'}}>{playerConfig?.metadata?.name}</Typography>
         {!loading ? <SunbirdPlayers player-config={playerConfig} /> : null}
       </Box>
+
+      {/* <Box mt={2}>
+        <Typography variant="h4">{t('COMMON.DESCRIPTION')}</Typography>
+      </Box> */}
+
     </Box>
   );
 };
@@ -91,4 +123,4 @@ export async function getStaticProps({ locale, params }: any) {
   };
 }
 
-export default players;
+export default Players;