app: Add consistent classes to taggedNowPlaying overlay

evanpurkhiser · Oct 20, 2020 · 521ae32 · 521ae32 · vercel · Oct 20, 2020
1 parent e8bc95f
commit 521ae32
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/overlay/overlays/taggedNowPlaying/Track.tsx b/src/overlay/overlays/taggedNowPlaying/Track.tsx
@@ -95,6 +95,10 @@ const Artwork = styled(BaseArtwork)<ArtworkProps & {size: string}>`
   flex-shrink: 0;
 `;
 
+Artwork.defaultProps = {
+  className: 'track-artwork',
+};
+
 let Text = styled(motion.div)`
   background: rgba(0, 0, 0, 0.25);
   padding: 0 0.28em;
@@ -122,12 +126,20 @@ const Title = styled(Text)`
   margin-bottom: 0.2em;
 `;
 
+Title.defaultProps = {
+  className: 'metadata-tile',
+};
+
 const Artist = styled(Text)`
   font-size: 1.1em;
   line-height: 1.3;
   margin-bottom: 0.2em;
 `;
 
+Artist.defaultProps = {
+  className: 'metadata-artist',
+};
+
 const Attributes = styled(({alignRight, ...p}: OrientedMotionDivProps) => {
   const animation = {
     animate: {
@@ -150,6 +162,10 @@ const Attributes = styled(({alignRight, ...p}: OrientedMotionDivProps) => {
   white-space: nowrap;
 `;
 
+Attributes.defaultProps = {
+  className: 'metadata-attributes',
+};
+
 type IconProps = {
   icon: React.ComponentType<React.ComponentProps<typeof Disc>>;
   className?: string;
@@ -187,6 +203,7 @@ let MetadataWrapper = styled(motion.div)<{alignRight?: boolean}>`
 `;
 
 MetadataWrapper.defaultProps = {
+  className: 'track-metadata',
   variants: {
     initial: {
       clipPath: 'inset(0% 100% 0% 0%)',
@@ -221,7 +238,7 @@ const FullMetadata = ({track, tags, ...p}: FullMetadataProps) => (
       {tags.map(tag => {
         const {icon, getter} = tagsConfig[tag];
         const text = getter(track);
-        return <Attribute key={tag} {...{icon, text}} />;
+        return <Attribute key={tag} className={`attribute-${tag}`} {...{icon, text}} />;
       })}
       {tags.map(t => tagsConfig[t].getter(track)).join('') === '' && (
         <NoAttributes key="no-field" />

diff --git a/src/overlay/overlays/taggedNowPlaying/index.tsx b/src/overlay/overlays/taggedNowPlaying/index.tsx
@@ -64,13 +64,14 @@ const Overlay: React.FC<Props> = observer(({config, history}) =>
   history.length === 0 ? null : (
     <React.Fragment>
       <CurrentTrack
+        className="track-current"
         alignRight={config.alignRight}
         tags={config.tags}
         firstPlayed={store.mixstatus.trackHistory.length === 1}
         played={history[0]}
       />
       {config.historyCount > 0 && history.length > 1 && (
-        <RecentWrapper>
+        <RecentWrapper className="track-recents">
           <AnimatePresence>
             {history.slice(1, config.historyCount + 1).map(track => (
               <Track