From 0de218b244c25e33726cdd195b27b379157f48ff Mon Sep 17 00:00:00 2001 From: Dylan Jeffers Date: Fri, 31 Mar 2023 11:17:51 -0700 Subject: [PATCH] [C-2295] Only show now-playing-artwork-tile when song enqueued (#3137) --- .../nav/desktop/CurrentlyPlaying.module.css | 95 ------------ .../nav/desktop/CurrentlyPlaying.tsx | 124 --------------- .../src/components/nav/desktop/NavColumn.tsx | 93 +----------- .../desktop/NowPlayingArtworkTile.module.css | 40 +++++ .../nav/desktop/NowPlayingArtworkTile.tsx | 143 ++++++++++++++++++ 5 files changed, 188 insertions(+), 307 deletions(-) delete mode 100644 apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.module.css delete mode 100644 apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.tsx create mode 100644 apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.module.css create mode 100644 apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.module.css b/apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.module.css deleted file mode 100644 index f03734a73f1..00000000000 --- a/apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.module.css +++ /dev/null @@ -1,95 +0,0 @@ -.artworkWrapper { - margin: 20px auto 0; - height: 208px; - width: 208px; - border: 2px solid var(--currently-playing-border); - border-radius: 15px; - overflow: hidden; - transition: opacity 0.07s ease-in-out; -} - -.artworkWrapper > div { - border-radius: 15px; - overflow: hidden; -} - -.artworkWrapper.playing:hover { - opacity: 0.96; -} - -.artwork { - outline-style: none; - height: 100%; - width: 100%; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - background-color: var(--neutral-light-8); -} - -.playing { - cursor: pointer; -} - -.bottomRightContainer { - display: flex; - width: 100%; - height: 100%; - justify-content: flex-end; - align-items: flex-end; - padding: 10px; -} - -.visualizerIconContainer { - display: flex; - align-items: center; - justify-content: center; - padding: 5px; - background-color: var(--static-white); - border-radius: 50%; - cursor: pointer; - transition: transform 0.2s; -} -.visualizerIconContainer:hover { - transform: scale(1.1); -} -.visualizerIconContainer:hover path { - fill: var(--primary); -} - -.visualizerIcon { - width: 22px; - height: 22px; -} - -.hide { - display: none; -} - -/* Start Squircle Code */ -/* https://medium.com/@zubryjs/squircles-bringing-ios-7s-solution-to-rounded-rectangles-to-css-9fc35779aa65 */ -/* Radius 14 for image, 13 for outline to avoid corners being too fat */ -/*.largeArtworkWrapper .squircleShadowHack { - width: 210px; - height: 210px; - position: absolute; - left: -1px; - top: -1px; - box-shadow: 0 1px 15px 0px rgba(85, 84, 89,.5) !important; - border-radius: 20px; -} -.largeArtworkWrapper .squircleBorderHack { - width: 212px; - height: 212px; - position: absolute; - left: -2px; - top: -2px; - background-color: #FFFFFF; - clip-path: polygon(100% 50%, 100% 76.8%, 100% 79.8%, 100% 81.8%, 100% 83.2%, 100% 84.4%, 100% 85.3%, 99.9% 86.2%, 99.9% 86.9%, 99.9% 87.6%, 99.9% 88.2%, 99.9% 88.8%, 99.8% 89.3%, 99.8% 89.7%, 99.8% 90.2%, 99.7% 90.6%, 99.7% 91%, 99.7% 91.4%, 99.6% 91.7%, 99.6% 92.1%, 99.5% 92.4%, 99.5% 92.7%, 99.4% 93%, 99.4% 93.3%, 99.3% 93.5%, 99.2% 93.8%, 99.2% 94%, 99.1% 94.3%, 99.1% 94.5%, 99% 94.7%, 98.9% 94.9%, 98.8% 95.1%, 98.7% 95.3%, 98.7% 95.5%, 98.6% 95.7%, 98.5% 95.9%, 98.4% 96.1%, 98.3% 96.2%, 98.2% 96.4%, 98.1% 96.6%, 98% 96.7%, 97.9% 96.9%, 97.8% 97%, 97.7% 97.1%, 97.5% 97.3%, 97.4% 97.4%, 97.3% 97.5%, 97.1% 97.7%, 97% 97.8%, 96.9% 97.9%, 96.7% 98%, 96.6% 98.1%, 96.4% 98.2%, 96.2% 98.3%, 96.1% 98.4%, 95.9% 98.5%, 95.7% 98.6%, 95.5% 98.7%, 95.3% 98.7%, 95.1% 98.8%, 94.9% 98.9%, 94.7% 99%, 94.5% 99.1%, 94.3% 99.1%, 94% 99.2%, 93.8% 99.2%, 93.5% 99.3%, 93.3% 99.4%, 93% 99.4%, 92.7% 99.5%, 92.4% 99.5%, 92.1% 99.6%, 91.7% 99.6%, 91.4% 99.7%, 91% 99.7%, 90.6% 99.7%, 90.2% 99.8%, 89.7% 99.8%, 89.3% 99.8%, 88.8% 99.9%, 88.2% 99.9%, 87.6% 99.9%, 86.9% 99.9%, 86.2% 99.9%, 85.3% 100%, 84.4% 100%, 83.2% 100%, 81.8% 100%, 79.8% 100%, 76.8% 100%, 50.2% 100%, 23.2% 100%, 20.2% 100%, 18.2% 100%, 16.8% 100%, 15.6% 100%, 14.7% 100%, 13.8% 99.9%, 13.1% 99.9%, 12.4% 99.9%, 11.8% 99.9%, 11.2% 99.9%, 10.7% 99.8%, 10.3% 99.8%, 9.8% 99.8%, 9.4% 99.7%, 9% 99.7%, 8.6% 99.7%, 8.3% 99.6%, 7.9% 99.6%, 7.6% 99.5%, 7.3% 99.5%, 7% 99.4%, 6.7% 99.4%, 6.5% 99.3%, 6.2% 99.2%, 6% 99.2%, 5.7% 99.1%, 5.5% 99.1%, 5.3% 99%, 5.1% 98.9%, 4.9% 98.8%, 4.7% 98.7%, 4.5% 98.7%, 4.3% 98.6%, 4.1% 98.5%, 3.9% 98.4%, 3.8% 98.3%, 3.6% 98.2%, 3.4% 98.1%, 3.3% 98%, 3.1% 97.9%, 3% 97.8%, 2.9% 97.7%, 2.7% 97.5%, 2.6% 97.4%, 2.5% 97.3%, 2.3% 97.1%, 2.2% 97%, 2.1% 96.9%, 2% 96.7%, 1.9% 96.6%, 1.8% 96.4%, 1.7% 96.2%, 1.6% 96.1%, 1.5% 95.9%, 1.4% 95.7%, 1.3% 95.5%, 1.3% 95.3%, 1.2% 95.1%, 1.1% 94.9%, 1% 94.7%, 0.9% 94.5%, 0.9% 94.3%, 0.8% 94%, 0.8% 93.8%, 0.7% 93.5%, 0.6% 93.3%, 0.6% 93%, 0.5% 92.7%, 0.5% 92.4%, 0.4% 92.1%, 0.4% 91.7%, 0.3% 91.4%, 0.3% 91%, 0.3% 90.6%, 0.2% 90.2%, 0.2% 89.7%, 0.2% 89.3%, 0.1% 88.8%, 0.1% 88.2%, 0.1% 87.6%, 0.1% 86.9%, 0.1% 86.2%, 0% 85.3%, 0% 84.4%, 0% 83.2%, 0% 81.8%, 0% 79.8%, 0% 76.8%, 0% 50.2%, 0% 23.2%, 0% 20.2%, 0% 18.2%, 0% 16.8%, 0% 15.6%, 0% 14.7%, 0.1% 13.8%, 0.1% 13.1%, 0.1% 12.4%, 0.1% 11.8%, 0.1% 11.2%, 0.2% 10.7%, 0.2% 10.3%, 0.2% 9.8%, 0.3% 9.4%, 0.3% 9%, 0.3% 8.6%, 0.4% 8.3%, 0.4% 7.9%, 0.5% 7.6%, 0.5% 7.3%, 0.6% 7%, 0.6% 6.7%, 0.7% 6.5%, 0.8% 6.2%, 0.8% 6%, 0.9% 5.7%, 0.9% 5.5%, 1% 5.3%, 1.1% 5.1%, 1.2% 4.9%, 1.3% 4.7%, 1.3% 4.5%, 1.4% 4.3%, 1.5% 4.1%, 1.6% 3.9%, 1.7% 3.8%, 1.8% 3.6%, 1.9% 3.4%, 2% 3.3%, 2.1% 3.1%, 2.2% 3%, 2.3% 2.9%, 2.5% 2.7%, 2.6% 2.6%, 2.7% 2.5%, 2.9% 2.3%, 3% 2.2%, 3.1% 2.1%, 3.3% 2%, 3.4% 1.9%, 3.6% 1.8%, 3.8% 1.7%, 3.9% 1.6%, 4.1% 1.5%, 4.3% 1.4%, 4.5% 1.3%, 4.7% 1.3%, 4.9% 1.2%, 5.1% 1.1%, 5.3% 1%, 5.5% 0.9%, 5.7% 0.9%, 6% 0.8%, 6.2% 0.8%, 6.5% 0.7%, 6.7% 0.6%, 7% 0.6%, 7.3% 0.5%, 7.6% 0.5%, 7.9% 0.4%, 8.3% 0.4%, 8.6% 0.3%, 9% 0.3%, 9.4% 0.3%, 9.8% 0.2%, 10.3% 0.2%, 10.7% 0.2%, 11.2% 0.1%, 11.8% 0.1%, 12.4% 0.1%, 13.1% 0.1%, 13.8% 0.1%, 14.7% 0%, 15.6% 0%, 16.8% 0%, 18.2% 0%, 20.2% 0%, 23.2% 0%, 49.8% 0%, 76.8% 0%, 79.8% 0%, 81.8% 0%, 83.2% 0%, 84.4% 0%, 85.3% 0%, 86.2% 0.1%, 86.9% 0.1%, 87.6% 0.1%, 88.2% 0.1%, 88.8% 0.1%, 89.3% 0.2%, 89.7% 0.2%, 90.2% 0.2%, 90.6% 0.3%, 91% 0.3%, 91.4% 0.3%, 91.7% 0.4%, 92.1% 0.4%, 92.4% 0.5%, 92.7% 0.5%, 93% 0.6%, 93.3% 0.6%, 93.5% 0.7%, 93.8% 0.8%, 94% 0.8%, 94.3% 0.9%, 94.5% 0.9%, 94.7% 1%, 94.9% 1.1%, 95.1% 1.2%, 95.3% 1.3%, 95.5% 1.3%, 95.7% 1.4%, 95.9% 1.5%, 96.1% 1.6%, 96.2% 1.7%, 96.4% 1.8%, 96.6% 1.9%, 96.7% 2%, 96.9% 2.1%, 97% 2.2%, 97.1% 2.3%, 97.3% 2.5%, 97.4% 2.6%, 97.5% 2.7%, 97.7% 2.9%, 97.8% 3%, 97.9% 3.1%, 98% 3.3%, 98.1% 3.4%, 98.2% 3.6%, 98.3% 3.8%, 98.4% 3.9%, 98.5% 4.1%, 98.6% 4.3%, 98.7% 4.5%, 98.7% 4.7%, 98.8% 4.9%, 98.9% 5.1%, 99% 5.3%, 99.1% 5.5%, 99.1% 5.7%, 99.2% 6%, 99.2% 6.2%, 99.3% 6.5%, 99.4% 6.7%, 99.4% 7%, 99.5% 7.3%, 99.5% 7.6%, 99.6% 7.9%, 99.6% 8.3%, 99.7% 8.6%, 99.7% 9%, 99.7% 9.4%, 99.8% 9.8%, 99.8% 10.3%, 99.8% 10.7%, 99.9% 11.2%, 99.9% 11.8%, 99.9% 12.4%, 99.9% 13.1%, 99.9% 13.8%, 100% 14.7%, 100% 15.6%, 100% 16.8%, 100% 18.2%, 100% 20.2%, 100% 23.2%); -} -.largeArtworkWrapper .squircleArtwork { - width: 208px; - border-radius: 15px; - clip-path: polygon(100% 50%, 100% 78%, 100% 81%, 100% 82.8%, 100% 84.2%, 100% 85.3%, 100% 86.2%, 99.9% 87%, 99.9% 87.7%, 99.9% 88.4%, 99.9% 88.9%, 99.9% 89.5%, 99.8% 90%, 99.8% 90.4%, 99.8% 90.8%, 99.8% 91.2%, 99.7% 91.6%, 99.7% 91.9%, 99.6% 92.3%, 99.6% 92.6%, 99.6% 92.9%, 99.5% 93.2%, 99.5% 93.5%, 99.4% 93.7%, 99.4% 94%, 99.3% 94.2%, 99.2% 94.4%, 99.2% 94.7%, 99.1% 94.9%, 99.1% 95.1%, 99% 95.3%, 98.9% 95.5%, 98.8% 95.7%, 98.8% 95.8%, 98.7% 96%, 98.6% 96.2%, 98.5% 96.3%, 98.4% 96.5%, 98.3% 96.7%, 98.2% 96.8%, 98.1% 96.9%, 98% 97.1%, 97.9% 97.2%, 97.8% 97.3%, 97.7% 97.5%, 97.6% 97.6%, 97.5% 97.7%, 97.3% 97.8%, 97.2% 97.9%, 97.1% 98%, 96.9% 98.1%, 96.8% 98.2%, 96.7% 98.3%, 96.5% 98.4%, 96.3% 98.5%, 96.2% 98.6%, 96% 98.7%, 95.8% 98.8%, 95.7% 98.8%, 95.5% 98.9%, 95.3% 99%, 95.1% 99.1%, 94.9% 99.1%, 94.7% 99.2%, 94.4% 99.2%, 94.2% 99.3%, 94% 99.4%, 93.7% 99.4%, 93.5% 99.5%, 93.2% 99.5%, 92.9% 99.6%, 92.6% 99.6%, 92.3% 99.6%, 91.9% 99.7%, 91.6% 99.7%, 91.2% 99.8%, 90.8% 99.8%, 90.4% 99.8%, 90% 99.8%, 89.5% 99.9%, 88.9% 99.9%, 88.4% 99.9%, 87.7% 99.9%, 87% 99.9%, 86.2% 100%, 85.3% 100%, 84.2% 100%, 82.8% 100%, 81% 100%, 78% 100%, 50.2% 100%, 22% 100%, 19% 100%, 17.2% 100%, 15.8% 100%, 14.7% 100%, 13.8% 100%, 13% 99.9%, 12.3% 99.9%, 11.6% 99.9%, 11.1% 99.9%, 10.5% 99.9%, 10% 99.8%, 9.6% 99.8%, 9.2% 99.8%, 8.8% 99.8%, 8.4% 99.7%, 8.1% 99.7%, 7.7% 99.6%, 7.4% 99.6%, 7.1% 99.6%, 6.8% 99.5%, 6.5% 99.5%, 6.3% 99.4%, 6% 99.4%, 5.8% 99.3%, 5.6% 99.2%, 5.3% 99.2%, 5.1% 99.1%, 4.9% 99.1%, 4.7% 99%, 4.5% 98.9%, 4.3% 98.8%, 4.2% 98.8%, 4% 98.7%, 3.8% 98.6%, 3.7% 98.5%, 3.5% 98.4%, 3.3% 98.3%, 3.2% 98.2%, 3.1% 98.1%, 2.9% 98%, 2.8% 97.9%, 2.7% 97.8%, 2.5% 97.7%, 2.4% 97.6%, 2.3% 97.5%, 2.2% 97.3%, 2.1% 97.2%, 2% 97.1%, 1.9% 96.9%, 1.8% 96.8%, 1.7% 96.7%, 1.6% 96.5%, 1.5% 96.3%, 1.4% 96.2%, 1.3% 96%, 1.2% 95.8%, 1.2% 95.7%, 1.1% 95.5%, 1% 95.3%, 0.9% 95.1%, 0.9% 94.9%, 0.8% 94.7%, 0.8% 94.4%, 0.7% 94.2%, 0.6% 94%, 0.6% 93.7%, 0.5% 93.5%, 0.5% 93.2%, 0.4% 92.9%, 0.4% 92.6%, 0.4% 92.3%, 0.3% 91.9%, 0.3% 91.6%, 0.2% 91.2%, 0.2% 90.8%, 0.2% 90.4%, 0.2% 90%, 0.1% 89.5%, 0.1% 88.9%, 0.1% 88.4%, 0.1% 87.7%, 0.1% 87%, 0% 86.2%, 0% 85.3%, 0% 84.2%, 0% 82.8%, 0% 81%, 0% 78%, 0% 50.3%, 0% 22%, 0% 19%, 0% 17.2%, 0% 15.8%, 0% 14.7%, 0% 13.8%, 0.1% 13%, 0.1% 12.3%, 0.1% 11.6%, 0.1% 11.1%, 0.1% 10.5%, 0.2% 10%, 0.2% 9.6%, 0.2% 9.2%, 0.2% 8.8%, 0.3% 8.4%, 0.3% 8.1%, 0.4% 7.7%, 0.4% 7.4%, 0.4% 7.1%, 0.5% 6.8%, 0.5% 6.5%, 0.6% 6.3%, 0.6% 6%, 0.7% 5.8%, 0.8% 5.6%, 0.8% 5.3%, 0.9% 5.1%, 0.9% 4.9%, 1% 4.7%, 1.1% 4.5%, 1.2% 4.3%, 1.2% 4.2%, 1.3% 4%, 1.4% 3.8%, 1.5% 3.7%, 1.6% 3.5%, 1.7% 3.3%, 1.8% 3.2%, 1.9% 3.1%, 2% 2.9%, 2.1% 2.8%, 2.2% 2.7%, 2.3% 2.5%, 2.4% 2.4%, 2.5% 2.3%, 2.7% 2.2%, 2.8% 2.1%, 2.9% 2%, 3.1% 1.9%, 3.2% 1.8%, 3.3% 1.7%, 3.5% 1.6%, 3.7% 1.5%, 3.8% 1.4%, 4% 1.3%, 4.2% 1.2%, 4.3% 1.2%, 4.5% 1.1%, 4.7% 1%, 4.9% 0.9%, 5.1% 0.9%, 5.3% 0.8%, 5.6% 0.8%, 5.8% 0.7%, 6% 0.6%, 6.3% 0.6%, 6.5% 0.5%, 6.8% 0.5%, 7.1% 0.4%, 7.4% 0.4%, 7.7% 0.4%, 8.1% 0.3%, 8.4% 0.3%, 8.8% 0.2%, 9.2% 0.2%, 9.6% 0.2%, 10% 0.2%, 10.5% 0.1%, 11.1% 0.1%, 11.6% 0.1%, 12.3% 0.1%, 13% 0.1%, 13.8% 0%, 14.7% 0%, 15.8% 0%, 17.2% 0%, 19% 0%, 22% 0%, 49.7% 0%, 78% 0%, 81% 0%, 82.8% 0%, 84.2% 0%, 85.3% 0%, 86.2% 0%, 87% 0.1%, 87.7% 0.1%, 88.4% 0.1%, 88.9% 0.1%, 89.5% 0.1%, 90% 0.2%, 90.4% 0.2%, 90.8% 0.2%, 91.2% 0.2%, 91.6% 0.3%, 91.9% 0.3%, 92.3% 0.4%, 92.6% 0.4%, 92.9% 0.4%, 93.2% 0.5%, 93.5% 0.5%, 93.7% 0.6%, 94% 0.6%, 94.2% 0.7%, 94.4% 0.8%, 94.7% 0.8%, 94.9% 0.9%, 95.1% 0.9%, 95.3% 1%, 95.5% 1.1%, 95.7% 1.2%, 95.8% 1.2%, 96% 1.3%, 96.2% 1.4%, 96.3% 1.5%, 96.5% 1.6%, 96.7% 1.7%, 96.8% 1.8%, 96.9% 1.9%, 97.1% 2%, 97.2% 2.1%, 97.3% 2.2%, 97.5% 2.3%, 97.6% 2.4%, 97.7% 2.5%, 97.8% 2.7%, 97.9% 2.8%, 98% 2.9%, 98.1% 3.1%, 98.2% 3.2%, 98.3% 3.3%, 98.4% 3.5%, 98.5% 3.7%, 98.6% 3.8%, 98.7% 4%, 98.8% 4.2%, 98.8% 4.3%, 98.9% 4.5%, 99% 4.7%, 99.1% 4.9%, 99.1% 5.1%, 99.2% 5.3%, 99.2% 5.6%, 99.3% 5.8%, 99.4% 6%, 99.4% 6.3%, 99.5% 6.5%, 99.5% 6.8%, 99.6% 7.1%, 99.6% 7.4%, 99.6% 7.7%, 99.7% 8.1%, 99.7% 8.4%, 99.8% 8.8%, 99.8% 9.2%, 99.8% 9.6%, 99.8% 10%, 99.9% 10.5%, 99.9% 11.1%, 99.9% 11.6%, 99.9% 12.3%, 99.9% 13%, 100% 13.8%, 100% 14.7%, 100% 15.8%, 100% 17.2%, 100% 19%, 100% 22%); -}*/ -/* End Squircle Code */ diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.tsx b/apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.tsx deleted file mode 100644 index b13182685f2..00000000000 --- a/apps/audius-client/packages/web/src/components/nav/desktop/CurrentlyPlaying.tsx +++ /dev/null @@ -1,124 +0,0 @@ -import { memo, useRef, MouseEvent } from 'react' - -import { Color, CoverArtSizes, SquareSizes, Nullable } from '@audius/common' -import cn from 'classnames' - -import { ReactComponent as IconVisualizer } from 'assets/img/iconVisualizer.svg' -import Draggable from 'components/dragndrop/Draggable' -import DynamicImage from 'components/dynamic-image/DynamicImage' -import { useTrackCoverArt } from 'hooks/useTrackCoverArt' - -import styles from './CurrentlyPlaying.module.css' - -type CurrentlyPlayingProps = { - isOwner: boolean - isUnlisted: boolean - trackId: Nullable - trackTitle: Nullable - coverArtSizes: Nullable - coverArtColor: Nullable - artworkLink?: Nullable - draggableLink: Nullable - onClick: () => void - onShowVisualizer: (e: MouseEvent) => void -} - -type ArtworkStyle = { - backgroundImage?: string - backgroundColor?: string -} - -type WrapperStyle = { - boxShadow: string -} - -const CurrentlyPlaying = ({ - isOwner, - isUnlisted, - trackId, - trackTitle, - coverArtSizes, - coverArtColor, - artworkLink, - draggableLink, - onClick, - onShowVisualizer -}: CurrentlyPlayingProps) => { - const previousTrackId = useRef(0) - - const image = useTrackCoverArt( - trackId, - coverArtSizes, - SquareSizes.SIZE_480_BY_480, - '' - ) - - let newTrack = false - if (trackId && trackId !== previousTrackId.current) { - newTrack = true - previousTrackId.current = trackId - } - - let wrapperStyle: WrapperStyle - let artworkStyle: ArtworkStyle - if (trackId) { - const artworkAverageColor = coverArtColor ?? { r: 13, g: 16, b: 18 } - wrapperStyle = { - boxShadow: `0 1px 20px -3px rgba( - ${artworkAverageColor.r}, - ${artworkAverageColor.g}, - ${artworkAverageColor.b} - , 0.7)` - } - artworkStyle = {} - } else { - wrapperStyle = { - boxShadow: '0 1px 15px -2px var(--currently-playing-default-shadow)' - } - artworkStyle = { - backgroundColor: 'var(--neutral-light-8)' - } - } - - return ( - -
- -
-
onShowVisualizer(e)} - className={styles.visualizerIconContainer} - > - -
-
- -
- - ) -} - -export default memo(CurrentlyPlaying) diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/NavColumn.tsx b/apps/audius-client/packages/web/src/components/nav/desktop/NavColumn.tsx index 9107c5afafd..8fcf7023042 100644 --- a/apps/audius-client/packages/web/src/components/nav/desktop/NavColumn.tsx +++ b/apps/audius-client/packages/web/src/components/nav/desktop/NavColumn.tsx @@ -1,10 +1,4 @@ -import { - MouseEvent, - useCallback, - useRef, - useState, - MouseEventHandler -} from 'react' +import { MouseEvent, useCallback, useRef, useState } from 'react' import { CreatePlaylistSource, @@ -14,7 +8,6 @@ import { PlaylistLibrary as PlaylistLibraryType, Status, accountSelectors, - averageColorSelectors, cacheCollectionsActions, notificationsSelectors, collectionsSocialActions, @@ -22,8 +15,6 @@ import { createPlaylistModalUISelectors, createPlaylistModalUIActions as createPlaylistModalActions, imageProfilePicEmpty, - playerSelectors, - queueSelectors, playlistLibraryActions, playlistLibraryHelpers, uploadActions, @@ -36,12 +27,7 @@ import { ResizeObserver } from '@juggle/resize-observer' import cn from 'classnames' import { push as pushRoute } from 'connected-react-router' import { connect } from 'react-redux' -import { - NavLink, - RouteComponentProps, - useHistory, - withRouter -} from 'react-router-dom' +import { NavLink, RouteComponentProps, withRouter } from 'react-router-dom' import useMeasure from 'react-use-measure' import { Dispatch } from 'redux' @@ -52,7 +38,6 @@ import { PlaylistFormFields } from 'components/create-playlist/PlaylistForm' import { DragAutoscroller } from 'components/drag-autoscroller/DragAutoscroller' import Droppable from 'components/dragndrop/Droppable' import DynamicImage from 'components/dynamic-image/DynamicImage' -import CurrentlyPlaying from 'components/nav/desktop/CurrentlyPlaying' import NavButton from 'components/nav/desktop/NavButton' import RouteNav from 'components/nav/desktop/RouteNav' import Pill from 'components/pill/Pill' @@ -60,8 +45,6 @@ import ConnectedProfileCompletionPane from 'components/profile-progress/Connecte import Tooltip from 'components/tooltip/Tooltip' import UserBadges from 'components/user-badges/UserBadges' import { useUserProfilePicture } from 'hooks/useUserProfilePicture' -import { NO_VISUALIZER_ROUTES } from 'pages/visualizer/Visualizer' -import { openVisualizer } from 'pages/visualizer/store/slice' import { getNotificationPanelIsOpen } from 'store/application/ui/notifications/notificationsUISelectors' import { openNotificationPanel, @@ -73,7 +56,6 @@ import { DASHBOARD_PAGE, EXPLORE_PAGE, FEED_PAGE, - fullTrackPage, HISTORY_PAGE, playlistPage, profilePage, @@ -86,21 +68,19 @@ import { getTempPlaylistId } from 'utils/tempPlaylistId' import NavAudio from './NavAudio' import styles from './NavColumn.module.css' import NavHeader from './NavHeader' +import { NowPlayingArtworkTile } from './NowPlayingArtworkTile' import PlaylistLibrary from './PlaylistLibrary' const { updatedPlaylistViewed } = playlistUpdatesActions const { resetState: resetUploadState } = uploadActions const { update: updatePlaylistLibrary } = playlistLibraryActions const { addFolderToLibrary, constructPlaylistFolder } = playlistLibraryHelpers -const { makeGetCurrent } = queueSelectors -const { makeGetCurrent: makeGetCurrentPlayer } = playerSelectors const { getHideFolderTab, getIsOpen } = createPlaylistModalUISelectors const { saveTrack } = tracksSocialActions const { saveCollection } = collectionsSocialActions const { addTrackToPlaylist, createPlaylist } = cacheCollectionsActions const { getNotificationUnviewedCount } = notificationsSelectors const { markAllAsViewed } = notificationsActions -const getDominantColorsByTrack = averageColorSelectors.getDominantColorsByTrack const { getAccountStatus, getAccountUser, getPlaylistLibrary } = accountSelectors @@ -132,8 +112,6 @@ const NavColumn = ({ showCreatePlaylistModal, hideCreatePlaylistModalFolderTab, updatePlaylistLibrary, - currentQueueItem, - currentPlayerItem, dragging: { dragging, kind, isOwner: draggingIsOwner }, saveTrack, saveCollection, @@ -145,13 +123,9 @@ const NavColumn = ({ goToSignUp: routeToSignup, goToSignIn, goToUpload, - showVisualizer, - dominantColors, markAllNotificationsAsViewed }: NavColumnProps) => { const record = useRecord() - const { location } = useHistory() - const { pathname } = location const [navBodyContainerMeasureRef, navBodyContainerBoundaries] = useMeasure({ polyfill: ResizeObserver }) @@ -267,33 +241,6 @@ const NavColumn = ({ } }, []) - /** @param {bool} full whether or not to get the full page link */ - const getTrackPageLink = useCallback( - (full = false) => { - if (currentQueueItem && currentQueueItem.user && currentQueueItem.track) { - return full - ? fullTrackPage(currentQueueItem.track.permalink) - : currentQueueItem.track.permalink - } - return null - }, - [currentQueueItem] - ) - - const onClickArtwork = useCallback(() => { - const route = getTrackPageLink() - if (route) goToRoute(route) - }, [goToRoute, getTrackPageLink]) - - const onShowVisualizer: MouseEventHandler = useCallback( - (e) => { - if (NO_VISUALIZER_ROUTES.has(pathname)) return - showVisualizer() - e.stopPropagation() - }, - [showVisualizer, pathname] - ) - const onClickUpload = useCallback(() => { if (!upload.uploading) resetUploadState() goToUpload() @@ -527,40 +474,14 @@ const NavColumn = ({ onCreateAccount={onClickNavButton} onUpload={onClickUpload} /> - + ) } -const getCurrentQueueItem = makeGetCurrent() -const getCurrentPlayerItem = makeGetCurrentPlayer() - const mapStateToProps = (state: AppState) => { - const currentQueueItem = getCurrentQueueItem(state) - const currentPlayerItem = getCurrentPlayerItem(state) return { - currentQueueItem, - currentPlayerItem, account: getAccountUser(state), accountStatus: getAccountStatus(state), dragging: getIsDragging(state), @@ -569,10 +490,7 @@ const mapStateToProps = (state: AppState) => { upload: state.upload, library: getPlaylistLibrary(state), showCreatePlaylistModal: getIsOpen(state), - hideCreatePlaylistModalFolderTab: getHideFolderTab(state), - dominantColors: getDominantColorsByTrack(state, { - track: currentQueueItem.track - }) + hideCreatePlaylistModalFolderTab: getHideFolderTab(state) } } @@ -601,7 +519,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({ goToDashboard: () => dispatch(pushRoute(DASHBOARD_PAGE)), goToSignUp: () => dispatch(signOnActions.openSignOn(/** signIn */ false)), goToSignIn: () => dispatch(signOnActions.openSignOn(/** signIn */ true)), - showVisualizer: () => dispatch(openVisualizer()), markAllNotificationsAsViewed: () => dispatch(markAllAsViewed()) }) diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.module.css b/apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.module.css new file mode 100644 index 00000000000..6e1a3c654e2 --- /dev/null +++ b/apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.module.css @@ -0,0 +1,40 @@ +.root { + margin: 20px auto 0; + height: 208px; + width: 208px; + border: 2px solid var(--currently-playing-border); + box-shadow: 0 1px 15px -2px var(--currently-playing-default-shadow); + border-radius: 15px; + overflow: hidden; + transition: opacity 0.07s ease-in-out; + cursor: pointer; +} + +.root:hover { + opacity: 0.96; +} + +.visualizerIconButton { + position: absolute; + bottom: 5px; + right: 5px; + display: flex; + align-items: center; + justify-content: center; + padding: 5px; + background-color: var(--static-white); + border-radius: 50%; + cursor: pointer; + transition: transform 0.2s; +} +.visualizerIconButton:hover { + transform: scale(1.1); +} +.visualizerIconButton:hover path { + fill: var(--primary); +} + +.visualizerIcon { + width: 22px; + height: 22px; +} diff --git a/apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx b/apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx new file mode 100644 index 00000000000..3609d2591e7 --- /dev/null +++ b/apps/audius-client/packages/web/src/components/nav/desktop/NowPlayingArtworkTile.tsx @@ -0,0 +1,143 @@ +import { CSSProperties, MouseEvent, ReactNode, useCallback } from 'react' + +import { + SquareSizes, + playerSelectors, + cacheTracksSelectors, + CommonState, + accountSelectors, + averageColorSelectors +} from '@audius/common' +import { IconButton } from '@audius/stems' +import { useDispatch, useSelector } from 'react-redux' +import { Link, useHistory } from 'react-router-dom' +import { animated, useSpring } from 'react-spring/web' + +import { ReactComponent as IconVisualizer } from 'assets/img/iconVisualizer.svg' +import Draggable from 'components/dragndrop/Draggable' +import DynamicImage from 'components/dynamic-image/DynamicImage' +import { useTrackCoverArt } from 'hooks/useTrackCoverArt' +import { NO_VISUALIZER_ROUTES } from 'pages/visualizer/Visualizer' +import { openVisualizer } from 'pages/visualizer/store/slice' + +import styles from './NowPlayingArtworkTile.module.css' + +const { getTrackId, getCollectible } = playerSelectors +const { getTrack } = cacheTracksSelectors +const { getUserId } = accountSelectors +const { getDominantColorsByTrack } = averageColorSelectors + +const messages = { + viewTrack: 'View currently playing track', + showVisualizer: 'Show Visualizer' +} + +type FadeInUpProps = { + children: ReactNode + style: CSSProperties +} + +const FadeInUp = (props: FadeInUpProps) => { + const { children, style } = props + + const slideInProps = useSpring({ + from: { opacity: 0, height: 0 }, + to: { opacity: 1, height: 208 } + }) + + return ( + + {children} + + ) +} + +export const NowPlayingArtworkTile = () => { + const dispatch = useDispatch() + const { location } = useHistory() + const { pathname } = location + + const trackId = useSelector(getTrackId) + const trackTitle = useSelector( + (state: CommonState) => getTrack(state, { id: trackId })?.title + ) + + const isOwner = useSelector((state: CommonState) => { + const ownerId = getTrack(state, { id: trackId })?.owner_id + const accountId = getUserId(state) + return ownerId && accountId && ownerId === accountId + }) + + const permalink = useSelector((state: CommonState) => { + return getTrack(state, { id: trackId })?.permalink + }) + + const collectibleImage = useSelector((state: CommonState) => { + const collectible = getCollectible(state) + if (collectible) { + const { imageUrl, frameUrl, gifUrl } = collectible + return imageUrl ?? frameUrl ?? gifUrl + } + }) + + const coverArtSizes = useSelector((state: CommonState) => { + return getTrack(state, { id: trackId })?._cover_art_sizes ?? null + }) + + const trackCoverArtImage = useTrackCoverArt( + trackId, + coverArtSizes, + SquareSizes.SIZE_480_BY_480, + '' + ) + + const handleShowVisualizer = useCallback( + (event: MouseEvent) => { + if (NO_VISUALIZER_ROUTES.has(pathname)) return + event.preventDefault() + dispatch(openVisualizer()) + }, + [pathname, dispatch] + ) + + const coverArtColor = useSelector((state: CommonState) => { + const dominantTrackColors = getDominantColorsByTrack(state, { + track: getTrack(state, { id: trackId }) + }) + + const coverArtColorMap = dominantTrackColors?.[0] ?? { r: 13, g: 16, b: 18 } + return `0 1px 20px -3px rgba( + ${coverArtColorMap.r}, + ${coverArtColorMap.g}, + ${coverArtColorMap.b} + , 0.7)` + }) + + if (!permalink) return null + + return ( + + + + + } + /> + + + + + ) +}