Improve web highlight effect

Author: jcraigk

app/javascript/components/Tracks.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useOutletContext, Link } from "react-router-dom";
 import { formatDurationTrack, formatDurationShow, formatDate, truncate } from "./helpers/utils";
 import TagBadges from "./controls/TagBadges";
@@ -10,8 +10,32 @@ import CoverArt from "./CoverArt";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faScissors } from "@fortawesome/free-solid-svg-icons";
 
+const SHIMMER_GRADIENT = 'linear-gradient(90deg, transparent 0%, transparent 20%, rgba(171, 217, 255, 0.45) 45%, rgba(171, 217, 255, 0.45) 55%, transparent 80%, transparent 100%)';
+const FOCUS_BOX_SHADOW = 'inset 0 -3px 0 #ABD9FF';
+
 const Tracks = ({ tracks, viewStyle, numbering = false, omitSecondary = false, highlight, trackRefs, trackSlug }) => {
-  const { playTrack, activeTrack, setCustomPlaylist  } = useOutletContext();
+  const { playTrack, activeTrack, setCustomPlaylist, isPlaying } = useOutletContext();
+  const [isDarkMode, setIsDarkMode] = useState(
+    typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e) => setIsDarkMode(e.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  // Override DarkReader's color modifications, matching the play button's approach
+  useEffect(() => {
+    if (!isDarkMode) return;
+    document.querySelectorAll('.track-shimmer').forEach(el => {
+      el.style.setProperty('background', SHIMMER_GRADIENT, 'important');
+    });
+    document.querySelectorAll('.track-item.focus').forEach(el => {
+      el.style.setProperty('box-shadow', FOCUS_BOX_SHADOW, 'important');
+    });
+  }, [isDarkMode, activeTrack?.id, trackSlug, isPlaying]);
 
   const handleTrackClick = (track) => {
     if (track.audio_status === 'missing') return;
@@ -49,20 +73,22 @@ const Tracks = ({ tracks, viewStyle, numbering = false, omitSecondary = false, h
     const { actualDuration, isExcerpt } = calculateTrackDetails(track);
     const hasMissingAudio = track.audio_status === 'missing';
     const shouldFocus = viewStyle === "show" && track.slug === trackSlug;
+    const isActive = track.id === activeTrack?.id;
 
     return (
       <li
         key={track.id}
         className={[
           "list-item",
           viewStyle === "show" ? "track-item" : "",
-          track.id === activeTrack?.id ? "active-item" : "",
+          isActive ? "active-item" : "",
           shouldFocus ? "focus" : "",
           hasMissingAudio ? "no-audio" : ""
         ].filter(Boolean).join(" ")}
         onClick={() => handleTrackClick(track)}
         ref={trackRefs ? (el) => (trackRefs.current[track.position - 1] = el) : null}
       >
+        {isActive && isPlaying && <span className="track-shimmer" />}
         <div className="main-row">
           {numbering && <span className="leftside-numbering">#{index + 1}</span>}
           <span className="leftside-primary">

app/javascript/components/controls/Player.jsx

@@ -12,7 +12,7 @@ import TrackInfo from "./TrackInfo";
 import ProgressBar from "./ProgressBar";
 import { useFeedback } from "../contexts/FeedbackContext";
 
-const Player = ({ activePlaylist, activeTrack, setActiveTrack, customPlaylist, openAppModal, shouldAutoplay, setShouldAutoplay }) => {
+const Player = ({ activePlaylist, activeTrack, setActiveTrack, customPlaylist, openAppModal, shouldAutoplay, setShouldAutoplay, onPlayingChange }) => {
   const location = useLocation();
   const [isPlayerCollapsed, setIsPlayerCollapsed] = useState(false);
   const [hasPlayedInitially, setHasPlayedInitially] = useState(false);
@@ -49,6 +49,10 @@ const Player = ({ activePlaylist, activeTrack, setActiveTrack, customPlaylist, o
     handleScrubberClick,
   } = useGaplessPlayer(activePlaylist, activeTrack, setActiveTrack, setNotice, setAlert, hasPlayedInitially ? null : initialStartTime, shouldAutoplay, setShouldAutoplay);
 
+  useEffect(() => {
+    if (onPlayingChange) onPlayingChange(isPlaying);
+  }, [isPlaying, onPlayingChange]);
+
   const togglePlayerPosition = () => {
     setIsPlayerCollapsed(!isPlayerCollapsed);
   };

app/javascript/components/layout/Layout.jsx

@@ -31,6 +31,7 @@ const LayoutContent = ({ props, navigate }) => {
   const [viewMode, setViewMode] = useState("grid");
   const [sortOption, setSortOption] = useState("desc");
   const [shouldAutoplay, setShouldAutoplay] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
   const { setNotice, setAlert } = useFeedback();
   const { isFilterLoading } = useAudioFilter();
 
@@ -156,7 +157,8 @@ const LayoutContent = ({ props, navigate }) => {
             viewMode,
             setViewMode,
             sortOption,
-            setSortOption
+            setSortOption,
+            isPlaying
           }}
         />
       </main>
@@ -168,6 +170,7 @@ const LayoutContent = ({ props, navigate }) => {
         openAppModal={openAppModal}
         shouldAutoplay={shouldAutoplay}
         setShouldAutoplay={setShouldAutoplay}
+        onPlayingChange={setIsPlaying}
       />
       <AppModal
         isOpen={isAppModalOpen}

app/javascript/stylesheets/_content.scss

@@ -274,8 +274,27 @@ main {
   background-repeat: no-repeat;
 
   &.active-item {
-    animation: pulse 3s infinite ease-in-out;
-    background-image: none !important;
+    overflow: hidden;
+  }
+
+  .track-shimmer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      transparent 20%,
+      rgba(171, 217, 255, 0.45) 45%,
+      rgba(171, 217, 255, 0.45) 55%,
+      transparent 80%,
+      transparent 100%
+    );
+    animation: track-shimmer 2.25s infinite linear;
+    pointer-events: none;
+    z-index: 1;
   }
 
   .cover-art {
@@ -437,7 +456,7 @@ main {
     background-size: cover;
     background-repeat: no-repeat;
 
-    &:not(:last-child):not(.focus):not(.active-item)::after {
+    &:not(:last-child):not(.focus)::after {
       content: "";
       display: block;
       position: absolute;
@@ -473,20 +492,12 @@ main {
       }
     }
 
-    &.focus {
-      animation: pulse 3s infinite ease-in-out;
-      background-image: none !important;
+    &.active-item {
+      overflow: hidden;
+    }
 
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: 0;
-        left: 1rem;
-        right: 1rem;
-        background-color: $highlight-blue;
-        height: 2px;
-      }
+    &.focus {
+      box-shadow: inset 0 -3px 0 #ABD9FF;
     }
   }
 }
@@ -632,16 +643,9 @@ main {
   }
 }
 
-@keyframes pulse {
-  0% {
-    background-color: $highlight-blue;
-  }
-  50% {
-    background-color: rgba(255, 255, 255, 0.8);
-  }
-  100% {
-    background-color: $highlight-blue;
-  }
+@keyframes track-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
 }
 
 @keyframes shimmer {