app: Cleanup animations on the now playing overlay

evanpurkhiser · Oct 30, 2020 · 0fb2b61 · 0fb2b61
1 parent 7cfe350
commit 0fb2b61
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/src/overlay/overlays/taggedNowPlaying/Track.tsx b/src/overlay/overlays/taggedNowPlaying/Track.tsx
@@ -47,9 +47,9 @@ const MissingArtwork = styled(
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #000;
+  background: #28272b;
   color: #aaa;
-  opacity: 0.5;
+  opacity: 1;
 `;
 
 type ArtworkProps = {alignRight?: boolean; animateIn: boolean} & (
@@ -69,12 +69,17 @@ const BaseArtwork = ({animateIn, alignRight, ...p}: ArtworkProps) => {
     animate: {
       clipPath: 'inset(0% 0% 0% 0%)',
       transitionEnd: {zIndex: 1},
+      transition: {
+        type: 'spring',
+        stiffness: 500,
+        damping: 100,
+      },
     },
     exit: {
       clipPath: 'inset(0% 0% 100% 0%)',
       transition: {
         type: 'spring',
-        stiffness: 700,
+        stiffness: 200,
         damping: 100,
       },
     },
@@ -127,6 +132,7 @@ const Title = styled(Text)`
 `;
 
 Title.defaultProps = {
+  ...Text.defaultProps,
   className: 'metadata-tile',
 };
 
@@ -137,6 +143,7 @@ const Artist = styled(Text)`
 `;
 
 Artist.defaultProps = {
+  ...Text.defaultProps,
   className: 'metadata-artist',
 };
 
@@ -195,34 +202,36 @@ const NoAttributes = styled(p => (
   color: rgba(255, 255, 255, 0.6);
 `;
 
-let MetadataWrapper = styled(motion.div)<{alignRight?: boolean}>`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: ${p => (p.alignRight ? 'flex-end' : 'flex-start')};
-`;
-
-MetadataWrapper.defaultProps = {
-  className: 'track-metadata',
-  variants: {
+let MetadataWrapper = styled((p: OrientedMotionDivProps) => {
+  const variants = {
     initial: {
       clipPath: 'inset(0% 100% 0% 0%)',
     },
     animate: {
       clipPath: 'inset(0% 0% 0% 0%)',
       transition: {
         staggerChildren: 0.2,
+        delayChildren: 0.15,
       },
     },
     exit: {
-      clipPath: 'inset(0% 100% 0% 0%)',
+      clipPath: p.alignRight ? 'inset(0% 0% 0% 100%)' : 'inset(0% 100% 0% 0%)',
       transition: {
-        type: 'spring',
-        stiffness: 500,
-        damping: 90,
+        duration: 0.2,
       },
     },
-  },
+  };
+
+  return <motion.div variants={variants} {...p} />;
+})<{alignRight?: boolean}>`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: ${p => (p.alignRight ? 'flex-end' : 'flex-start')};
+`;
+
+MetadataWrapper.defaultProps = {
+  className: 'track-metadata',
 };
 
 type FullMetadataProps = OrientedMotionDivProps & {
@@ -286,8 +295,11 @@ const TrackContainer = styled(motion.div)<{alignRight?: boolean}>`
   grid-gap: 0.5rem;
   color: #fff;
   font-family: Ubuntu;
+  justify-content: ${p => (p.alignRight ? 'right' : 'left')};
   grid-template-columns: ${p =>
-    p.alignRight ? 'minmax(0, 1fr) max-content' : 'max-content minmax(0, 1fr)'};
+    p.alignRight
+      ? 'minmax(0, max-content) max-content'
+      : 'max-content minmax(0, max-content)'};
 
   > *:nth-child(1) {
     grid-row: 1;

diff --git a/src/overlay/overlays/taggedNowPlaying/index.tsx b/src/overlay/overlays/taggedNowPlaying/index.tsx
@@ -97,9 +97,10 @@ const Overlay: React.FC<Props> = observer(({config, history}) =>
 );
 
 const RecentWrapper = styled('div')`
-  display: grid;
-  grid-gap: 14px;
+  display: flex;
+  flex-direction: column;
   margin-top: 2rem;
+  gap: 14px;
 `;
 
 const CurrentWrapper = styled('div')`
@@ -190,6 +191,7 @@ const ConfigInterface: React.FC<{config: Config}> = observer(({config}) => (
     </Field>
     <Field
       size="full"
+      name="Additional Tags"
       description="Select the tags you want to show on the bottom row of the now playing detail. Emptying the list will stop any attributes from showing"
     >
       <Select
@@ -205,7 +207,7 @@ const ConfigInterface: React.FC<{config: Config}> = observer(({config}) => (
 
 const descriptor: OverlayDescriptor<TaggedNowPlaying> = {
   type: 'taggedNowPlaying',
-  name: 'Now playing with tags',
+  name: 'Now Playing with Tags',
   component: HistoryOverlay,
   example: Example,
   configInterface: ConfigInterface,