Adjust concert videos for ios usage

digitalwarenkombinat · Nov 30, 2022 · bdaafdf · bdaafdf
1 parent 036f542
commit bdaafdf
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 67 deletions.
diff --git a/src/config/concert.tsx b/src/config/concert.tsx
@@ -12,35 +12,35 @@ export const concert = {
       key: 'morgenrot',
       year: 1907,
       title: 'Dem Morgenrot entgegen (1907) - Hannes Wader',
-      link: 'https://www.youtube.com/watch?v=NhVVLsRoyWE',
+      link: 'https://www.youtube.com/watch?v=z5BFZCFw3yk',
     },
     {
       index: 2,
       key: 'graben',
       year: 1926,
       title: 'Der Graben (1926) - Gisela May',
-      link: 'https://www.youtube.com/watch?v=LHCxm3uUsQU',
+      link: 'https://www.youtube.com/watch?v=U9eQ38d9iZ4',
     },
     {
       index: 3,
       key: 'einheitsfrontlied',
       year: 1934,
       title: 'Solidaritätslied (1934) - Hannes Wader',
-      link: 'https://www.youtube.com/watch?v=7TAB-U71kiY',
+      link: 'https://www.youtube.com/watch?v=ZuN_vQR3Ohw',
     },
     {
       index: 4,
       key: 'moorsoldaten',
       year: 1934,
-      title: 'Moorsoldaten (1934) - Hannes Wader',
-      link: 'https://www.youtube.com/watch?v=-boCKJsDe5U',
+      title: 'Moorsoldaten (1934) - Moka Efti Orchestra',
+      link: 'https://www.youtube.com/watch?v=VO6hTd7MbHk',
     },
     {
       index: 5,
       key: 'blowininthewind',
       year: 1961,
       title: 'Blowin in the Wind (1961) - Bob Dylan',
-      link: 'https://www.youtube.com/watch?v=MMFj8uDubsE',
+      link: 'https://www.youtube.com/watch?v=kMLm6ti4e10',
     },
     {
       index: 6,
@@ -53,8 +53,8 @@ export const concert = {
       index: 7,
       key: 'elpueblounido',
       year: 1973,
-      title: 'El pueblo unido (1973) - Quilapayún',
-      link: 'https://www.youtube.com/watch?v=kTLrFjYt8tA',
+      title: 'El pueblo unido (1973) - Hannes Wader',
+      link: 'https://www.youtube.com/watch?v=DNhFADtMlG4',
     },
     {
       index: 8,
@@ -68,14 +68,14 @@ export const concert = {
       key: 'schreinachliebe',
       year: 1993,
       title: 'Schrei nach Liebe (1993) - Die Ärzte',
-      link: 'https://www.youtube.com/watch?v=_ZMu3HAWAnE',
+      link: 'https://www.youtube.com/watch?v=6X9CEi8wkBc',
     },
     {
       index: 10,
       key: 'sagenein',
       year: 1993,
       title: 'Sage nein! (1993) - Konstantin Wecker',
-      link: 'https://www.youtube.com/watch?v=PgIh4ok1WjY',
+      link: 'https://www.youtube.com/watch?v=eS6fiWNauxM',
     },
   ],
 }
diff --git a/src/services/Lyrics.tsx b/src/services/Lyrics.tsx
@@ -1,10 +1,11 @@
-import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardMedia from '@mui/material/CardMedia'
 import Grid from '@mui/material/Grid'
-import NoSsr from '@mui/material/NoSsr'
 import Typography from '@mui/material/Typography'
 import { useEffect, useState } from 'react'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { useTheme } from '@mui/material/styles'
 import { YouTubeEmbed } from 'react-social-media-embed'
 
 import { socialWallText } from 'config'
