Elisei/improve UI (#7)

* truncate text * update gitignore. * Start the radio when switch from a station to other one. * update UI - fix cut off 'g' - fix height of header * make the play button & volume icon a bit smaller * Header: truncate text & fix style. * made responsive. * minor fix responsive
radio-crestin · Apr 16, 2022 · 162038f · 162038f
1 parent fab3c9c
commit 162038f
Show file tree

Hide file tree

Showing 18 changed files with 223 additions and 91 deletions.
diff --git a/.gitignore b/.gitignore
@@ -387,3 +387,6 @@ data
 nginx/nginx.conf
 /frontend/node_modules
 hls-streaming/docker-compose.yml
+frontend/.idea/frontend.iml
+frontend/.idea/modules.xml
+frontend/.idea/vcs.xml
diff --git a/TODO.md b/TODO.md
@@ -1,35 +1,35 @@
 Frontend:
-- make the play button & volume icon a bit smaller && make the volume slider width constant
-- implement random station functionality
-- when selecting a station, the player should start automatically
-- implement add to favorite functionality
-- implement stations groups
-- sort all stations to left
-- make the stations thumbnail a bit smaller
-- add current played song as head meta (maybe Google will pick them and display in search results)
-- create a page for each station (and simulate a page redirect when clicking on a station)
-- create a sitemap with all the stations
-- create a subdomain for each station (just the player + the latest articles)
-- allow the user to add a shortcut on desktop for the app
-- create am embeddable player
-- add SEO meta for all the reviews
-- make the website mobile responsive
-- refresh the station metadata every 5 seconds
-- implement add to favorite each station
-- optimize the website for maximum performance on web.dev
-- implement HLS player on website
-- populate station description from API
-- allow the user to leave a review (/api/v1/review)
-- create a pop-up so that the user can share Radio Crestin with their friends
-- enable server side rendering and push the website to a very fast CDN
-- link each station to the correct Facebook page by using the link from API
-- improve the website audio player to allow the user to select which stream should be played for that station (hls/proxy/original)
-  - when a stream is failing, fall-back to the next stream automatically
-- when a station is playing, send this signal to backend (send station_id every 15 seconds)
-- add facebook page as SEO meta field
-- SEO meta field - current playing
-- send the listened station every 1 minute (/api/v1/listen)
-- sum up to station listeners the radio_crestin_listeners value when the user is listening using the HLS or proxy
+- [X] make the play button & volume icon a bit smaller && make the volume slider width constant
+- [ ] implement random station functionality
+- [X] when selecting a station, the player should start automatically
+- [ ] implement add to favorite functionality
+- [ ] implement stations groups
+- [ ] sort all stations to left
+- [ ] make the stations thumbnail a bit smaller
+- [ ] add current played song as head meta (maybe Google will pick them and display in search results)
+- [ ] create a page for each station (and simulate a page redirect when clicking on a station)
+- [ ] create a sitemap with all the stations
+- [ ] create a subdomain for each station (just the player + the latest articles)
+- [ ] allow the user to add a shortcut on desktop for the app
+- [ ] create am embeddable player
+- [ ] add SEO meta for all the reviews
+- [ ] make the website mobile responsive
+- [ ] refresh the station metadata every 5 seconds
+- [ ] implement add to favorite each station
+- [ ] optimize the website for maximum performance on web.dev
+- [ ] implement HLS player on website
+- [ ] populate station description from API
+- [ ] allow the user to leave a review (/api/v1/review)
+- [ ] create a pop-up so that the user can share Radio Crestin with their friends
+- [ ] enable server side rendering and push the website to a very fast CDN
+- [ ] link each station to the correct Facebook page by using the link from API
+- [ ] improve the website audio player to allow the user to select which stream should be played for that station (hls/proxy/original)
+- [ ] when a stream is failing, fall-back to the next stream automatically
+- [ ] when a station is playing, send this signal to backend (send station_id every 15 seconds)
+- [ ] add facebook page as SEO meta field
+- [ ] SEO meta field - current playing
+- [ ] send the listened station every 1 minute (/api/v1/listen)
+- [ ] sum up to station listeners the radio_crestin_listeners value when the user is listening using the HLS or proxy
 
 Backend:
 - incorporate multiple audio sources for each station (hls, proxy, original stream)

diff --git a/frontend/.idea/.gitignore b/frontend/.idea/.gitignore
diff --git a/frontend/components/Container/Container.module.scss b/frontend/components/Container/Container.module.scss
@@ -6,9 +6,11 @@
   width: 90%;
   margin: 0 auto;
 
-
   @include mixinHelper.onTablet {
     width: 100%;
     margin: 0;
   }
+  @include mixinHelper.onMobile{
+    background: #ffd8af;
+  }
 }
