show durations and published date on the video thumbnails

client/package.json

@@ -53,13 +53,15 @@
     "formik": "^2.2.9",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "numeral": "^2.0.6",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
     "react-hook-form": "^7.37.0",
+    "react-moment": "^1.1.3",
     "react-player": "^2.11.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "^5.0.1",
@@ -69,7 +71,6 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "serve": "^14.2.0",
     "@babel/core": "^7.19.3",
     "@babel/eslint-parser": "^7.19.1",
     "@svgr/webpack": "^6.5.0",
@@ -83,7 +84,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "prettier": "^2.7.1"
+    "prettier": "^2.7.1",
+    "serve": "^14.2.0"
   },
   "overrides": {
     "@svgr/webpack": "^6.5.0"

client/src/pages/ProductsPage.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 // @mui
 import { Container, Stack, Typography } from '@mui/material';
 // components
-import { ProductSort, ProductList, ProductCartWidget, ProductFilterSidebar } from '../sections/@dashboard/products';
+import { ProductSort, VideoList, ProductCartWidget, ProductFilterSidebar } from '../sections/@dashboard/products';
 // mock
 import PRODUCTS from '../_mock/products';
 
@@ -42,7 +42,7 @@ export default function ProductsPage() {
           </Stack>
         </Stack>
 
-        <ProductList products={PRODUCTS} />
+        <VideoList videos={PRODUCTS} />
         <ProductCartWidget />
       </Container>
     </>

client/src/pages/VideosPage.js

@@ -8,7 +8,7 @@ import { Container, Stack, Typography } from '@mui/material';
 // components
 import {
   ProductSort,
-  ProductList,
+  VideoList,
   ProductCartWidget,
   ProductFilterSidebar,
 } from '../sections/@dashboard/products';
@@ -65,8 +65,7 @@ export default function ProductsPage() {
             <ProductSort />
           </Stack>
         </Stack>
-
-        <ProductList products={videos} />
+        <VideoList videos={videos} />
         <ProductCartWidget />
       </Container>
     </>

client/src/sections/@dashboard/products/ProductCard.js → client/src/sections/@dashboard/products/VideoCard.js

@@ -4,6 +4,7 @@ import { Box, Card, Stack, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 import { Link } from "react-router-dom";
+import Moment from 'react-moment';
 
 // utils
 // components
@@ -21,24 +22,28 @@ const StyledProductImg = styled('img')({
 
 // ----------------------------------------------------------------------
 
-ShopProductCard.propTypes = {
-  product: PropTypes.object,
+VideoCard.propTypes = {
+  video: PropTypes.object,
 };
 
-export default function ShopProductCard({ video }) {
+export default function VideoCard({ video }) {
   const {
     title: name,
     thumbnailUrl: cover,
     viewCount,
-    duration: status,
-    publishedAt,
+    duration,
+    status,
+    recordingDate,
     _id: id,
   } = video;
 
   const onClickHandler = () => {
     console.log('clicked', video);
   };
 
+  let videoDuration = 0
+  if(duration) videoDuration = duration
+
   return (
     <Card onClick={onClickHandler}>
       <Box sx={{ pt: '100%', position: 'relative' }}>
@@ -61,20 +66,23 @@ export default function ShopProductCard({ video }) {
       </Box>
 
       <Stack spacing={2} sx={{ p: 3 }}>
-        <Link to={id} color='inherit' underline='hover'>
-          <Typography variant='subtitle2' noWrap>
-            {name}
-          </Typography>
-        </Link>
-
-        <Stack
-          direction='row'
-          alignItems='center'
-          justifyContent='space-between'
-        >
-          <Typography variant='subtitle1'>{publishedAt}</Typography>
-          <Typography variant='subtitle1'>{viewCount} views</Typography>
-        </Stack>
+        <Stack direction='row' alignItems='center' justifyContent='space-between'>
+            <Link to={id} color='inherit' underline='hover'>
+              <Typography variant='subtitle2' noWrap>
+                {name}
+              </Typography>
+            </Link>
+            <Typography variant='subtitle1'>
+                <Moment format='DD/MM/yyyy'>{recordingDate}</Moment>
+            </Typography>
+          </Stack>
+
+          <Stack direction='row' alignItems='center' justifyContent='space-between'>
+            <Typography variant='subtitle1'>{viewCount} views</Typography>
+            <Typography variant='subtitle1'>
+              <Moment utc format='HH:mm:ss'>{videoDuration*1000}</Moment>
+            </Typography>
+          </Stack>
       </Stack>
     </Card>
   );

client/src/sections/@dashboard/products/VideoList.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+// @mui
+import { Grid } from '@mui/material';
+import VideoCard from './VideoCard';
+
+// ----------------------------------------------------------------------
+
+VideoList.propTypes = {
+  videos: PropTypes.array.isRequired,
+};
+
+export default function VideoList({ videos = [], ...other }) {
+  return (
+    <Grid container spacing={3} {...other}>
+      {videos.map((video) => (
+        <Grid key={video.id} item xs={12} sm={6} md={3}>
+          <VideoCard video={video} />
+        </Grid>
+      ))}
+    </Grid>
+  );
+}

client/src/sections/@dashboard/products/index.js

@@ -1,5 +1,5 @@
-export { default as ProductCard } from './ProductCard';
-export { default as ProductList } from './ProductList';
+export { default as VideoCard } from './VideoCard';
+export { default as VideoList } from './VideoList';
 export { default as ProductSort } from './ProductSort';
 export { default as ProductCartWidget } from './ProductCartWidget';
 export { default as ProductFilterSidebar } from './ProductFilterSidebar';

client/yarn.lock

@@ -6681,6 +6681,11 @@ mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.6"
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
@@ -7967,6 +7972,11 @@ react-is@^18.0.0, react-is@^18.2.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-moment@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-1.1.3.tgz#829b21dfb279aa6db47ce4f1ac2555af17a1bcdc"
+  integrity sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==
+
 react-player@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.11.0.tgz#9afc75314eb915238e8d6615b2891fbe7170aeaa"