hide pip button to non premium users (#316)

* hide pip button to no premium users * hide pip button in fullScreenLyrics component --------- Co-authored-by: Mahim M S <mahimms@Admins-MacBook-Pro.local>
MarcoMadera · Apr 7, 2024 · bb3c972 · bb3c972
1 parent ebc2655
commit bb3c972
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/components/FullScreenLyrics/FullScreenLyrics.tsx b/components/FullScreenLyrics/FullScreenLyrics.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from "react";
 
 import { LyricLine } from "./LyricLine";
 import { LoadingSpinner, LyricsPIPButton } from "components";
-import { useHeader, useLyricsContext } from "hooks";
+import { useAuth, useHeader, useLyricsContext } from "hooks";
 import { getLineType } from "utils";
 
 export default function FullScreenLyrics(): ReactElement {
@@ -14,6 +14,8 @@ export default function FullScreenLyrics(): ReactElement {
     lyricsLoading,
   } = useLyricsContext();
 
+  const { isPremium } = useAuth();
+
   useHeader({
     disableOpacityChange: true,
     alwaysDisplayColor: false,
@@ -47,7 +49,7 @@ export default function FullScreenLyrics(): ReactElement {
           })}
         </div>
       )}
-      {!!document?.pictureInPictureEnabled && (
+      {isPremium && !!document?.pictureInPictureEnabled && (
         <LyricsPIPButton background={lyricsBackgroundColor} />
       )}
       <style jsx>{`

diff --git a/components/PlaybackExtraControls/PlaybackExtraControls.tsx b/components/PlaybackExtraControls/PlaybackExtraControls.tsx
@@ -7,16 +7,19 @@ import {
   VolumeControl,
 } from "components";
 import { FullScreen, Lyrics, Queue } from "components/icons";
-import { useSpotify } from "hooks";
+import { useAuth, useSpotify } from "hooks";
 import { DisplayInFullScreen } from "types/spotify";
 
 export default function PlaybackExtraControls(): ReactElement {
   const { currentlyPlaying } = useSpotify();
+  const { isPremium } = useAuth();
   return (
     <div className="extras">
       {currentlyPlaying?.type === "track" && (
         <>
-          {!!document?.pictureInPictureEnabled && <LyricsPIPButton />}
+          {isPremium && !!document?.pictureInPictureEnabled && (
+            <LyricsPIPButton />
+          )}
           <FullScreenControl
             icon={Lyrics}
             displayInFullScreen={DisplayInFullScreen.Lyrics}