diff --git a/frontend/components/Footer/Footer.module.scss b/frontend/components/Footer/Footer.module.scss
@@ -7,14 +7,12 @@
   font-weight: 500;
   font-size: 18px;
   color: #646464;
-  margin-top: 150px;
-  margin-bottom: 82px;
+  padding-top: 150px;
+  padding-bottom: 82px;
   flex-wrap: wrap;
 
   @include mixinHelper.onMobile{
-    margin-top: 50px;
-    margin-bottom: 30px;
-    padding: 0 30px;
+    padding: 50px 30px 30px;
     gap: 10px 20px;
   }
 }
diff --git a/frontend/components/StationCategories/StationCategories.module.scss b/frontend/components/StationCategories/StationCategories.module.scss
@@ -9,6 +9,7 @@
     overflow-x: scroll;
     justify-content: start;
     padding-left: 30px;
+    padding-right: 30px;
     padding-bottom: 20px;
   }
 
@@ -29,6 +30,10 @@
       padding: 5px 10px;
     }
 
+    @include mixinHelper.onMobile{
+      background: white;
+    }
+
     &:first-child{
       background: #F9AC59;;
     }

diff --git a/frontend/components/StationHeader/StationHeader.module.scss b/frontend/components/StationHeader/StationHeader.module.scss
@@ -5,7 +5,6 @@
   flex-direction: column;
   margin: 2rem auto;
   padding: 36px;
-  min-height: 520px;
   background: #FFD9AF;
   border-radius: 25px;
   box-shadow: 1px 2px 18px 0 #0000001A;
@@ -17,6 +16,10 @@
     border-radius: 0;
   }
 
+  @include mixinHelper.onMobile{
+    box-shadow: none;
+  }
+
   .row {
     display: flex;
     width: 100%;
@@ -25,13 +28,15 @@
 
   .currentStation {
     display: flex;
-    gap: 0 30px;
     height: 100%;
     z-index: 0;
-    margin-top: 50px;
+    gap: 50px;
+    padding: 0 50px;
 
     @include mixinHelper.onTablet{
       flex-direction: column-reverse;
+      padding: 0;
+      gap: 0;
     }
   }
 }
@@ -43,6 +48,14 @@
   left: 0;
   z-index: -1;
   border-bottom-left-radius: 25px;
+
+  @include mixinHelper.onTablet{
+    width: 700px;
+  }
+
+  @include mixinHelper.onMobile{
+    width: 340px;
+  }
 }
 
 
diff --git a/frontend/components/StationHeader/StationHeader.tsx b/frontend/components/StationHeader/StationHeader.tsx
@@ -5,9 +5,10 @@ import RandomStationButton from "@/components/RandomStationButton/RandomStationB
 import StationInformation from "@/components/StationInformation/StationInformation";
 import styles from "./StationHeader.module.scss";
 import dynamic from "next/dynamic";
-import { useStations } from "../../hooks/stations";
 import Circle_matrix_desktop from "@/public/circle_matrix_desktop.svg";
+import Circle_matrix_mobile from "@/public/circle_matrix_mobile.svg";
 import { Station } from "../../types";
