From d0da95259cbec33dc147765ac0dc49f45bd53282 Mon Sep 17 00:00:00 2001
From: Julian Labatut <julian.labatut@etu.umontpellier.fr>
Date: Tue, 6 Dec 2022 10:22:11 +0100
Subject: [PATCH] feat(#35): add attachments to video form

---
 .../public/locales/en/attachments.json        |   4 +
 apps/polyflix/public/locales/en/videos.json   |  12 +-
 .../public/locales/fr/attachments.json        |   6 +-
 apps/polyflix/public/locales/fr/videos.json   |  12 +-
 .../components/AttachmentAvatar.component.tsx |  49 ++++
 .../AttachmentSelectorModal.component.tsx     | 210 ++++++++++++++++++
 .../services/attachment.service.ts            |   2 +-
 .../ProfileAttachmentListItem.component.tsx   |  33 +--
 .../components/Forms/VideoForm.component.tsx  | 144 +++++++++++-
 .../AttachmentsPanel.component.tsx            |  54 ++---
 .../src/modules/videos/models/video.model.ts  |   2 +-
 .../modules/videos/services/video.service.ts  |   2 -
 12 files changed, 448 insertions(+), 82 deletions(-)
 create mode 100644 apps/polyflix/src/modules/attachments/components/AttachmentAvatar.component.tsx
 create mode 100644 apps/polyflix/src/modules/attachments/components/AttachmentSelectorModal.component.tsx

diff --git a/apps/polyflix/public/locales/en/attachments.json b/apps/polyflix/public/locales/en/attachments.json
index c0f66d05..b5345a5f 100644
--- a/apps/polyflix/public/locales/en/attachments.json
+++ b/apps/polyflix/public/locales/en/attachments.json
@@ -30,6 +30,10 @@
         }
       },
       "errors": {}
+    },
+    "selector": {
+      "title": "Select attachments",
+      "validate": "Close"
     }
   },
   "closeModal": "Close",
diff --git a/apps/polyflix/public/locales/en/videos.json b/apps/polyflix/public/locales/en/videos.json
index 86ba19dd..d06aa109 100644
--- a/apps/polyflix/public/locales/en/videos.json
+++ b/apps/polyflix/public/locales/en/videos.json
@@ -51,16 +51,18 @@
         "youtubeUrl": "YouTube video URL",
         "description": "Description",
         "upload": "Drag 'n' drop your video here.",
-        "attachments": {
-          "label": "Label",
-          "url": "Attachment URL",
-          "empty": "Your video doesn't have attachments."
-        },
         "submit": {
           "create": "Create video",
           "update": "Update video"
         }
       },
+      "attachments": {
+        "label": "Attachments",
+        "description": "You can add or remove attachments to your video.",
+        "add": "Add attachments",
+        "remove": "Remove attachment",
+        "empty": "Your video does not include any attachments yet."
+      },
       "errors": {
         "upload": "An error occured when uploading your file. Please see the logs for more informations."
       },
diff --git a/apps/polyflix/public/locales/fr/attachments.json b/apps/polyflix/public/locales/fr/attachments.json
index 00fc7667..9de64865 100644
--- a/apps/polyflix/public/locales/fr/attachments.json
+++ b/apps/polyflix/public/locales/fr/attachments.json
@@ -30,6 +30,10 @@
         }
       },
       "errors": {}
+    },
+    "selector": {
+      "title": "Veuillez sélectionner les pièces jointes",
+      "validate": "Fermer"
     }
   },
   "closeModal": "Fermer",
@@ -44,4 +48,4 @@
   "actions": {
     "copyToClipboard": "Copier le lien dans le presse-papier"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/polyflix/public/locales/fr/videos.json b/apps/polyflix/public/locales/fr/videos.json
index 11250f41..9df06e3f 100644
--- a/apps/polyflix/public/locales/fr/videos.json
+++ b/apps/polyflix/public/locales/fr/videos.json
@@ -56,16 +56,18 @@
         "youtubeUrl": "Lien de la vidéo sur YouTube",
         "description": "Description",
         "upload": "Glissez déposer votre vidéo ici",
-        "attachments": {
-          "label": "Nom",
-          "url": "Lien de la pièce jointe",
-          "empty": "Votre vidéo n'a aucune pièces jointes."
-        },
         "submit": {
           "create": "Créer la vidéo",
           "update": "Mettre à jour la vidéo"
         }
       },