@@ -17,6 +18,8 @@ export const Lyrics = ({ activeElement }) => {
   const { acceptedCategories, language } = useStore()
   const [cookieDialogVisible, setCookieDialogVisible] = useState(acceptedCategories.length === 0)
   const [youtubeAccepted, setYoutubeAccepted] = useState(false)
+  const theme = useTheme()
+  const isTablet = useMediaQuery(theme.breakpoints.between('sm', 'lg'))
 
   function setSocialMediaAcceptance() {
     setYoutubeAccepted(acceptedCategories.some((category) => category['key'] === 'youtube'))
@@ -45,21 +48,41 @@ export const Lyrics = ({ activeElement }) => {
         {activeElement?.link ? (
           <>
             <CookieDialog visible={cookieDialogVisible} onAccept={handleAccept} />
-            {!cookieDialogVisible && (
-              <NoSsr defer>
-                {youtubeAccepted ? (
-                  <YouTubeEmbed url={activeElement.link} height={455} />
-                ) : (
-                  <>
-                    <Typography component="h3" variant="h4" color="text.secondary" sx={{ my: 2 }}>
-                      {hasHydrated && socialWallText[language].description3}
-                    </Typography>
-                    <Button variant="outlined" sx={{ color: 'accent.main' }} onClick={() => setCookieDialogVisible(true)}>
-                      <Typography variant="body1">{hasHydrated && socialWallText[language].settings}</Typography>
-                    </Button>
-                  </>
-                )}
-              </NoSsr>
+            {!cookieDialogVisible && youtubeAccepted ? (
+              <Box sx={{ position: 'fixed' }}>
+                <style>{`
+                  .youtubeContainer {
+                    position: relative;
+                  }
+                `}</style>
+                <YouTubeEmbed url={activeElement.link} height={isTablet ? 300 : 455} width={isTablet ? 400 : 650} youTubeProps={{ containerClassName: 'youtubeContainer' }} />
+              </Box>
+            ) : (
+              <>
+                <Typography component="h3" variant="h4" color="text.secondary" sx={{ my: 2 }}>
+                  {hasHydrated && socialWallText[language].description3}
+                </Typography>
+                <Box
+                  sx={{
+                    cursor: 'pointer',
+                    color: 'accent.main',
+                    backgroundColor: 'transparent',
+                    border: '1px solid rgba(245, 0, 87, 0.5)',
+                    lineHeight: '1.75',
+                    textTransform: 'uppercase',
+                    minWidth: '64px',
+                    padding: '5px 15px',
+                    '&:hover': {
+                      textDecoration: 'none',
+                      backgroundColor: 'rgba(245, 0, 87, 0.04)',
+                      border: '1px solid #f50057',
+                    },
+                  }}
+                  onClick={() => setCookieDialogVisible(true)}
+                >
+                  <Typography variant="body1">{hasHydrated && socialWallText[language].settings}</Typography>
+                </Box>
+              </>
             )}
           </>
         ) : (

diff --git a/src/services/Timeline.tsx b/src/services/Timeline.tsx
@@ -1,47 +1,53 @@
 import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import Grid from '@mui/material/Grid'
 import Typography from '@mui/material/Typography'
 
 import { concert } from 'config/concert'
 
 export const Timeline = ({ setActiveElement }) => (
-  <Box
-    sx={{
-      position: 'relative',
-      display: 'flex',
-      backgroundColor: 'text.secondary',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderBottom: '8px solid black',
-      overflow: 'auto',
-      height: '106.04px',
-      borderTopLeftRadius: '79.33px',
-      borderTopRightRadius: '79.33px',
-      paddingTop: '8px',
-      px: '8px',
-    }}
-  >
-    {concert.timeline.map(({ index, year }) => (
-      <Button
-        key={index}
-        onClick={() => setActiveElement(concert.timeline[index])}
-        sx={{
-          color: 'text.primary',
-          margin: 0.5,
-          textTransform: 'none',
-          borderRight: '2px solid black',
-          borderRadius: 0,
-          boxShadow: 'none',
-          backgroundColor: 'transparent',
-          '&:last-child': {
-            borderRight: 'none',
-          },
-        }}
-      >
-        <Typography component="p" variant="h4">
-          {year}
-        </Typography>
-      </Button>
-    ))}
-  </Box>
+  <Grid item xs={12}>
+    <Card
+      sx={{
+        display: 'flex',
+        backgroundColor: 'text.secondary',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderBottom: '8px solid black',
+        overflow: 'auto',
+        height: '106.04px',
+        borderTopLeftRadius: '79.33px',
+        borderTopRightRadius: '79.33px',
+        paddingTop: '8px',
+        px: '8px',
+      }}
+    >
+      <Grid container alignItems="center" justifyContent="center" textAlign="center">
+        {concert.timeline.map(({ index, year }) => (
+          <Box
+            key={index}
+            onClick={() => setActiveElement(concert.timeline[index])}
+            sx={{
+              cursor: 'pointer',
+              padding: '6px 8px',
+              color: 'text.primary',
+              margin: 0.5,
+              textTransform: 'none',
+              borderRight: '2px solid black',
+              borderRadius: 0,
+              boxShadow: 'none',
+              backgroundColor: 'transparent',
+              '&:last-child': {
+                borderRight: 'none',
+              },
+            }}
+          >
+            <Typography component="p" variant="h4">
+              {year}
+            </Typography>
+          </Box>
+        ))}
+      </Grid>
+    </Card>
+  </Grid>
 )