[front] UI adjustements in EntityCard, VideoPlayer and various icons

frontend/public/locales/en/translation.json

@@ -41,8 +41,7 @@
     "nComparisonsByYou_other": "{{count}} comparisons by you",
     "notYetComparedByYou": "Not yet compared by you",
     "contributionsArePublicMessage": "Your contributions about this item are currently public. Comparisons appear in the public data associated to your profile only if you tag both items as public.",
-    "contributionsArePrivateMessage": "Your contributions about this item are currently private. The details of your personal ratings are not published, but they may still be used to compute public aggregated scores.",
-    "personalScore": "Personal score: {{score}}"
+    "contributionsArePrivateMessage": "Your contributions about this item are currently private. The details of your personal ratings are not published, but they may still be used to compute public aggregated scores."
   },
   "entityCard": {
     "thisElementIsNotAvailable": "This element is not available anymore."
@@ -1074,9 +1073,7 @@
     "title": "My rate-later list"
   },
   "recommendationsPage": {
-    "chips": {
-      "by": "by"
-    },
+    "basedOnUserPublicContributions": "Based on public contributions by <2></2>",
     "title": {
       "results": "Results",
       "personalRecommendations": "Personal recommendations",

frontend/public/locales/fr/translation.json

@@ -44,8 +44,7 @@
     "nComparisonsByYou_other": "{{count}} comparaisons par vous",
     "notYetComparedByYou": "Vous ne l'avez pas encore comparée",
     "contributionsArePublicMessage": "Vos contributions impliquant cet élement sont actuellement publiques. Une comparaison n'est publiquement associée à votre profil que lorsque vous marquez explicitement ses deux élements comme publics.",
-    "contributionsArePrivateMessage": "Vos contributions impliquant cet élément sont actuellement privées. Les détails de vos jugements ne sont pas publiés, mais ils sont tout de même pris en compte pour calculer des scores agrégés publics.",
-    "personalScore": "Score personnel\u00a0: {{score}}"
+    "contributionsArePrivateMessage": "Vos contributions impliquant cet élément sont actuellement privées. Les détails de vos jugements ne sont pas publiés, mais ils sont tout de même pris en compte pour calculer des scores agrégés publics."
   },
   "entityCard": {
     "thisElementIsNotAvailable": "Cet élément n'est plus disponible."
@@ -1084,9 +1083,7 @@
     "title": "À comparer plus tard"
   },
   "recommendationsPage": {
-    "chips": {
-      "by": "d'après"
-    },
+    "basedOnUserPublicContributions": "Selon les contributions publiques de <2></2>",
     "title": {
       "results": "Résultats",
       "personalRecommendations": "Recommandations personnelles",

frontend/src/components/ContentHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Chip, Grid, Typography } from '@mui/material';
+import { Box, Grid, Typography } from '@mui/material';
 
 /**
  * Display a header.
@@ -12,13 +12,9 @@ import { Box, Chip, Grid, Typography } from '@mui/material';
 const ContentHeader = ({
   title,
   subtitle,
-  chipIcon,
-  chipLabel,
 }: {
   title: string;
   subtitle?: React.ReactNode;
-  chipIcon?: React.ReactElement;
-  chipLabel?: string;
 }) => {
   return (
     <Box
@@ -50,20 +46,6 @@ const ContentHeader = ({
             {title}
           </Typography>
         </Grid>
-        {/* The <ContentHeader> component could use a list of <Chip> instead
-            of only one. */}
-        {chipLabel && (
-          <>
-            <Grid item>
-              <Chip
-                icon={chipIcon}
-                color="secondary"
-                label={chipLabel}
-                variant="outlined"
-              />
-            </Grid>
-          </>
-        )}
       </Grid>
       {subtitle && (
         <Typography

frontend/src/features/videos/VideoCard.spec.tsx → frontend/src/components/entity/EntityCard.spec.tsx

@@ -4,14 +4,14 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@mui/material/styles';
 
 import { theme } from 'src/theme';
-import VideoCard from './VideoCard';
+import EntityCard from 'src/components/entity/EntityCard';
 import { Recommendation, TypeEnum } from 'src/services/openapi';
 
 const renderVideoCard = (video: Recommendation) =>
   render(
     <Router>
       <ThemeProvider theme={theme}>
-        <VideoCard video={video} />
+        <EntityCard result={video} displayImage={false} />
       </ThemeProvider>
     </Router>
   );

frontend/src/components/entity/EntityCard.tsx

@@ -54,6 +54,7 @@ export interface EntityCardProps {
   // Configuration specific to the entity type.
   entityTypeConfig?: { [k in TypeEnum]?: { [k: string]: JSONValue } };
   displayContextAlert?: boolean;
+  displayImage?: boolean;
 }
 
 const EntityCard = ({
@@ -65,6 +66,7 @@ const EntityCard = ({
   showRatingControl = false,
   onRatingChange,
   displayContextAlert = false,
+  displayImage = true,
 }: EntityCardProps) => {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -150,25 +152,27 @@ const EntityCard = ({
       )}
       {contentDisplayed && (
         <>
-          <Grid2
-            sx={[
-              {
-                display: 'flex',
-                justifyContent: 'center',
-              },
-              compact ? {} : { maxWidth: { sm: '240px' } },
-            ]}
-            size={{
-              xs: 12,
-              sm: compact ? 12 : 'auto',
-            }}
-          >
-            <EntityImagery
-              entity={entity}
-              compact={compact}
-              config={entityTypeConfig}
-            />
-          </Grid2>
+          {displayImage && (
+            <Grid2
+              sx={[
+                {
+                  display: 'flex',
+                  justifyContent: 'center',
+                },
+                compact ? {} : { maxWidth: { sm: '240px' } },
+              ]}
+              size={{
+                xs: 12,
+                sm: compact ? 12 : 'auto',
+              }}
+            >
+              <EntityImagery
+                entity={entity}
+                compact={compact}
+                config={entityTypeConfig}
+              />
+            </Grid2>
+          )}
           <Grid2
             data-testid="video-card-info"
             container
@@ -192,7 +196,7 @@ const EntityCard = ({
             sx={{
               display: 'flex',
               alignItems: 'end',
-              justifyContent: 'space-between',
+              justifyContent: 'start',
               flexDirection: 'column',
               [theme.breakpoints.down('sm')]: {
                 flexDirection: 'row',

frontend/src/components/entity/EntityImagery.tsx

@@ -73,12 +73,24 @@ export const VideoPlayer = ({
     <ReactPlayer
       url={`https://youtube.com/watch?v=${videoId}`}
       playing
-      light
+      light={`https://i.ytimg.com/vi/${videoId}/sddefault.jpg`}
       width="100%"
       height="100%"
       wrapper={DurationWrapper}
       duration={duration}
       controls={controls}
+      config={{
+        playerVars: {
+          /*
+          Setting `playsinline=0` is intended to make the video start in fullscreen on iOS.
+          However, this doesn't always work as expected. When a user clicks the "light"
+          player thumbnail, the player attempts to autoplay the video. In some cases,
+          Safari might block this autoplay (if the player loads too slowly?), as the video
+          playback might not be recognized as a direct result of the user's click.
+          */
+          playsinline: 0,
+        },
+      }}
     />
   );
 };

frontend/src/features/entity_selector/AutoEntityButton.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Tooltip, Button, useMediaQuery } from '@mui/material';
-import { Autorenew, SwipeUp } from '@mui/icons-material';
+import { Autorenew, SwipeVertical } from '@mui/icons-material';
 
 import { useCurrentPoll } from 'src/hooks/useCurrentPoll';
 import { theme } from 'src/theme';
@@ -50,7 +50,7 @@ const AutoEntityButton = ({
           startIcon={compactLabelLoc === 'left' ? compactLabel : undefined}
           endIcon={compactLabelLoc === 'right' ? compactLabel : undefined}
         >
-          <SwipeUp />
+          <SwipeVertical />
         </MobileButton>
       ) : (
         <Tooltip

frontend/src/features/ratings/RatingOrderByInput.tsx

@@ -10,8 +10,10 @@ import {
   Select,
   SelectChangeEvent,
 } from '@mui/material';
-import CallMadeIcon from '@mui/icons-material/CallMade';
-import CallReceivedIcon from '@mui/icons-material/CallReceived';
+import {
+  NorthEast as Ascending,
+  SouthEast as Descending,
+} from '@mui/icons-material';
 
 import { TitledSection } from 'src/components';
 import { useCurrentPoll } from 'src/hooks';
@@ -37,42 +39,42 @@ function RatingOrderByInput(props: FilterProps) {
       {
         label: t('ratingOrderByInput.lastComparisonDate'),
         value: 'last_compared_at',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.lastComparisonDate'),
         value: '-last_compared_at',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
       {
         label: t('ratingOrderByInput.numberOfComparisons'),
         value: 'n_comparisons',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.numberOfComparisons'),
         value: '-n_comparisons',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
       {
         label: t('ratingOrderByInput.collectiveTournesolScore'),
         value: 'collective_score',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.collectiveTournesolScore'),
         value: '-collective_score',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
       {
         label: t('ratingOrderByInput.individualTournesolScore'),
         value: 'individual_score',
-        icon: CallMadeIcon,
+        icon: Ascending,
       },
       {
         label: t('ratingOrderByInput.individualTournesolScore'),
         value: '-individual_score',
-        icon: CallReceivedIcon,
+        icon: Descending,
       },
     ],
     [t]
@@ -121,7 +123,7 @@ function RatingOrderByInput(props: FilterProps) {
                   {getMetadataName(t, pollName, metadata)}
                 </ListItemText>
                 &nbsp;
-                <CallMadeIcon fontSize="small" />
+                <Ascending fontSize="small" />
               </Box>
             </MenuItem>,
             <MenuItem key={`-${metadata}`} value={`-${metadata}`}>
@@ -135,7 +137,7 @@ function RatingOrderByInput(props: FilterProps) {
                   {getMetadataName(t, pollName, metadata)}
                 </ListItemText>
                 &nbsp;
-                <CallReceivedIcon fontSize="small" />
+                <Descending fontSize="small" />
               </Box>
             </MenuItem>,
           ])}