+      "attachments": {
+        "label": "Pièces jointes",
+        "description": "Vous pouvez ajouter ou supprimer des pièces jointes à votre vidéo.",
+        "add": "Ajouter des pièces jointes",
+        "remove": "Supprimer la pièce jointe",
+        "empty": "Votre vidéo n'a aucune pièces jointes."
+      },
       "errors": {
         "upload": "Une erreur est survenue lors de l'envoi de vos fichiers."
       },
diff --git a/apps/polyflix/src/modules/attachments/components/AttachmentAvatar.component.tsx b/apps/polyflix/src/modules/attachments/components/AttachmentAvatar.component.tsx
new file mode 100644
index 00000000..b90080dd
--- /dev/null
+++ b/apps/polyflix/src/modules/attachments/components/AttachmentAvatar.component.tsx
@@ -0,0 +1,49 @@
+import { Avatar, IconButton, ListItemIcon, Tooltip } from '@mui/material'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
+
+import { useInjection } from '@polyflix/di'
+
+import { Icon } from '@core/components/Icon/Icon.component'
+import { SnackbarService } from '@core/services/snackbar.service'
+
+type Props = {
+  url: string
+  copyToClipboard?: boolean
+}
+
+export const AttachmentAvatar = ({ url, copyToClipboard = true }: Props) => {
+  const { t: tUsers } = useTranslation('users')
+  const { t: tAttachments } = useTranslation('attachments')
+  const snackbarService = useInjection<SnackbarService>(SnackbarService)
+
+  const avatarContent = () => (
+    <Avatar src={'' /* TODO : Issue #466 */}>
+      <Icon name="eva:link-outline" size={30} />
+    </Avatar>
+  )
+
+  if (copyToClipboard) {
+    return (
+      <ListItemIcon>
+        <CopyToClipboard
+          onCopy={() => {
+            snackbarService.createSnackbar(
+              tUsers('profile.tabs.attachments.content.list.clipboard'),
+              {
+                variant: 'success',
+              }
+            )
+          }}
+          text={url}
+        >
+          <Tooltip title={tAttachments<string>('actions.copyToClipboard')}>
+            <IconButton>{avatarContent()}</IconButton>
+          </Tooltip>
+        </CopyToClipboard>
+      </ListItemIcon>
+    )
+  } else {
+    return <ListItemIcon>{avatarContent()}</ListItemIcon>
+  }
+}
diff --git a/apps/polyflix/src/modules/attachments/components/AttachmentSelectorModal.component.tsx b/apps/polyflix/src/modules/attachments/components/AttachmentSelectorModal.component.tsx
new file mode 100644
index 00000000..89586fd6
--- /dev/null
+++ b/apps/polyflix/src/modules/attachments/components/AttachmentSelectorModal.component.tsx
@@ -0,0 +1,210 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Container,
+  Fade,
+  Link,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Modal,
+  Paper,
+  Stack,
+  SxProps,
+  Theme,
+  Typography,
+} from '@mui/material'
+import { useEffect, useState } from 'react'
+import { UseFieldArrayReturn } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { Redirect } from 'react-router-dom'
+
+import { NoData } from '@core/components/NoData/NoData.component'
+import { PaginationSynced } from '@core/components/Pagination/PaginationSynced.component'
+import { Scrollbar } from '@core/components/Scrollbar/Scrollbar.component'
+import { buildSkeletons } from '@core/utils/gui.utils'
+
+import { useAuth } from '@auth/hooks/useAuth.hook'
+
+import { IVideoForm } from '@videos/types/form.type'
+
+import { Attachment } from '@attachments/models/attachment.model'
+import { AttachmentParams } from '@attachments/models/attachment.params'
+import { useGetUserAttachmentsQuery } from '@attachments/services/attachment.service'
+
+import { AttachmentAvatar } from './AttachmentAvatar.component'
+
+interface Props {
+  attachments: UseFieldArrayReturn<IVideoForm, 'attachments'>
+  videoId?: string
+  isOpen: boolean
+  onClose: () => void
+  sx?: SxProps<Theme>
+}
+export const AttachmentSelectorModal = ({
+  attachments,
+  videoId,
+  isOpen,
+  onClose,
+  sx: sxProps,
+}: Props) => {
+  const { user } = useAuth()
+  const { t } = useTranslation('attachments')
+
+  const [page] = useState(1)
+
+  const [filters, setFilters] = useState<AttachmentParams>({
+    page,
+    pageSize: 10,
+    userId: user!.id,
+  })
+
+  const { data, isLoading, refetch } = useGetUserAttachmentsQuery(filters)
+
+  const { fields, append, remove } = attachments
+
+  const handleToggle = (attachment: Attachment) => () => {
+    const currentIndex = fields.findIndex((e) => e.id === attachment.id)
+    if (currentIndex === -1) {
+      append(attachment)
+    } else {
+      remove(currentIndex)
+    }
+  }
+
+  useEffect(() => {
+    /* Since the attachments are not invalidated after a video update, we need to refetch them here */
+    if (data) refetch()
+  }, [])
+
+  useEffect(() => {
+    /* On update mode, append the previously selected attachments in order to set the checkboxes ticked */
+    if (videoId && data) {
+      for (const f of fields) {
+        if (
+          f.videos.includes(videoId) &&
+          !fields.find(({ id }) => id === f.id)
+        ) {
+          append(f)
+        }
+      }
+    }
+  }, [videoId, data])
+
+  const isAttachmentSelected = (attachment: Attachment) =>
+    fields.some((e) => e.id === attachment.id)
+
+  /* If the user has no attachment, he is redirected to the attachment creation form */
+  if (data && data.totalCount === 0)
+    return <Redirect push to="/users/profile/attachments/create" />
+
+  return (
+    <Modal
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 2,
+        ...sxProps,
+      }}
+      open={isOpen}
+      onClose={() => onClose()}
+      aria-labelledby="element modal"
+      closeAfterTransition
+      BackdropProps={{
+        timeout: 500,
+      }}
+    >
+      <Fade in={isOpen}>
+        <Paper
+          sx={{
+            width: {
+              lg: '40%',
+              md: '50%',
+              sm: '70%',
+              xs: '90%',
+            },
+            bgcolor: 'background.default',
+            borderRadius: 2,
+            p: {
+              sm: 2,
+              xs: 1,
+            },
+          }}
+          variant="outlined"
+        >
+          <Typography variant="h4" sx={{ mb: '2%' }}>
+            {t('forms.selector.title')}
+          </Typography>
+          <Scrollbar
+            sx={{
+              maxHeight: (theme) => `calc(100vh - ${theme.spacing(30)})`,
+              minHeight: '300px',
+            }}
+          >
+            <Box sx={{ mt: 2 }}>
+              {{ data }
+                ? data?.items.map((item) => (
+                    <ListItem
+                      key={item.id}
+                      secondaryAction={
+                        <Checkbox
+                          edge="end"
+                          onChange={handleToggle(item)}
+                          checked={isAttachmentSelected(item)}
+                        />
+                      }
+                      disablePadding
+                    >
+                      <ListItemButton onClick={handleToggle(item)}>
+                        <AttachmentAvatar url={item.url} />
+                        <Link
+                          href={item.url}
+                          target="_blank"
+                          rel="noopener"
+                          color="inherit"
+                          underline="hover"
+                        >
+                          <ListItemText primary={item.title} />
+                        </Link>
+                      </ListItemButton>
+                    </ListItem>
+                  ))
+                : buildSkeletons(3)}
+            </Box>
+          </Scrollbar>
+          <Stack spacing={0}>
+            {!isLoading &&
+              (data &&
+              data.items.length > 0 &&
+              data.items.length < data.totalCount ? (
+                <Box display="flex" sx={{ mt: 3 }} justifyContent="center">
+                  <PaginationSynced
+                    filters={filters}
+                    setFilters={setFilters}
+                    pageCount={Math.ceil(data?.totalCount / filters.pageSize)}
+                  />
+                </Box>
+              ) : (
+                !data ||
+                (data.items.length === 0 && (
+                  <NoData
+                    variant="attachments"
+                    link="/users/profile/attachments/create"
+                  />
+                ))
+              ))}
+          </Stack>
+          <Container
+            sx={{ display: 'flex', justifyContent: 'center', my: '1em' }}
+          >
+            <Button onClick={onClose} variant="contained">
+              {t('forms.selector.validate')}
+            </Button>
+          </Container>
+        </Paper>
+      </Fade>
+    </Modal>
+  )
+}
diff --git a/apps/polyflix/src/modules/attachments/services/attachment.service.ts b/apps/polyflix/src/modules/attachments/services/attachment.service.ts
index 6158d9f3..7c6ffe07 100644
--- a/apps/polyflix/src/modules/attachments/services/attachment.service.ts
+++ b/apps/polyflix/src/modules/attachments/services/attachment.service.ts
@@ -40,7 +40,7 @@ export const attachmentsApi = createApi({
     }),
     getVideoAttachments: builder.query<PaginatedAttachments, string>({
       query: (videoId: string) => {
-        return `${Endpoint.Attachments}/video/${videoId}`
+        return `${Endpoint.Attachments}/video/${videoId}?pageSize=50&page=1` // TODO : remove pagination from attachment service (only for /video/id)
       },
       providesTags: (result) =>
         result
diff --git a/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachmentListItem.component.tsx b/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachmentListItem.component.tsx
index 894f0773..adc4ce59 100644
--- a/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachmentListItem.component.tsx
+++ b/apps/polyflix/src/modules/users/pages/ProfileAttachments/ProfileAttachmentListItem.component.tsx
@@ -7,16 +7,11 @@ import {
   ListItemText,
   Paper,
   Skeleton,
-  Tooltip,
 } from '@mui/material'
-import CopyToClipboard from 'react-copy-to-clipboard'
-import { useTranslation } from 'react-i18next'
-
-import { useInjection } from '@polyflix/di'
 
 import { Icon } from '@core/components/Icon/Icon.component'
-import { SnackbarService } from '@core/services/snackbar.service'
 
+import { AttachmentAvatar } from '@attachments/components/AttachmentAvatar.component'
 import { Attachment } from '@attachments/models/attachment.model'
 
 import { AttachmentListMenu } from '@users/components/AttachmentListMenu/AttachmentListMenu.component'
@@ -26,10 +21,6 @@ type Props = {
   onDelete: () => void
 }
 export const ProfileAttachmentListItem = ({ attachment, onDelete }: Props) => {
-  const { t: tUsers } = useTranslation('users')
-  const { t: tAttachments } = useTranslation('attachments')
-  const snackbarService = useInjection<SnackbarService>(SnackbarService)
-
   return (
     <ListItem
       secondaryAction={
@@ -42,27 +33,7 @@ export const ProfileAttachmentListItem = ({ attachment, onDelete }: Props) => {
       variant="outlined"
       sx={{ mb: 1 }}
     >
-      <ListItemIcon>
-        <CopyToClipboard
-          onCopy={() => {
-            snackbarService.createSnackbar(
-              tUsers('profile.tabs.attachments.content.list.clipboard'),
-              {
-                variant: 'success',
-              }
-            )
-          }}
-          text={attachment.url}
-        >
-          <Tooltip title={tAttachments<string>('actions.copyToClipboard')}>
-            <IconButton>
-              <Avatar src={'' /* TODO : Issue #466 */}>
-                <Icon name="eva:link-outline" size={30} />
-              </Avatar>
-            </IconButton>
-          </Tooltip>
-        </CopyToClipboard>
-      </ListItemIcon>
+      <AttachmentAvatar url={attachment.url} />
       <Link
         href={attachment.url}
         target="_blank"
diff --git a/apps/polyflix/src/modules/videos/components/Forms/VideoForm.component.tsx b/apps/polyflix/src/modules/videos/components/Forms/VideoForm.component.tsx
index 476fe69a..7795bbf1 100644
--- a/apps/polyflix/src/modules/videos/components/Forms/VideoForm.component.tsx
+++ b/apps/polyflix/src/modules/videos/components/Forms/VideoForm.component.tsx
@@ -1,13 +1,28 @@
+import { Delete } from '@mui/icons-material'
 import { LoadingButton } from '@mui/lab'
-import { Divider, Grid, Stack, TextField, Typography } from '@mui/material'
+import {
+  Alert,
+  Divider,
+  Grid,
+  IconButton,
+  Link,
+  List,
+  ListItem,
+  ListItemText,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
-import { useForm } from 'react-hook-form'
+import { useFieldArray, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useHistory } from 'react-router-dom'
 
 import { useInjection } from '@polyflix/di'
 
 import { Dropzone } from '@core/components/Dropzone/Dropzone.component'
+import { Icon } from '@core/components/Icon/Icon.component'
 import { MHidden } from '@core/components/MHidden/MHidden.component'
 import { StatusSelector } from '@core/components/StatusSelector/StatusSelector.component'
 import { UploadProgress } from '@core/components/UploadProgress/UploadProgress.component'
@@ -34,6 +49,10 @@ import { YoutubeService } from '@videos/services/youtube.service'
 import { IVideoForm } from '@videos/types/form.type'
 import { PlayerVideoSource } from '@videos/types/video.type'
 
+import { AttachmentAvatar } from '@attachments/components/AttachmentAvatar.component'
+import { AttachmentSelectorModal } from '@attachments/components/AttachmentSelectorModal.component'
+import { useGetVideoAttachmentsQuery } from '@attachments/services/attachment.service'
+
 import { FrameSelector } from '../FrameSelector/FrameSelector.component'
 import { VideoPreview } from '../VideoPreview/VideoPreview.component'
 
@@ -50,6 +69,7 @@ export const VideoForm = ({ source, video, isUpdate }: Props) => {
   const snackbarService = useInjection<SnackbarService>(SnackbarService)
   const minioService = useInjection<MinioService>(MinioService)
   const [isInProgress, setIsInProgress] = useState<boolean>(false)
+  const [isModalAttachmentOpen, setIsModalAttachmentOpen] = useState(false)
 
   const { t } = useTranslation('videos')
 
@@ -75,6 +95,7 @@ export const VideoForm = ({ source, video, isUpdate }: Props) => {
   }
 
   const {
+    control,
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
@@ -91,10 +112,34 @@ export const VideoForm = ({ source, video, isUpdate }: Props) => {
       visibility: video?.visibility || Visibility.PUBLIC,
       thumbnail: video?.thumbnail,
       source: video?.source.replace('-nocookie', ''),
-      attachments: video?.attachments,
+      attachments: [],
     },
   })
 
+  const attachments = useFieldArray({
+    control,
+    name: 'attachments',
+    /* Since useFieldArray overrides the `id` field, we need to set a different key here */
+    keyName: 'uniqueId',
+  })
+
+  const { data: existingAttachments, refetch: refetchAttachments } =
+    useGetVideoAttachmentsQuery(video?.id || '', {
+      skip: !video,
+    })
+
+  useEffect(() => {
+    /* Since the attachments are not invalidated after a video update, we need to refetch them here */
+    if (existingAttachments) refetchAttachments()
+  }, [])
+
+  useEffect(() => {
+    /* On update mode, if the video has already attachments, we set the field with these values  */
+    if (existingAttachments?.items) {
+      attachments.replace(existingAttachments.items)
+    }
+  }, [existingAttachments])
+
   // Useful states for our compoennt
   // This boolean allow us to control when a video was autocompleted (YouTube for example)
   const [isAutocompleted, setIsAutocompleted] = useState<boolean>(false)
@@ -170,11 +215,20 @@ export const VideoForm = ({ source, video, isUpdate }: Props) => {
       }
     }
 
+    /** Need to send only attachments ids */
+    const mappedData = {
+      ...data,
+      attachments: attachments.fields.map((a) => a.id),
+    }
+
     try {
       // handle response and get video and thumbnail psu url to upload them
       const { videoPutPsu, thumbnailPutPsu } = await (isUpdate
-        ? updateVideo({ slug: video!.slug, body: data })
-        : createVideo(data)
+        ? updateVideo({
+            slug: video!.slug,
+            body: mappedData as unknown as IVideoForm,
+          })
+        : createVideo(mappedData as unknown as IVideoForm)
       ).unwrap()
 
       if (!isYoutube) {
@@ -337,6 +391,86 @@ export const VideoForm = ({ source, video, isUpdate }: Props) => {
           </Grid>
         </Grid>
         <Divider />
+
+        <Stack spacing={1}>
+          <Typography
+            variant="h5"
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
+          >
+            {t('forms.create-update.attachments.label')}
+            <Tooltip title={t<string>('forms.create-update.attachments.add')}>
+              <IconButton
+                type="button"
+                onClick={() => setIsModalAttachmentOpen(true)}
+                color="primary"
+              >
+                <Icon name="carbon:add" size={30} />
+              </IconButton>
+            </Tooltip>
+          </Typography>
+          <Typography variant="body1" sx={{ color: 'text.secondary' }}>
+            {t('forms.create-update.attachments.description')}
+          </Typography>
+          {attachments.fields.length > 0 ? (
+            <List>
+              {attachments.fields.map((attachment, i) => {
+                return (
+                  <ListItem
+                    key={i}
+                    sx={{ bgcolor: 'background.paper', borderRadius: 1, mb: 1 }}
+                    secondaryAction={
+                      <Tooltip
+                        title={t<string>(
+                          'forms.create-update.attachments.remove'
+                        )}
+                      >
+                        <IconButton
+                          edge="end"
+                          color="error"
+                          aria-label="delete"
+                          onClick={() => attachments.remove(i)}
+                        >
+                          <Delete />
+                        </IconButton>
+                      </Tooltip>
+                    }
+                  >
+                    <AttachmentAvatar
+                      url={attachment.url}
+                      copyToClipboard={false}
+                    />
+                    <Link
+                      href={attachment.url}
+                      target="_blank"
+                      rel="noopener"
+                      color="inherit"
+                      underline="hover"
+                    >
+                      <ListItemText primary={attachment.title} />
+                    </Link>
+                  </ListItem>
+                )
+              })}
+            </List>
+          ) : (
+            <Alert severity="warning">
+              {t('forms.create-update.attachments.empty')}
+            </Alert>
+          )}
+          {isModalAttachmentOpen && (
+            <AttachmentSelectorModal
+              attachments={attachments}
+              videoId={video?.id}
+              isOpen={isModalAttachmentOpen}
+              onClose={() => setIsModalAttachmentOpen(false)}
+            />
+          )}
+        </Stack>
+
         <Divider />
         <Typography sx={{ mb: 3 }} variant="h4">
           {t('forms.create-update.title.status')}
diff --git a/apps/polyflix/src/modules/videos/components/PlayerSidebar/AttachmentsPanel/AttachmentsPanel.component.tsx b/apps/polyflix/src/modules/videos/components/PlayerSidebar/AttachmentsPanel/AttachmentsPanel.component.tsx
index 13e1f24f..cbc1ef0f 100644
--- a/apps/polyflix/src/modules/videos/components/PlayerSidebar/AttachmentsPanel/AttachmentsPanel.component.tsx
+++ b/apps/polyflix/src/modules/videos/components/PlayerSidebar/AttachmentsPanel/AttachmentsPanel.component.tsx
@@ -1,20 +1,12 @@
-import {
-  Alert,
-  Avatar,
-  Link,
-  List,
-  ListItem,
-  Stack,
-  Typography,
-} from '@mui/material'
+import { Alert, Link, List, ListItem, ListItemText } from '@mui/material'
+import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { AutoScrollBox } from '@core/components/AutoScrollBox/AutoScrollBox.component'
-import { Icon } from '@core/components/Icon/Icon.component'
 
 import { Video } from '@videos/models/video.model'
 
-import { getDomain } from '@attachments/helpers/favicon.helper'
+import { AttachmentAvatar } from '@attachments/components/AttachmentAvatar.component'
 import { useGetVideoAttachmentsQuery } from '@attachments/services/attachment.service'
 
 interface AttachmentPanelProps {
@@ -24,7 +16,12 @@ interface AttachmentPanelProps {
 export const AttachmentsPanel = ({ video }: AttachmentPanelProps) => {
   const { t } = useTranslation('videos')
 
-  const { data: attachments } = useGetVideoAttachmentsQuery(video.id)
+  const { data: attachments, refetch } = useGetVideoAttachmentsQuery(video.id)
+
+  useEffect(() => {
+    /* Since the attachments are not invalidated after a video update, we need to refetch them here */
+    if (attachments) refetch()
+  }, [])
 
   const content = () => {
     return attachments && attachments.items.length === 0 ? (
@@ -35,25 +32,20 @@ export const AttachmentsPanel = ({ video }: AttachmentPanelProps) => {
       </ListItem>
     ) : (
       attachments?.items.map((attachment) => (
-        <ListItem key={attachment.id}>
-          <Alert severity="info" icon={false} sx={{ width: '100%' }}>
-            <Link
-              href={attachment.url}
-              target="_blank"
-              rel="noopener"
-              color="inherit"
-              underline="hover"
-            >
-              <Stack direction="row" sx={{ alignItems: 'center' }}>
-                <Avatar src={`${getDomain(attachment.url)}/favicon.ico`}>
-                  <Icon name="akar-icons:link-chain" size={30} />
-                </Avatar>
-                <Typography variant="body2" sx={{ ml: 2 }}>
-                  {attachment.title}
-                </Typography>
-              </Stack>
-            </Link>
-          </Alert>
+        <ListItem
+          key={attachment.id}
+          sx={{ bgcolor: 'background.default', borderRadius: 1, mb: 1 }}
+        >
+          <AttachmentAvatar url={attachment.url} />
+          <Link
+            href={attachment.url}
+            target="_blank"
+            rel="noopener"
+            color="inherit"
+            underline="hover"
+          >
+            <ListItemText primary={attachment.title} />
+          </Link>
         </ListItem>
       ))
     )
diff --git a/apps/polyflix/src/modules/videos/models/video.model.ts b/apps/polyflix/src/modules/videos/models/video.model.ts
index b27be168..a1b678cd 100644
--- a/apps/polyflix/src/modules/videos/models/video.model.ts
+++ b/apps/polyflix/src/modules/videos/models/video.model.ts
@@ -35,7 +35,7 @@ export interface Video {
     tokenAccess: string
   }
   userMeta?: WatchMetadata | undefined
-  attachments: Attachment[]
+  attachments?: Attachment[]
   watchtime?: Watchtime | undefined
   isLiked?: boolean
   availableLanguages: SubtitleLanguages[]
diff --git a/apps/polyflix/src/modules/videos/services/video.service.ts b/apps/polyflix/src/modules/videos/services/video.service.ts
index 28009875..90953cf2 100644
--- a/apps/polyflix/src/modules/videos/services/video.service.ts
+++ b/apps/polyflix/src/modules/videos/services/video.service.ts
@@ -90,7 +90,6 @@ export const videosApi = createApi({
         url: Endpoint.Videos,
         method: 'POST',
         body,
-        // body: { ...body, attachments: body.attachments.map((a) => a.id) }, // TODO #416
       }),
       // Invalidates all video-type queries providing the LIST id - after all, depending of the sort order
       // that newly created video could show up in any lists.
@@ -105,7 +104,6 @@ export const videosApi = createApi({
         url: `${Endpoint.Videos}/${slug}`,
         method: 'PUT',
         body,
-        // body: { ...body, attachments: body.attachments.map((a) => a.id) }, // TODO #416
       }),
       // Invalidates all queries that subscribe to this Video `slug` only.
       // In this case, `getVideo` will be re-run. `getVideos` *might*  rerun, if this id was under its results.