Unavailable videos comparisons list

frontend/src/components/LoaderWrapper.tsx

@@ -38,6 +38,7 @@ const LoaderWrapper = ({ isLoading, sx = {}, children }: LoaderProps) => {
             pointerEvents: 'none',
           },
         ]}
+        width="100%"
       >
         {children}
       </Box>

frontend/src/components/entity/EntityCard.tsx

@@ -25,6 +25,7 @@ import EntityCardScores from './EntityCardScores';
 import EntityImagery from './EntityImagery';
 import EntityMetadata, { VideoMetadata } from './EntityMetadata';
 import { entityCardMainSx } from './style';
+import UnavailableOverlay from './UnavailableOverlay';
 
 const EntityCard = ({
   entity,
@@ -53,8 +54,8 @@ const EntityCard = ({
   const [settingsVisible, setSettingsVisible] = useState(!isSmallScreen);
 
   useEffect(() => {
-    setContentDisplayed(isAvailable);
-  }, [isAvailable]);
+    setContentDisplayed(isAvailable || compact);
+  }, [isAvailable, compact]);
 
   const displayEntityCardScores = () => {
     if ('tournesol_score' in entity && !compact) {
@@ -75,7 +76,7 @@ const EntityCard = ({
 
   return (
     <Grid container sx={entityCardMainSx}>
-      {!isAvailable && (
+      {!isAvailable && !compact && (
         <Grid container justifyContent="space-between" alignItems="center">
           <Grid item pl={1} py={2}>
             <Typography>
@@ -104,6 +105,7 @@ const EntityCard = ({
             sx={{
               display: 'flex',
               justifyContent: 'center',
+              position: 'relative',
               ...(compact
                 ? {}
                 : { minWidth: '240px', maxWidth: { sm: '240px' } }),
@@ -114,6 +116,15 @@ const EntityCard = ({
               compact={compact}
               config={entityTypeConfig}
             />
+            {!isAvailable && compact && (
+              <UnavailableOverlay
+                msg={
+                  entity.type == TypeEnum.VIDEO
+                    ? t('video.notAvailableAnymore')
+                    : t('entityCard.thisElementIsNotAvailable')
+                }
+              />
+            )}
           </Grid>
           <Grid
             item

frontend/src/components/entity/EntityImagery.tsx

@@ -115,6 +115,7 @@ const EntityImagery = ({
           className="full-width entity-thumbnail"
           src={`https://i.ytimg.com/vi/${idFromUid(entity.uid)}/mqdefault.jpg`}
           alt={entity.metadata.name}
+          style={{ aspectRatio: '16/9' }}
         />
       </DurationWrapper>
     );

frontend/src/components/entity/UnavailableOverlay.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Box, Typography, useTheme } from '@mui/material';
+
+const UnavailableOverlay = ({ msg }: { msg: string }) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      position="absolute"
+      top="0"
+      color="white"
+      bgcolor="rgba(0,0,0,.6)"
+      width="100%"
+      sx={{
+        aspectRatio: '16/9',
+        [theme.breakpoints.down('sm')]: {
+          fontSize: '0.6rem',
+        },
+      }}
+    >
+      <Typography textAlign="center" fontSize="inherit">
+        {msg}
+      </Typography>
+    </Box>
+  );
+};
+
+export default UnavailableOverlay;

frontend/src/features/comparisons/ComparisonList.tsx

@@ -5,6 +5,7 @@ import { Grid, Container, Tooltip, Fab, Box, useTheme } from '@mui/material';
 import { Compare as CompareIcon } from '@mui/icons-material';
 
 import type { Comparison } from 'src/services/openapi';
+import AvailableEntity from 'src/components/entity/AvailableEntity';
 import EntityCard from 'src/components/entity/EntityCard';
 import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
 
@@ -24,11 +25,13 @@ const ComparisonThumbnail = ({ comparison }: { comparison: Comparison }) => {
         gap: '16px',
       }}
     >
-      <EntityCard
-        compact
-        entity={entity_a}
-        entityTypeConfig={{ video: { displayPlayer: false } }}
-      />
+      <AvailableEntity uid={entity_a.uid}>
+        <EntityCard
+          compact
+          entity={entity_a}
+          entityTypeConfig={{ video: { displayPlayer: false } }}
+        />
+      </AvailableEntity>
       <Box
         sx={{
           position: 'relative',
@@ -56,11 +59,13 @@ const ComparisonThumbnail = ({ comparison }: { comparison: Comparison }) => {
           </Fab>
         </Tooltip>
       </Box>
-      <EntityCard
-        compact
-        entity={entity_b}
-        entityTypeConfig={{ video: { displayPlayer: false } }}
-      />
+      <AvailableEntity uid={entity_b.uid}>
+        <EntityCard
+          compact
+          entity={entity_b}
+          entityTypeConfig={{ video: { displayPlayer: false } }}
+        />
+      </AvailableEntity>
     </Box>
   );
 };

frontend/src/features/entity_selector/EntitySelector.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Theme, useTheme } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import { Box, Typography } from '@mui/material';
 
@@ -23,6 +23,7 @@ import { UID_YT_NAMESPACE, YOUTUBE_POLL_NAME } from 'src/utils/constants';
 
 import AutoEntityButton from './AutoEntityButton';
 import EntityInput from './EntityInput';
+import UnavailableOverlay from 'src/components/entity/UnavailableOverlay';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -132,7 +133,6 @@ const EntitySelectorInnerAuth = ({
   variant,
   autoFill,
 }: Props) => {
-  const theme = useTheme();
   const { t } = useTranslation();
   const { name: pollName, options } = useCurrentPoll();
 
@@ -323,28 +323,13 @@ const EntitySelectorInnerAuth = ({
           <EmptyEntityCard compact loading={loading} />
         )}
         {entityAvailability === ENTITY_AVAILABILITY.UNAVAILABLE && !loading && (
-          <Box
-            display="flex"
-            justifyContent="center"
-            alignItems="center"
-            position="absolute"
-            top="0"
-            color="white"
-            bgcolor="rgba(0,0,0,.6)"
-            width="100%"
-            sx={{
-              aspectRatio: '16/9',
-              [theme.breakpoints.down('sm')]: {
-                fontSize: '0.8rem',
-              },
-            }}
-          >
-            <Typography textAlign="center" fontSize="inherit">
-              {pollName === YOUTUBE_POLL_NAME
+          <UnavailableOverlay
+            msg={
+              pollName === YOUTUBE_POLL_NAME
                 ? t('entitySelector.youtubeVideoUnavailable')
-                : t('entityCard.thisElementIsNotAvailable')}
-            </Typography>
-          </Box>
+                : t('entityCard.thisElementIsNotAvailable')
+            }
+          />
         )}
       </Box>
     </>