added replay publication interface

src/hooks/use-live-comments.ts

@@ -11,7 +11,7 @@ type LiveCommentsContextType = {
     pinnedComments: ILiveComment[];
 };
 
-const WEB_SOCKET_URL = process.env.WEB_SOCKET_URL || "http://15.237.175.171:8080/ws";
+const WEB_SOCKET_URL = process.env.WEB_SOCKET_URL || "http://localhost:8080/ws";
 
 const useLiveComments = ({ id, status }: ILive): LiveCommentsContextType => {
     const [comments, setComments] = useState<ILiveComment[]>([]);

src/shared/sections/lives/add-edit-live/edit-live-view.tsx

@@ -411,7 +411,7 @@ export default function EditLiveView() {
         <Container maxWidth={settings.themeStretch ? false : 'lg'}>
             <CustomBreadcrumbs
                 heading={`Modifier live #${liveData.id}`}
-                rollbackLink={paths.dashboard.live.all_lives}
+                rollbackLink={paths.dashboard.live.info(liveData.id)}
                 links={[
                     { name: 'dashboard', href: paths.dashboard.root },
                     { name: 'lives', href: paths.dashboard.live.all_lives },

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

@@ -22,15 +22,19 @@ import AddProduct from './add-products';
 import CustomBreadcrumbs from '@/components/custom-breadcrumbs';
 import { paths } from '@/routes/paths';
 import { useSettingsContext } from '@/shared/components/settings';
-import { Avatar, CardMedia, Checkbox, Container, List, ListItem, ListItemAvatar, ListItemText } from '@mui/material';
+import { Avatar, Button, CardMedia, Checkbox, Container, List, ListItem, ListItemAvatar, ListItemText, Paper } from '@mui/material';
 import { ILiveProduct, LiveStatus } from '@/shared/types/live';
-import { editLive, getProductsLive } from '@/shared/api/live';
+import { deleteLive, editLive, getProductsLive, publishLive } from '@/shared/api/live';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLiveData } from '@/contexts/live-stats';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useRouter } from 'next/navigation';
 import Iconify from '@/components/iconify';
+import Label from "@/shared/components/label";
 import { styled } from '@mui/material/styles';
+import CopyButton from '@/components/copy-button';
+import { useBoolean } from '@/hooks';
+import { ConfirmDialog } from '@/shared/components/custom-dialog';
 
 const StyledList = styled(List)({
     overflowY: 'auto',
@@ -79,6 +83,7 @@ const ProductCard = ({ product, isChecked, handleToggle }: any) => (
 
 export default function LiveDetailsView() {
     const liveData = useLiveData();
+    const { status } = liveData;
     const mdUp = useResponsive('up', 'md');
     const { enqueueSnackbar } = useSnackbar();
     const settings = useSettingsContext();
@@ -117,6 +122,28 @@ export default function LiveDetailsView() {
         videoFormat: liveData.videoFormat,
     }), [liveData]);
 
+    const deleteConfirm = useBoolean();
+    const publishConfirm = useBoolean();
+
+
+    const handleDelete = async () => {
+        await deleteLive(liveData.id);
+        deleteConfirm.onFalse();
+        router.push(paths.dashboard.live.all_lives);
+
+    }
+
+    const handlePublishLive = async () => {
+        try {
+            await publishLive(liveData.id);
+            enqueueSnackbar('Le live a été publié', { variant: 'success' });
+        } catch (err: any) {
+            enqueueSnackbar(err.message as string, { variant: 'error' });
+        } finally {
+            publishConfirm.onFalse();
+        }
+    }
+
     const methods = useForm({
         resolver: yupResolver(NewLiveSchema),
         defaultValues,
@@ -203,6 +230,7 @@ export default function LiveDetailsView() {
                                 </Typography>
                                 <Typography variant="body2" gutterBottom>
                                     {liveData.keysWork?.keyStream}
+                                    <CopyButton sx={{ position: 'absolute', right: 3, top: 1 }} value={liveData.keysWork?.keyStream as string} />
                                 </Typography>
                             </Card>
                         </Grid>
@@ -213,6 +241,7 @@ export default function LiveDetailsView() {
                                 </Typography>
                                 <Typography variant="body2" gutterBottom>
                                     {liveData.keysWork?.rtmpServerAddress}
+                                    <CopyButton sx={{ position: 'absolute', right: 3, top: 1 }} value={liveData.keysWork?.rtmpServerAddress as string} />
                                 </Typography>
                             </Card>
                         </Grid>
@@ -223,6 +252,7 @@ export default function LiveDetailsView() {
                                 </Typography>
                                 <Typography variant="body2" gutterBottom>
                                     {liveData.keysWork?.hlsServerAddress}
+                                    <CopyButton sx={{ position: 'absolute', right: 3, top: 1 }} value={liveData.keysWork?.hlsServerAddress as string} />
                                 </Typography>
                             </Card>
                         </Grid>
@@ -454,7 +484,7 @@ export default function LiveDetailsView() {
                     </Stack>
                     <Stack spacing={2} sx={{ p: 3 }}>
                         <Typography variant="subtitle1">Photo de couverture</Typography>
-                        <img src={liveData.image as string} style={{ height: "auto", maxHeight: '300', borderRadius: 10 }} />
+                        <img src={liveData.image as string} style={{ maxHeight: 200, maxWidth: 150, borderRadius: 10 }} />
                     </Stack>
                 </Card>
             </Grid>
@@ -462,8 +492,24 @@ export default function LiveDetailsView() {
     );
 
     const renderActions = (
-        <>
-            {mdUp && <Grid md={4} />}
+        <Grid xs={12} md={4} sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, py: 4 }}>
+            <Label
+                sx={{ textTransform: 'capitalize', height: 40, fontSize: 16, fontWeight: 600, padding: '0 16px' }}
+                variant="soft"
+                color={
+                    (status == LiveStatus.REPLAY && 'success') ||
+                    (status == LiveStatus.ONGOING && 'warning') ||
+                    (status == LiveStatus.COMING && 'error') ||
+                    (status == LiveStatus.REVIEW && 'info') || 'default'
+                }
+            >
+                {
+                    (status == LiveStatus.REPLAY && 'replay') ||
+                    (status == LiveStatus.ONGOING && 'en cours') ||
+                    (status == LiveStatus.COMING && 'à venir') ||
+                    (status == LiveStatus.REVIEW && 'en revue')
+                }
+            </Label>
             <Grid xs={12} md={8} sx={{ display: 'flex', justifyContent: 'end', py: 4 }}>
                 <LoadingButton
                     variant="contained"
@@ -500,7 +546,7 @@ export default function LiveDetailsView() {
                     <LoadingButton
                         variant="contained"
                         size="large"
-                        loading={isSubmitting}
+                        onClick={publishConfirm.onTrue}
                         sx={{ ml: 2, backgroundColor: 'blue' }}
                     >
                         Publier
@@ -510,14 +556,14 @@ export default function LiveDetailsView() {
                     type="submit"
                     variant="contained"
                     size="large"
-                    loading={isSubmitting}
+                    onClick={deleteConfirm.onTrue}  
                     sx={{ ml: 2, backgroundColor: 'red' }}
                 >
                     <Iconify sx={{ mr: 2 }} icon="material-symbols:delete" />
                     Supprimer
                 </LoadingButton>
             </Grid>
-        </>
+        </Grid>
     );
 
 
@@ -544,6 +590,28 @@ export default function LiveDetailsView() {
                     {renderProducts}
                 </Grid>
             </FormProvider>
+            <ConfirmDialog
+                open={deleteConfirm.value}
+                onClose={deleteConfirm.onFalse}
+                title="Supprimer"
+                content="Voulez-vous vraiment supprimer ce live?"
+                action={
+                    <Button variant="contained" color="error" onClick={handleDelete}>
+                        Supprimer
+                    </Button>
+                }
+            />
+            <ConfirmDialog
+                open={publishConfirm.value}
+                onClose={publishConfirm.onFalse}
+                title="Publier"
+                content="Voulez-vous publier le live?"
+                action={
+                    <Button variant="contained" color="info" onClick={handlePublishLive}>
+                        Publier
+                    </Button>
+                }
+            />
         </Container>
     );
 }

src/shared/sections/lives/statistics/statistics-single-live.tsx

@@ -48,7 +48,7 @@ const SingleLiveStatisticsView: React.FC = () => {
     <Container sx={{ gap: 4 }} maxWidth={settings.themeStretch ? false : 'lg'}>
       <CustomBreadcrumbs
         heading={`Statistiques du live : ${id}`}
-        rollbackLink={paths.dashboard.live.all_lives}
+        rollbackLink={paths.dashboard.live.info(id)}
         links={[
           {
             name: 'dashboard',