Merge pull request #2 from haslo/menu_buttons

Menu buttons
haslo · Sep 24, 2024 · 1149d8c · 1149d8c
2 parents 91b34c2 + 5721a1c
commit 1149d8c
Show file tree

Hide file tree

Showing 25 changed files with 593 additions and 218 deletions.
diff --git a/index.html b/index.html
@@ -19,7 +19,7 @@
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
     <script type="module" src="/src/index.jsx"></script>
-    <title>haslo.ch - Homegrown Techno from Bern, Switzerland</title>
+    <title>haslo.ch - Techno and Plugins from Bern, Switzerland</title>
   </head>
   <body>
     <!-- hallo musti -->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "date-fns": "^3.6.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
     "react-waypoint": "^10.3.0",
     "vite": "^5.4.1"
   },

diff --git a/public/assets/destruktor.png b/public/assets/destruktor.png
diff --git a/public/assets/haaschen.png b/public/assets/haaschen.png
diff --git a/public/assets/ploink.png b/public/assets/ploink.png
diff --git a/public/assets/voltage_modular.png b/public/assets/voltage_modular.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,26 +1,25 @@
 import './App.css';
-
-import {useState} from "react";
-
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
-import {createTheme} from '@mui/material/styles';
+import {useState} from "react";
+import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
+
 import {ThemeProvider} from "@mui/material";
+import {createTheme} from '@mui/material/styles';
 
-import SearchAppBar from "./SearchAppBar";
-import NewsPosts from "./NewsPosts";
-import SoundCloudIFrame from "./SoundCloudIFrame";
-import BottomBar from "./BottomBar";
-import useFetchNewsPostsAndNewestContent from './useFetchNewsPostsAndNewestContent';
+import {SearchAppBar} from "./shared/SearchAppBar";
+import {BottomBar} from "./shared/BottomBar";
+import {NavButtons} from "./shared/NavButtons";
 
