update MediaPlayer design/layout

1instinct · May 31, 2024 · cac8384 · cac8384
1 parent cd70067
commit cac8384
Show file tree

Hide file tree

Showing 13 changed files with 224 additions and 64 deletions.
diff --git a/components/ComingSoon/ComingSoon.tsx b/components/ComingSoon/ComingSoon.tsx
@@ -148,7 +148,7 @@ export const ComingSoon = () => {
         )}
         {comingSoonText !== "" && <Text>{comingSoonText}</Text>}
         <NotifyForm />
-        <SocialLinks />
+        <SocialLinks networks={['instagram', 'facebook', 'twitter', 'youtube']}/>
         {isSlideshow && (
           <ProductImageCarousel>
             <CarouselBackground onClick={() => setIsSlideshow(false)} />

diff --git a/components/FeaturedSnippet/FeaturedSnippet.styles.tsx b/components/FeaturedSnippet/FeaturedSnippet.styles.tsx
@@ -0,0 +1,58 @@
+import styled from "@emotion/styled";
+
+export const FeaturedSnippetWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    /* position: absolute; */
+    z-index: 10;
+    overflow: hidden;
+    @media (max-width: 768px) {
+        padding: 20px 15px;
+    }
+    @media (max-width: 375px) {
+        padding: 20px 15px;
+    }
+`;
+
+export const FeaturedSnippetBadge = styled.div`
+    background: ${(p: any) => p.theme.colors.brand.primary};
+    color: ${(p: any) => p.theme.colors.white.primary};
+    padding: 6px 12px 4px 12px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: bold;
+`;
+
+export const FeaturedSnippetTitle = styled.h2`
+    margin: 0;
+    font-family: "Rubik Bubbles", sans-serif;
+    font-size: 42px;
+    line-height: 44px;
+`;
+export const FeaturedSnippetSubtitle = styled.h4`
+    margin: 0;
+    font-family: "Rubik Bubbles", sans-serif;
+    font-size: 24px;
+    line-height: 26px;
+`;
+export const FeaturedSnippetImageLink = styled.a`
+    transform: rotate(-2deg);
+    box-shadow: 5px 10px 22px rgba(0, 0, 0, 1);
+    padding: 0;
+    width: 300px;
+    height: 300px;
+    margin: 20px 0;
+`;
+export const FeaturedSnippetImage = styled.img`
+    width: 100%;
+    height: 100%;
+`;
+export const FeaturedSnippetText = styled.p`
+    margin: 0px auto;
+    font-family: "Gaegu", cursive;
+`;
+export const FeaturedSnippetButton = styled.button``;
+export const FeaturedSnippetLink = styled.div``;
diff --git a/components/FeaturedSnippet/FeaturedSnippet.tsx b/components/FeaturedSnippet/FeaturedSnippet.tsx
@@ -1,9 +1,30 @@
 import React from "react";
 
+import {
+  FeaturedSnippetWrapper,
+  FeaturedSnippetBadge,
+  FeaturedSnippetTitle,
+  FeaturedSnippetSubtitle,
+  FeaturedSnippetImage,
+  FeaturedSnippetImageLink,
+  FeaturedSnippetText,
+  FeaturedSnippetButton,
+  FeaturedSnippetLink,
+} from "./FeaturedSnippet.styles";
+import { SocialLinks } from "..";
+
 export const FeaturedSnippet = () => {
   return (
-    <div>
-      <h1>FeaturedSnippet</h1>
-    </div>
+    <FeaturedSnippetWrapper>
+      <FeaturedSnippetBadge>New Release</FeaturedSnippetBadge>
+      <FeaturedSnippetTitle>"Watermark"</FeaturedSnippetTitle>
+      <FeaturedSnippetSubtitle>by Sky Chase</FeaturedSnippetSubtitle>
+      <FeaturedSnippetImageLink href="https://open.spotify.com/album/3FfuBJ7SkThWE5ZsxM8DZx?si=KmWYhLPTTXWQ2kYerZcjtQ" target="_blank">
+        <FeaturedSnippetImage src="images/SkyChase-Watermark.jpg" />
+      </FeaturedSnippetImageLink>
+      <FeaturedSnippetText>Now Streaming Everywhere</FeaturedSnippetText>
+      <SocialLinks networks={["spotify", "soundcloud", "lastfm", "youtube"]} />
+      {/* <FeaturedSnippetText>Checkout the latest release!</FeaturedSnippetText> */}
+    </FeaturedSnippetWrapper>
   );
 };
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -90,7 +90,7 @@ export const Header: React.FC<HeaderProps> = ({ darkMode }) => {
       <TopHeader>
         {!isMobile && (
           <LeftSide>
-            <SocialLinks darkMode={darkMode} />
+            <SocialLinks networks={["instagram", "facebook", "twitter", "youtube"]} />
           </LeftSide>
         )}
         <LogoDiv>

diff --git a/components/MediaPlayer/MediaPlayer.styles.tsx b/components/MediaPlayer/MediaPlayer.styles.tsx
@@ -27,7 +27,8 @@ export const Stars = styled.div`
   left: -50%;
   background: url(img/stars.png) 0 0 repeat;
   background-size: cover;
-  animation: ${spin} 180s linear infinite;
+  animation: ${spin} 333s linear infinite;
+  filter: blur(2px);
 `;
 
 export const GlowContainer = styled.div`
@@ -64,8 +65,9 @@ export const Skyline = styled.div`
   height: 490px;
   display: block;
   background: url(img/skyline.png) repeat-x;
-  background-size: 1775px 600px;
-  background-position: center -30px;
+  background-size: contain;
+  filter: blur(2px);
+  background-position: center bottom;
   pointer-events: none;
 `;
 
@@ -82,6 +84,5 @@ export const Cockpit = styled.div`
   background: url(img/cockpit.png) no-repeat;
   background-size: 120% 120%;
   background-position: top center;
-
   pointer-events: none;
 `;
diff --git a/components/MediaPlayer/MediaPlayer.tsx b/components/MediaPlayer/MediaPlayer.tsx
@@ -18,7 +18,7 @@ import {
   Cockpit
 } from "./MediaPlayer.styles";
 import { Layout, NotifyForm } from "..";
-import { FeaturedSnippet } from "../FeaturedSnippet";
+import { FeaturedSnippet } from "..";
 
 const styles = {
   backgroundColor: "#1f1f1f",
@@ -151,7 +151,7 @@ export const MediaPlayer = (props: any) => {
               width: "100%",
               bottom: "8%",
               textAlign: "center",
-              position: "absolute",
+              position: "relative",
               fontFamily: "james",
               fontSize: 40,
               margin: "auto",
@@ -163,7 +163,7 @@ export const MediaPlayer = (props: any) => {
         </a>
         <div
           style={{
-            position: "absolute",
+            position: "relative",
             width: "100%",
             margin: "auto",
             zIndex: 99999,
@@ -417,9 +417,9 @@ export const MediaPlayer = (props: any) => {
           onChange={ChangeTheTime} />
         <label id="lblTime">-:--:--</label>
       </div> */}
-      <GlowContainer>
+      {/* <GlowContainer>
         <Glow />
-      </GlowContainer>
+      </GlowContainer> */}
       <StarsContainer>
         <Stars />
       </StarsContainer>
@@ -432,9 +432,9 @@ export const MediaPlayer = (props: any) => {
         handleChangeReverse={handleChangeReverse}
         reverse={reverse}
       />
-      {songs && _renderSongPlayer()}
       {/* <div dangerouslySetInnerHTML={{__html: spotifyEmbedCode}} /> */}
       <FeaturedSnippet />
+      {/* {songs && _renderSongPlayer()} */}
       <NotifyForm />
     </>
   );

diff --git a/components/NotifyForm/NotifyForm.styles.tsx b/components/NotifyForm/NotifyForm.styles.tsx
@@ -5,11 +5,11 @@ export const NotifyFormContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: absolute;
+  position: relative;
   z-index: 10;
   width: 100%;
   height: 175px;
-  bottom: 40px;
+  /* bottom: 40px; */
 `;
 
 export const NotifyText = styled.div`

diff --git a/components/SocialLinks/SocialLinks.styles.tsx b/components/SocialLinks/SocialLinks.styles.tsx
@@ -12,6 +12,7 @@ export const SocialContainer = styled.div<FooterStateType>`
 
 export const SocialList = styled.ul`
   padding-inline-start: 0px;
+  display: flex;
 `;
 
 export const SocialListItem = styled.li<FooterStateType>`

diff --git a/components/SocialLinks/SocialLinks.tsx b/components/SocialLinks/SocialLinks.tsx
@@ -1,5 +1,7 @@
 import React from "react";
 import { Facebook, Twitter, Instagram, YouTube } from "@material-ui/icons";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpotify, faSoundcloud, faLastfm } from '@fortawesome/free-brands-svg-icons';
 
 import {
   SocialContainer,
@@ -8,63 +10,69 @@ import {
   SocialIcon
 } from "./SocialLinks.styles";
 
-export const SocialLinks = ({ darkMode }: any) => {
+export const SocialLinks = ({ networks = [] }: { networks: string[] }) => {
+  // Method to check if a network is in the passed array
+  const isNetworkPresent = (network: string) => networks.includes(network);
+
   return (
-    <>
-      <SocialContainer darkMode={darkMode}>
-        <SocialList>
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.instagram.com/${process.env.NEXT_PUBLIC_INSTAGRAM_SLUG}` ||
-                "http://www.instagram.com"
-              }
-              target="_blank"
-            >
-              {/* <SocialIcon src="images/social-icon-instagram.png" /> */}
-              <Instagram />{" "}
+    <SocialContainer>
+      <SocialList>
+        {isNetworkPresent("instagram") && (
+          <SocialListItem>
+            <a href={`http://www.instagram.com/${process.env.NEXT_PUBLIC_INSTAGRAM_SLUG}`} target="_blank">
+              <Instagram />
+            </a>
+          </SocialListItem>
+        )}
+
+        {isNetworkPresent("facebook") && (
+          <SocialListItem>
+            <a href={`http://www.facebook.com/${process.env.NEXT_PUBLIC_FACEBOOK_SLUG}`} target="_blank">
+              <Facebook />
             </a>
           </SocialListItem>
+        )}
 
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.facebook.com/${process.env.NEXT_PUBLIC_FACEBOOK_SLUG}` ||
-                "http://www.facebook.com"
-              }
-              target="_blank"
-            >
-              {/* <SocialIcon src="images/social-icon-facebook.png" />{" "} */}
-              <Facebook />{" "}
+        {isNetworkPresent("twitter") && (
+          <SocialListItem>
+            <a href={`http://www.twitter.com/${process.env.NEXT_PUBLIC_TWITTER_SLUG}`} target="_blank">
+              <Twitter />
             </a>
           </SocialListItem>
+        )}
 
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.twitter.com/${process.env.NEXT_PUBLIC_TWITTER_SLUG}` ||
-                "http://www.twitter.com"
-              }
-              target="_blank"
-            >
-              {/* <SocialIcon src="images/social-icon-twitter.png" />{" "} */}
-              <Twitter />{" "}
+        {isNetworkPresent("youtube") && (
+          <SocialListItem>
+            <a href={`http://www.youtube.com/${process.env.NEXT_PUBLIC_YOUTUBE_SLUG}`} target="_blank">
+              <YouTube />
             </a>
           </SocialListItem>
-
-          <SocialListItem darkMode={darkMode}>
-            <a
-              href={
-                `http://www.youtube.com/${process.env.NEXT_PUBLIC_YOUTUBE_SLUG}` ||
-                "http://www.youtube.com"
-              }
-              target="_blank"
-            >
-              <YouTube />{" "}
+        )}
+
+        {isNetworkPresent("spotify") && (
+          <SocialListItem>
+            <a href="https://open.spotify.com/album/3FfuBJ7SkThWE5ZsxM8DZx?si=KmWYhLPTTXWQ2kYerZcjtQ" target="_blank">
+              <FontAwesomeIcon icon={faSpotify} />
+            </a>
+          </SocialListItem>
+        )}
+
+        {isNetworkPresent("soundcloud") && (
+          <SocialListItem>
+            <a href="http://www.soundcloud.com/smokeyyy" target="_blank">
+              <FontAwesomeIcon icon={faSoundcloud} />
+            </a>
+          </SocialListItem>
+        )}
+
+        {isNetworkPresent("lastfm") && (
+          <SocialListItem>
+            <a href="https://www.last.fm/music/Sky+Chase" target="_blank">
+              <FontAwesomeIcon icon={faLastfm} />
             </a>
           </SocialListItem>
-        </SocialList>
-      </SocialContainer>
-    </>
+        )}
+      </SocialList>
+    </SocialContainer>
   );
 };
diff --git a/package.json b/package.json
@@ -34,6 +34,14 @@
   "dependencies": {
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/pro-duotone-svg-icons": "6.4.2",
+    "@fortawesome/pro-light-svg-icons": "6.4.2",
+    "@fortawesome/pro-regular-svg-icons": "6.4.2",
+    "@fortawesome/pro-solid-svg-icons": "6.4.2",
+    "@fortawesome/react-fontawesome": "0.2.0",
     "@kontent-ai/delivery-sdk": "12.3.0",
     "@kontent-ai/model-generator": "5.8.0",
     "@kontent-ai/react-components": "0.1.1",

diff --git a/public/images/SkyChase-Watermark.jpg b/public/images/SkyChase-Watermark.jpg
diff --git a/styles/fonts.css b/styles/fonts.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Rubik+Bubbles&display=swap');
+
 @font-face {
   font-family: "body_mono_bold";
   src: url("../public/fonts/ibmplexmono-bold-webfont.woff2") format("woff2"),