+import useWindowSize from "../../hooks/useWindowSize";
 
 export const StationPlayer = dynamic(
   () => import("components/StationPlayer/StationPlayer"),
@@ -18,7 +19,8 @@ export const StationPlayer = dynamic(
 
 export default function StationHeader(station: Station) {
   const [showChild, setShowChild] = useState(false);
-  const [started, setStarted] = useState(false);
+  const [started, setStarted] = useState(true);
+  const window = useWindowSize();
 
   useEffect(() => {
     setShowChild(true);
@@ -32,7 +34,7 @@ export default function StationHeader(station: Station) {
     <div className={styles.header}>
       <div className={styles.row}>
         <InviteButton />
-        <RandomStationButton />
+        {window.width > 767 && <RandomStationButton />}
       </div>
       <div className={styles.currentStation}>
         <StationPlayer
@@ -41,12 +43,20 @@ export default function StationHeader(station: Station) {
           started={started}
           onStop={() => setStarted(false)}
         />
+        <picture>
+          <source
+            media="(max-width: 1023px)"
+            srcSet={Circle_matrix_mobile.src}></source>
+          <source
+            media="(min-width: 1024px)"
+            srcSet={Circle_matrix_desktop.src}></source>
+          <img
+            src={Circle_matrix_desktop.src}
+            className={styles.matrix}
+            alt="fullSymbol"
+          />
+        </picture>
         <StationInformation station={station} />
-        <img
-          className={styles.matrix}
-          src={Circle_matrix_desktop.src}
-          alt={"fullSymbol"}
-        />
       </div>
     </div>
   );

diff --git a/frontend/components/StationInformation/StationInformation.module.scss b/frontend/components/StationInformation/StationInformation.module.scss
@@ -1,9 +1,16 @@
 @use 'styles/mixinHelper';
 
+@mixin truncateText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .container {
   display: flex;
   flex-direction: column;
-  max-width: 60%;
+  justify-content: center;
+  max-width: 45%;
 
   @include mixinHelper.onTablet {
     max-width: unset;
@@ -13,9 +20,14 @@
   .station {
 
     &_Name {
+      @include truncateText;
       font-style: normal;
       font-weight: 700;
       font-size: 50px;
+
+      @include mixinHelper.onMobile{
+        font-size: 30px;
+      }
     }
 
     &_RatingContainer {

diff --git a/frontend/components/StationInformation/StationInformation.tsx b/frontend/components/StationInformation/StationInformation.tsx
@@ -61,12 +61,11 @@ export default function StationInformation(props: any) {
         />
       </div>
 
-      {/*@ts-ignore*/}
-      {NumberOfListeners && (
-        <p className={styles.station_NumberOfListeners}>
-          {NumberOfListeners} persoane ascultă împreună cu tine acest radio
-        </p>
-      )}
+      <p
+        className={styles.station_NumberOfListeners}
+        style={{ opacity: NumberOfListeners ? 1 : 0 }}>
+        {NumberOfListeners} persoane ascultă împreună cu tine acest radio
+      </p>
       <p className={styles.station_Quote}>
         ”Nu numai că trebuie să ne ferim să producem dezbinare, ci trebuie să
         devenim agenți ai păcii, străduindu-ne să reconciliem părțile aflate în

diff --git a/frontend/components/StationPlayer/StationPlayer.module.scss b/frontend/components/StationPlayer/StationPlayer.module.scss
@@ -1,13 +1,18 @@
 @use 'styles/globalVariables';
 @use 'styles/mixinHelper';
 
-.containerPlayer {
-  display: flex;
+@mixin truncateText {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 425px;
+}
+
+.contentHeaderLeft {
   color: black;
   border-radius: 15px;
-  margin-left: 50px;
   margin-right: auto;
-  min-width: 450px;
+  width: 50%;
   gap: 20px;
 
   @include mixinHelper.onSmallDesktop{
@@ -20,15 +25,26 @@
     padding: 18px 0;
     width: unset;
   }
+  @include mixinHelper.onMobile{
+    min-width: 0;
+  }
 
-  .descriptionSong {
+  .container {
     position: relative;
     display: flex;
     flex-direction: column;
     align-self: flex-end;
+    height: 100%;
+    justify-content: end;
 
     @include mixinHelper.onTablet {
       flex-direction: row;
+      justify-content: unset;
+      gap: 0 50px;
+    }
+
+    @include mixinHelper.onMobile{
+      flex-direction: column;
     }
 
     .songImage {
@@ -37,22 +53,38 @@
       height: 200px;
       border-radius: 30px;
       filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.25));
-    }
 
-    .songName {
-      margin: 15px 0 5px;
-      font-size: 2.3em;
-      font-weight: 800;
+      @include mixinHelper.onMobile{
+        margin: 0 auto;
+      }
     }
 
-    .artist {
-      font-size: 1.5em;
-      font-weight: 300;
-      margin-top: 10px;
-    }
+    .descriptionSong {
+      display: flex;
+      flex-direction: column;
+      height: 205px;
+
+      @include mixinHelper.onMobile{
+        height: 250px;
+      }
+
+      .songName {
+        @include truncateText;
+        height: 50px;
+        margin: 15px 0 5px;
+        font-size: 2.3em;
+        font-weight: 800;
+      }
+
+      .artist {
+        @include truncateText;
+        font-size: 1.5em;
+        font-weight: 300;
+      }
 
-    .containerPlyr {
-      margin-top: 45px;
+      .containerPlyr {
+        margin-top: auto;
+      }
     }
   }
 }