add toolbar into live state management interface and custumized comment interface

package.json

@@ -46,6 +46,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.48.2",
     "react-i18next": "^14.0.5",
+    "react-input-emoji": "^5.6.11",
     "react-lazy-load-image-component": "^1.6.0",
     "react-markdown": "^9.0.1",
     "react-player": "^2.15.1",

src/shared/sections/lives/all-lives/live-table-row.tsx

@@ -38,7 +38,7 @@ export default function LiveTableRow({
   onEditRow,
   onViewStats
 }: Props) {
-  const { title, description, startDate, status } = row;
+  const { title, description, startDate, status ,image} = row;
   const popover = usePopover();
   const openDetails = useBoolean();
 
@@ -52,6 +52,14 @@ export default function LiveTableRow({
         <TableCell padding="checkbox">
           <Checkbox checked={selected} onClick={onSelectRow} />
         </TableCell>
+        <TableCell >
+          <Avatar
+            alt={title}
+            src={image}
+            variant="rounded"
+            sx={{ width: 64, height: 64, mr: 2 }}
+          />
+        </TableCell>
 
         <TableCell >
           {title}

src/shared/sections/lives/all-lives/view.tsx

@@ -49,12 +49,13 @@ import LiveTableRow from './live-table-row';
 import LiveSearch from './live-search';
 
 const TABLE_HEAD = [
+  { id: 'image', label: 'image', align: 'left' },
   { id: 'title', label: 'titre', align: 'left' },
   { id: 'startDate', label: 'Date de début', align: 'left' },
   { id: 'startTime', label: 'Heure de début', align: 'left' },
   { id: 'description', label: 'Description', align: 'left' },
   { id: 'status', label: 'Status', align: 'left' },
-  { id: 'actions', label: 'Actions', align: 'right' },
+  { id: 'actions', label: '', align: 'right' },
 
 ];
 

src/shared/sections/lives/details/details-comments-input.tsx

@@ -5,11 +5,10 @@ import InputBase from '@mui/material/InputBase';
 import IconButton from '@mui/material/IconButton';
 import { useResponsive, useRouter } from '@/hooks';
 import uuidv4 from '@/utils/uuidv4';
-
-
+import InputEmoji from 'react-input-emoji'
 import Iconify from '@/components/iconify';
 import { addCommentLive } from '@/api/live';
-import { useTheme } from '@mui/material';
+import { Paper, useTheme } from '@mui/material';
 
 
 
@@ -30,7 +29,7 @@ export default function CommentsInput({
     const style = mdUp ? {
         left: '50%',
     } : {
-        left: '52%',
+        left: '51%',
     };
     const commentData = useMemo(
         () => ({
@@ -76,38 +75,29 @@ export default function CommentsInput({
     );
 
     return (
-        <>
-            <InputBase
+        <Paper style={{
+            zIndex: 2,
+            flexShrink: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'transparent',
+            borderRadius: 2,
+            width: '98%',
+            ...style,
+            position: 'absolute',
+            transform: 'translateX(-50%)',
+            bottom: 0,
+            paddingRight:4,
+        }}>
+            <InputEmoji
                 value={comment}
-                onKeyUp={handleSendComment}
-                onChange={handleChangeComment}
+                cleanOnEnter
+                onChange={(value) => setComment(value)}
                 placeholder="Type a message"
-                disabled={disabled}
-                startAdornment={
-                    <IconButton>
-                        <Iconify icon="eva:smiling-face-fill" />
-                    </IconButton>
-                }
-                endAdornment={
-                    <IconButton type='submit'>
-                        <Iconify icon="mingcute:send-fill" />
-                    </IconButton>
-                }
-
-                sx={{
-                    zIndex: 2,
-                    height: 40,
-                    flexShrink: 0,
-                    borderRadius: 2,
-                    width: '94%',
-                    ...style,
-                    bgcolor: theme.palette.background.paper,
-                    transform: 'translateX(-50%)',
-                    position: 'absolute',
-                    bottom: 6,
-                    border: (theme) => `solid 2px ${theme.palette.divider}`,
-                }}
+                height={20}
             />
-        </>
+            <Iconify style={{height:30, width:30, color: 'gray', marginBottom:2}} icon="iconamoon:send-fill" />
+        </Paper>
     );
 }

src/shared/sections/lives/details/details-comments-item.tsx

@@ -13,7 +13,6 @@ import { bgGradient } from '@/shared/theme/css';
 import { useResponsive } from '@/hooks';
 
 
-// ----------------------------------------------------------------------
 
 type Props = {
   comment: ILiveComment;
@@ -32,17 +31,16 @@ export default function LiveCommentItem({ comment }: Props) {
       startColor: alpha(theme.palette['primary'].light, 0.2),
       endColor: alpha(theme.palette['primary'].main, 0.2),
     }),
-    minWidth: 48,
-    maxWidth: 320,
-    p: 1.5
+    width: "100%",
+    p: .5,
+    fontSize: theme.typography.pxToRem(12),
   } : {
     fontSize: theme.typography.pxToRem(12),
     backgroundColor: 'rgb(0 0 0 / 50%)',
     color: 'white',
     borderColor: 'gray',
     textDecorationColor: 'gray',
-    minWidth: 20,
-    maxWidth: 200,
+    width: 200,
     p: .5,
   };
 
@@ -51,13 +49,12 @@ export default function LiveCommentItem({ comment }: Props) {
       noWrap
       variant="caption"
       sx={{
-        mb: 1,
         mr: 'auto',
         color: 'grey'
       }}
     >
       {`${senderId},`}  
-      {formatDistanceToNowStrict(new Date(createdAt), {
+      {mdUp && formatDistanceToNowStrict(new Date(createdAt), {
         addSuffix: true,
       })}
     </Typography>
@@ -83,8 +80,8 @@ export default function LiveCommentItem({ comment }: Props) {
       sx={{
         pt: 0.5,
         opacity: 0,
-        top: '100%',
-        left: 0,
+        bottom: '100%',
+        right: 1,
         position: 'absolute',
         transition: (theme) =>
           theme.transitions.create(['opacity'], {
@@ -105,13 +102,15 @@ export default function LiveCommentItem({ comment }: Props) {
   );
 
   return (
-    <Stack direction="row" justifyContent={'unset'} sx={{ mb: 5 }}>
+    <Stack direction="column" justifyContent={'unset'} sx={{ mb: 2 }}>
       <Stack alignItems="flex-end">
         {renderInfo}
 
-        <Stack
+        
+      </Stack>
+      <Stack
           direction="row"
-          alignItems="center"
+          alignItems="flex-end"
           sx={{
             position: 'relative',
             '&:hover': {
@@ -124,7 +123,6 @@ export default function LiveCommentItem({ comment }: Props) {
           {renderBody}
           {renderActions}
         </Stack>
-      </Stack>
     </Stack>
   );
 }

src/shared/sections/lives/details/details-comments-section.tsx

@@ -13,7 +13,7 @@ export default function CommentSection({ liveId }: Props) {
         <>
             {mdUp ? (
                 <Grid item lg={4} md={4} sm={12}>
-                    <Card sx={{ height: 600, p: 2 }}>
+                    <Card sx={{ height: 600}}>
                         <CommentsList liveId={liveId} />
                         <CommentsInput liveId={liveId} disabled={false} />
                     </Card>

src/shared/sections/lives/details/details-head-section.tsx

+import CustomBreadcrumbs from "@/components/custom-breadcrumbs";
+import Iconify from "@/components/iconify";
+import { useResponsive, useRouter } from "@/hooks";
+import { paths } from "@/routes/paths";
+import RouterLink from "@/routes/router-link";
+import Label from "@/shared/components/label";
+import { fDateTime } from "@/utils/format-time";
+import { Button, IconButton, Paper, Stack, TextField, Typography } from "@mui/material";
+import { TimeField } from "@mui/x-date-pickers";
+import dayjs from 'dayjs';
+import { useCallback } from "react";
+
+export default function HeadSection({ liveId }: { liveId: string }) {
+    const smUp = useResponsive('up', 'sm');
+    const router=useRouter();
+    const navigateToLives=useCallback(
+        () => {
+          router.push(paths.dashboard.live.root);
+        },
+        [router]
+      );
+
+    return (
+        <Paper
+            sx={{
+                position: 'relative',
+                display: 'flex',
+                flexDirection: { xs: "column", lg: "row" },
+                mb: 4,
+                justifyContent: 'space-between',
+                alignItems: { xs: "start", lg: "center" },
+                gap: 2,
+                width: "100%",
+                bgcolor: "transparent"
+            }}>
+
+            <Stack width={300} direction="row" alignItems="flex-start">
+                <IconButton onClick={navigateToLives} >
+                    <Iconify icon="eva:arrow-ios-back-fill" />
+                </IconButton>
+
+                <Stack spacing={0.5}>
+                    <Stack spacing={1} direction="row" alignItems="center">
+                        <Typography variant="h4"> Live  #{liveId} </Typography>
+                        <Label
+                            variant="soft"
+                            color={
+                               
+                                'success'
+                            }
+                        >
+                            a venir
+                        </Label>
+                    </Stack>
+
+                    <Typography variant="body2" sx={{ color: 'text.disabled' }}>
+                        {fDateTime(new Date())}
+                    </Typography>
+                </Stack>
+            </Stack>
+            <Stack
+                spacing={3}
+                justifyContent={{ xs: 'center', md: 'flex-end' }}
+                alignItems={'center'}
+                direction={'row'}
+                height={"100%"}
+            >
+                <TextField
+                    label="Spectateur"
+                    size="small"
+                    variant="outlined"
+                    sx={{ maxWidth: 100 }}
+                    value={0}
+                />
+                {smUp && <TextField
+                    label="Ajout au panier"
+                    size="small"
+                    variant="outlined"
+                    sx={{ maxWidth: 110 }}
+                    value={0}
+                />}
+
+
+                <TimeField
+                    value={dayjs('2022-04-17T00:00').toDate()}
+                    format="HH:mm:ss"
+                    label="live"
+                    size="small"
+                    variant="outlined"
+                    sx={{ maxWidth: 100 }}
+                />
+                <Button
+                    component={RouterLink}
+                    href={paths.dashboard.live.new}
+                    variant="contained"
+                    startIcon={<Iconify icon="material-symbols:not-started-rounded" />}
+                >
+                    {smUp && "Démarrer"}
+                </Button>
+                <Button
+                    component={RouterLink}
+                    href={paths.dashboard.live.new}
+                    variant="contained"
+                    startIcon={<Iconify icon="material-symbols-light:text-select-move-back-word" />}
+                >
+                    {smUp && "Quitter"}
+                </Button>
+            </Stack>
+
+
+        </Paper>
+    )
+}
\ No newline at end of file

src/shared/sections/lives/details/details-product-card.tsx

 import React from 'react';
 import {
-    Card,
-    ListItem,
     Avatar,
-    ListItemText,
-    List,
+    Box,
+    Button,
+    Card,
     Grid,
-    TextField,
-    CardContent,
-    Typography,
-    ListItemAvatar,
+    ListItemText,
     useTheme,
 } from '@mui/material';
 import { IProduct } from '@/shared/_mock';
+import { TimeField } from '@mui/x-date-pickers';
+import Iconify from '@/components/iconify';
+import { paths } from '@/routes/paths';
+import RouterLink from '@/routes/router-link';
 
 const ProductCard = (product: IProduct) => {
     const theme = useTheme();
     return (
-        <Card variant="outlined" sx={{ marginBottom: 2, p: 0, overflow: 'visible', bgcolor: theme.palette.background.neutral }}>
+        <Card variant="outlined" sx={{ marginBottom: 2, bgcolor: theme.palette.background.neutral }}>
 
-            <List disablePadding>
-                <ListItem alignItems="flex-start" sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
-                    <ListItemAvatar>
-                        <Avatar variant="rounded" alt={product.title} src={product.image} sx={{ height: 100, width: 100 }} />
-                    </ListItemAvatar>
+            <Grid container >
+                <Grid item xs={4}  alignItems="flex-start"  >
+                    <Avatar   variant="rounded" sx={{ height: "100%", width: "100%" }} alt={product.title} src={product.image} />
+                </Grid >
+                <Grid item xs={8}   sx={{ p:1, gap:2 , display: "flex" , flexDirection: "column",  }} padding={2}>
                     <ListItemText
                         primary={product.title}
                         secondary={product.reference}
+                        primaryTypographyProps={{ typography: 'body2', noWrap: true }}
+                        secondaryTypographyProps={{
+                            mt: 0.5,
+                            component: 'span',
+                            typography: 'caption',
+                        }}
+                    />
+                    <Box sx={{ display: 'flex', width: "100%",justifyContent:"space-between" , gap:2}}>
+                        <Button
+                            variant="contained"
+                            fullWidth={true}
+                            startIcon={<Iconify icon="mdi:add-bold" />}
+                        >
+                            Ajouter
+                        </Button>
+                        <Button
+                            variant="contained"
+                            fullWidth={true}
+                            startIcon={<Iconify icon="ic:round-delete" />}
+                        >
+                            supprimer
+                        </Button>
+                    </Box>
+                    <Box sx={{ display: 'flex', width: "100%",justifyContent:"space-between" ,gap:2}}>
+                    <TimeField
+                        fullWidth
+                        size='small'
+                        label="Start Time"
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                        inputProps={{
+                            step: 1, // Allows for second precision
+                        }}
+                    />
+                    <TimeField
+                        fullWidth
+                        size='small'
+                        label="End Time"
+                        InputLabelProps={{
+                            shrink: true,
+                        }}
+                        inputProps={{
+                            step: 1, // Allows for second precision
+                        }}
                     />
-                </ListItem>
-                <ListItem sx={{ mt: 2 }}>
-                    <Grid container spacing={2} alignItems="center">
-                        <Grid item xs={12} sm={6}>
-                            <TextField
-                                fullWidth
-                                label="Start Time"
-                                type="time"
-                                InputLabelProps={{
-                                    shrink: true,
-                                }}
-                                inputProps={{
-                                    step: 1, // Allows for second precision
-                                }}
-                            />
-                        </Grid>
-                        <Grid item xs={12} sm={6}>
-                            <TextField
-                                fullWidth
-                                label="End Time"
-                                type="time"
-                                InputLabelProps={{
-                                    shrink: true,
-                                }}
-                                inputProps={{
-                                    step: 1, // Allows for second precision
-                                }}
-                            />
-                        </Grid>
-                    </Grid>
-                </ListItem>
-            </List>
+                    </Box>
+                </Grid>
+               
+            </Grid>
         </Card>
     )
 };

src/shared/sections/lives/details/details-products-section.tsx

@@ -49,7 +49,7 @@ export default function ProductsSection({ liveId }: Props) {
                 </Grid>
             ) : (
                 <>
-                    <Button variant="outlined" onClick={handleOpen} sx={{ position: 'absolute', color: 'white', zIndex: 2, top: 30, right: 30 }}>Products</Button>
+                    <Button variant="outlined" onClick={handleOpen} sx={{ position: 'absolute', color: 'white', zIndex: 2, top: 20, left: 20 }}>Products</Button>
                     <Modal
                         open={open}
                         onClose={handleClose}

src/shared/sections/lives/details/view.tsx

 'use client';
 
-import { paths } from '@/routes/paths';
 import { useSettingsContext } from '@/shared/components/settings';
-import CustomBreadcrumbs from '@/components/custom-breadcrumbs';
 import { Grid, Container, Card } from '@mui/material';
 import CommentSection from './details-comments-section';
 import ProductsSection from './details-products-section';
 import VideoPlayerSection from './details-player-section';
 import { useResponsive } from '@/hooks';
+import HeadSection from './details-head-section';
 
 type Props = {
     liveId: string
@@ -18,39 +17,17 @@ export default function LiveDetailsView({ liveId }: Props) {
 
     const settings = useSettingsContext();
     const lgUp = useResponsive('up', 'lg');
-    
+
 
 
     return (
 
-        <Container maxWidth={settings.themeStretch ? false : 'lg'}>
-            {lgUp
-                &&
-                (
-                    <CustomBreadcrumbs
-                        heading="Détails du live "
-                        links={[
-                            {
-                                name: 'dashboard',
-                                href: paths.dashboard.root,
-                            },
-                            {
-                                name: 'lives',
-                                href: paths.dashboard.live.all_lives,
-                            },
-                            {
-                                name: 'création des live',
-                            },
-                        ]}
-                        sx={{
-                            mb: { xs: 3, md: 5 },
-                        }}
-                    />
-                )}
-            <Grid padding={0} sx={{position: 'relative'}} container spacing={2}>
-                <CommentSection liveId={liveId} />
-                <VideoPlayerSection liveId={liveId} />  
+        <Container disableGutters={true} maxWidth={false}>
+            <HeadSection liveId={'liveId'}/>
+            <Grid padding={0} sx={{ position: 'relative' }} container spacing={2}>
                 <ProductsSection liveId={liveId} />
+                <VideoPlayerSection liveId={liveId} />
+                <CommentSection liveId={liveId} />
             </Grid>
         </Container>
     );

src/utils/axios.ts

@@ -2,7 +2,6 @@ import axios, { AxiosRequestConfig } from 'axios';
 
 import { HOST_API } from '../config-global';
 
-// ----------------------------------------------------------------------
 
 const axiosInstance = axios.create({ baseURL: HOST_API });
 
@@ -13,7 +12,6 @@ axiosInstance.interceptors.response.use(
 
 export default axiosInstance;
 
-// ----------------------------------------------------------------------
 
 export const fetcher = async (args: string | [string, AxiosRequestConfig]) => {
   const [url, config] = Array.isArray(args) ? args : [args];