-function App() {
+import {Music} from "./pages/music/Music";
+import {Plugins} from "./pages/plugins/Plugins";
 
+function App() {
   const [searchQuery, setSearchQuery] = useState('');
   const [searchEventSent, setSearchEventSent] = useState(false);
-  const { newsPosts, newestContentId } = useFetchNewsPostsAndNewestContent();
 
   const theme = createTheme({
     palette: {
@@ -34,24 +33,31 @@ function App() {
   });
 
   return (
-    <div className="App">
-      <ThemeProvider theme={theme}>
-        <SearchAppBar
-          setSearchQuery={setSearchQuery}
-          searchEventSent={searchEventSent}
-          setSearchEventSent={setSearchEventSent}
-        />
-        <SoundCloudIFrame
-          newestContentId={newestContentId}
-        />
-        <NewsPosts
-          searchQuery={searchQuery}
-          newsPosts={newsPosts}
-          style={{marginTop: '50px'}}
-        />
-        <BottomBar/>
-      </ThemeProvider>
-    </div>
+    <Router>
+      <div className="App">
+        <ThemeProvider theme={theme}>
+          <SearchAppBar
+            setSearchQuery={setSearchQuery}
+            searchEventSent={searchEventSent}
+            setSearchEventSent={setSearchEventSent}
+          />
+          <NavButtons/>
+          <Routes>
+            <Route path="/" element={
+              <Music
+                searchQuery={searchQuery}
+              />
+            }/>
+            <Route path="/plugins" element={
+              <Plugins
+                searchQuery={searchQuery}
+              />
+            }/>
+          </Routes>
+          <BottomBar/>
+        </ThemeProvider>
+      </div>
+    </Router>
   );
 }
 

diff --git a/src/NewsPostCard.jsx b/src/NewsPostCard.jsx
diff --git a/src/index.css b/src/index.css
@@ -11,3 +11,8 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.MuiCardHeader-content a {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/music/Music.jsx b/src/pages/music/Music.jsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+import {SoundCloudIFrame} from "./SoundCloudIFrame";
+import {MusicPosts} from "./MusicPosts";
+
+import {fetchMusicApiData} from '../../services/ApiAdapter';
+
+export function Music({searchQuery}) {
+  const {musicPosts, newestContentId} = fetchMusicApiData();
+
+  return (
+    <>
+      <SoundCloudIFrame
+        newestContentId={newestContentId}
+      />
+      <MusicPosts
+        searchQuery={searchQuery}
+        musicPosts={musicPosts}
+        style={{marginTop: '50px'}}
+      />
+    </>
+  );
+}
diff --git a/src/pages/music/MusicPostCard.jsx b/src/pages/music/MusicPostCard.jsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+
+import {format} from "date-fns";
+
+import {
+  Avatar,
+  Box,
+  Card,
+  CardActionArea,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  Grid,
+  Typography,
+} from "@mui/material";
+
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
+import ImageIcon from '@mui/icons-material/Image';
+import HeadphonesIcon from '@mui/icons-material/Headphones';
+
+export function MusicPostCard({newsPost}) {
+  return (
+    <Grid item xs={12} sm={12} md={6} lg={4}>
+      <Card sx={{paddingX: 1, marginBottom: '15px'}}>
+        <CardHeader
+          avatar={
+            <a href={newsPost.type.channelUrl} name={newsPost.type.channelDescription}>
+              <Avatar variant="rounded" alt={newsPost.type.channelDescription} src={newsPost.type.icon.url}/>
+            </a>
+          }
+          title={
+            <a href={newsPost.originalUrl}>
+              {newsPost.title}
+            </a>
+          }
+          subheader={format(new Date(newsPost.publicationDate), 'yyyy-MM-dd')}
+        />
+        <CardActionArea href={newsPost.originalUrl} target='_blank'
+                        className={newsPost.isVideo ? 'video_card' : (newsPost.isAudio ? 'audio_card' : 'plain_card')}>
+          <Box sx={{position: 'relative'}}>
+            <CardMedia
+              component="img"
+              height={(newsPost.type.channelDescription === "YouTube") ? "194" : "250"}
+              image={newsPost.thumbnailImage.url + '?fm=webp'}
+              alt={newsPost.shortTitle}
+            />
+            <Box
+              sx={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                bgcolor: 'rgba(0, 0, 0, 0.54)',
+                color: 'white',
+                padding: '10px',
+                boxSizing: 'border-box',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                opacity: 0,
+                transition: 'opacity 2s',
+                '&:hover': {
+                  opacity: 0.7,
+                  transition: 'opacity 0.5s',
+                },
+              }}
+            >
+              {
+                newsPost.isVideo ?
+                  <PlayCircleOutlineIcon sx={{fontSize: '100px'}}/> :
+                  newsPost.isAudio ?
+                    <HeadphonesIcon sx={{fontSize: '100px'}}/> :
+                    <ImageIcon sx={{fontSize: '100px'}}/>
+              }
+            </Box>
+          </Box>
+          <CardContent>
+            <Typography variant="body2" color="text.secondary">
+              {newsPost.description}
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Grid>
+  );
+}
diff --git a/src/NewsPosts.jsx → src/pages/music/MusicPosts.jsx b/src/NewsPosts.jsx → src/pages/music/MusicPosts.jsx
@@ -4,13 +4,13 @@ import {Waypoint} from "react-waypoint";
 import {Container, Grid} from "@mui/material";
 import Typography from "@mui/material/Typography";
 
-import NewsPostCard from "./NewsPostCard";
+import {MusicPostCard} from "./MusicPostCard";
 
-function NewsPosts({searchQuery, newsPosts}) {
+export function MusicPosts({searchQuery, musicPosts}) {
 
   const [maxScroll, setMaxScroll] = useState(9);
 
-  if (!newsPosts) {
+  if (!musicPosts) {
     return (
       <Container fixed style={{marginTop: '100px'}}>
         <Typography variant='h4' align='center' sx={{color: 'white'}}>
@@ -20,7 +20,7 @@ function NewsPosts({searchQuery, newsPosts}) {
     );
   }
 
-  const filteredPosts = newsPosts.filter((newsPost) => {
+  const filteredPosts = musicPosts.filter((newsPost) => {
     if (searchQuery === '') {
       return true;
     } else {
@@ -36,17 +36,17 @@ function NewsPosts({searchQuery, newsPosts}) {
         <Container fixed style={{marginTop: '40px'}}>
           <Grid container spacing={3} rowSpacing={2}>
             {filteredPosts.slice(0, maxScroll).map(newsPost => (
-              <Grid item xs={12} sm={12} md={6} lg={4} key={newsPost.sys.id}>
-                <NewsPostCard newsPost={newsPost}></NewsPostCard>
-              </Grid>
+              <MusicPostCard newsPost={newsPost} key={newsPost.sys.id}></MusicPostCard>
             ))}
           </Grid>
         </Container>
         <Waypoint
-          onEnter = {() => {
+          onEnter={() => {
             setMaxScroll(maxScroll + 6);
           }}
-        ><div style={{height: '50px'}}/></Waypoint>
+        >
+          <div style={{height: '50px'}}/>
+        </Waypoint>
       </>
     );
   } else {
@@ -59,5 +59,3 @@ function NewsPosts({searchQuery, newsPosts}) {
     );
   }
 }
-
-export default NewsPosts;
diff --git a/src/SoundCloudIFrame.jsx → src/pages/music/SoundCloudIFrame.jsx b/src/SoundCloudIFrame.jsx → src/pages/music/SoundCloudIFrame.jsx
@@ -1,6 +1,6 @@
 import {Container} from "@mui/material";
 
-function SoundCloudIFrame({newestContentId}) {
+export function SoundCloudIFrame({newestContentId}) {
   if (newestContentId !== null && newestContentId !== undefined) {
     const iframeHtml = '<iframe title="Featured Track" ' +
       'width="100%" height="200" scrolling="no" frameborder="no" allow="autoplay" ' +
@@ -10,11 +10,9 @@ function SoundCloudIFrame({newestContentId}) {
       '</iframe>'
 
     return (
-      <Container fixed style={{marginTop: '100px'}}>
+      <Container fixed style={{marginTop: '50px'}}>
         <div dangerouslySetInnerHTML={{__html: iframeHtml}}/>
       </Container>
     );
   }
 }
-
-export default SoundCloudIFrame;