@behindthemusictree/app-kit-ui 26.1.0 → 29.0.0

package/dist/genre-tree/index.d.ts

@@ -1,9 +1,9 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, ComponentProps } from 'react';
 import { z } from 'zod';
-import { GenreTreeProps, FocusChangeReason, GenreTreeNode, GenreTreeAction, GenreTreeViewMode, GenreTreeViewport, ControlsOrientation, InfoPanelSections, InfoPanelBody, WheelZoomMode } from '@behindthemusictree/genre-tree-view';
-export { ControlsOrientation, FocusChangeReason, GenreTreeAction, GenreTreeOutlineSkeleton, GenreTreeSkeleton, GenreTreeViewMode, GenreTreeViewSkeleton, GenreTreeViewSkeletonProps, GenreTreeViewport, GenreTreeWheelSkeleton } from '@behindthemusictree/genre-tree-view';
-import { TrackBase, CriteriaOverview, CriteriaPlaylistSimple, GenreUuid, ArtistSearchResult, CriteriaMinimum, RenderArtistLink } from '@behindthemusictree/app-kit/genre-tree';
+import { GenreTreeProps, FocusChangeReason, GenreTreeNode, GenreTreeAction, GenreTreeViewMode, GenreTreeViewport, InfoPanelSections, InfoPanelBody, WheelZoomMode } from '@behindthemusictree/genre-tree-view';
+export { FocusChangeReason, GenreTreeAction, GenreTreeOutlineSkeleton, GenreTreeSkeleton, GenreTreeViewMode, GenreTreeViewSkeleton, GenreTreeViewSkeletonProps, GenreTreeViewport, GenreTreeWheelSkeleton } from '@behindthemusictree/genre-tree-view';
+import { TrackBase, CriteriaOverview, GenreUuid, CriteriaPlaylistMinimum, RenderArtistLink, CriteriaPlaylistSimple, GenrePlaylistUuid, ArtistSearchResult, CriteriaMinimum } from '@behindthemusictree/app-kit/genre-tree';
 import { Scope } from '@behindthemusictree/app-kit/transport';
 
 type GenrePlaylistTracksSlots = {
@@ -21,15 +21,46 @@ type GenreDetailSlots<O extends CriteriaOverview> = {
     /** Replaces the default Essential section (e.g. "Essential songs"). */
     renderEssentialTracks?: (overview: O) => ReactNode;
 };
+type GenreDetailExtrasProps<O extends CriteriaOverview> = GenreDetailSlots<O> & GenrePlaylistTracksSlots & {
+    genreUuid: GenreUuid;
+    genrePlaylist: CriteriaPlaylistMinimum;
+    wikidataId?: string | null;
+    scope: Scope;
+    getBackendBaseUrl: () => string;
+    criteriaOverviewSchema?: z.ZodType<O, unknown>;
+    renderGenreDetailExtras?: (overview: O) => ReactNode;
+    renderArtistLink?: RenderArtistLink;
+    /** When set, the tracks list shows only this artist's songs in the genre. */
+    artist?: {
+        uuid: string;
+        name: string;
+    } | null;
+    /** genre-tree-view's Family section, placed right after the Summary. */
+    family: ReactNode;
+};
 
 /** Controlled expand state and danger-zone slot of the info panel, plus the generic overlay panel, as typed by genre-tree-view. */
 type InfoPanelCurationProps = Partial<Pick<GenreTreeProps, "renderDangerZone" | "expanded" | "onExpandedChange" | "collapsed" | "hideExpandButton" | "overlayPanel">>;
 
+/** What a play button needs of a playlist; `criteria` is only read when playing one artist's songs in the genre. */
+type PlayableGenrePlaylistInput = CriteriaPlaylistMinimum & {
+    criteria?: CriteriaPlaylistSimple["criteria"];
+};
 /** What a tree node's play button plays, and which node is the one currently playing. */
 type GenrePlaylistPlayback = {
     playingNodeId: string | null;
-    play: (genrePlaylist: CriteriaPlaylistSimple) => Promise<void>;
+    play: (genrePlaylist: PlayableGenrePlaylistInput) => Promise<void>;
+};
+type UseGenrePlaylistPlaybackOptions = {
+    scope: Scope;
+    genrePlaylists: CriteriaPlaylistSimple[];
+    /** When set, nodes play only this artist's songs in the genre's subtree instead of the whole genre playlist. */
+    artist?: {
+        uuid: string;
+        name: string;
+    } | null;
 };
+declare function useGenrePlaylistPlayback<T extends TrackBase = TrackBase>({ scope, genrePlaylists, artist, }: UseGenrePlaylistPlaybackOptions): GenrePlaylistPlayback;
 
 type GenreTreeSizeMetric = "songs" | "views";
 
@@ -54,6 +85,24 @@ type ParentChange = {
     to: GenreUuid;
 };
 
+/** Identifies the detail-panel entity whose current host route should be shared. */
+type GenreTreeShareTarget = {
+    kind: "genre";
+    /** Tree selection/route identity; distinct from the associated criteria UUID. */
+    genrePlaylistUuid: GenrePlaylistUuid;
+    name: string;
+    scope: Scope;
+    /** Preserve an active artist filter when sharing one of its genre details. */
+    artistUuid: string | null;
+} | {
+    kind: "artist";
+    uuid: string;
+    name: string;
+    scope: Scope;
+};
+/** Host applications own routing and return an absolute or relative URL for this target. */
+type GetGenreTreeShareUrl = (target: GenreTreeShareTarget) => string | null | undefined;
+
 /** Artists are searched by default; picking one opens its panel (see `artistUuid`). */
 type ArtistSearchProps = {
     artistSearch: false;
@@ -85,6 +134,10 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     onSelectedNodeIdChange?: (nodeId: string | null) => void;
     /** Mount-only seed for the pan/zoom (wheel, pop-core and stacked views), replacing the initial fit. */
     defaultViewport?: GenreTreeViewport;
+    /** Restore silently after layout; use a new revision for each navigation. Supply focus, selection,
+     * and restoration together. User interaction supersedes a pending request. In stacked view,
+     * the selected genre must resolve to a root; outline ignores restoration. */
+    viewportRestore?: GenreTreeProps["viewportRestore"];
     /** Fires after a user-driven pan/zoom settles. In stacked view, only the tree holding the selection reports. */
     onViewportChange?: (viewport: GenreTreeViewport) => void;
     /** When true, hides the "Add root" button and suppresses per-node
@@ -102,8 +155,8 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     criteriaOverviewSchema?: z.ZodType<O, unknown>;
     /** Consumer-specific rows rendered in the info panel after Summary. */
     renderGenreDetailExtras?: (overview: O) => ReactNode;
-    /** Layout of the wheel/tree floating zoom/pop/fit controls. Defaults to "horizontal". */
-    controlsOrientation?: ControlsOrientation;
+    /** Host control displayed before the size metric in the floating controls. */
+    floatingControlsLeading?: ReactNode;
     /** Controlled size metric of the wheel and pop-core nodes: song count or summed song views. Uncontrolled when omitted
      * (starts on songs). The toggle is hidden while an artist filters the tree, which only has song counts. */
     sizeMetric?: GenreTreeSizeMetric;
@@ -121,12 +174,88 @@ type GenreTreeViewProps<O extends CriteriaOverview = CriteriaOverview> = {
     /** Controlled expanded state of the artist panel. Uncontrolled, it resets to compact on each artist. */
     artistExpanded?: boolean;
     onArtistExpandedChange?: (expanded: boolean) => void;
+    /** Resolves a selected genre or artist to a share URL using the host app's routes. */
+    getShareUrl?: GetGenreTreeShareUrl;
 } & ArtistSearchProps & GenreDetailSlots<O> & GenrePlaylistTracksSlots & InfoPanelCurationProps & GenreFocusProps & {
     /** Hides the info panel behind its edge tab; uncontrolled when omitted. Only applies with `placement="regions"`. */
     collapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
 };
-declare function GenreTreeView<O extends CriteriaOverview = CriteriaOverview>({ scope, handleGenreCreationAction, handleGenreRenameAction, onParentChanged, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedNodeId: controlledSelectedNodeId, onSelectedNodeIdChange, defaultViewport, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, controlsOrientation, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, artistSearch, onArtistSelect, artistSearchBaseUrl, renderSummary, renderEssentialTracks, renderSongLeading, renderSongActions, renderTracksToolbar, renderDangerZone, expanded, onExpandedChange, collapsed, onCollapsedChange, overlayPanel, placement, ...focus }: GenreTreeViewProps<O>): react.JSX.Element;
+declare function GenreTreeView<O extends CriteriaOverview = CriteriaOverview>({ scope, handleGenreCreationAction, handleGenreRenameAction, onParentChanged, getBackendBaseUrl, additionalActions, viewMode: controlledViewMode, selectedNodeId: controlledSelectedNodeId, onSelectedNodeIdChange, defaultViewport, viewportRestore, onViewportChange, readOnly, className, showDisplayOptions, showAddRoot, allowWheelRotation: controlledAllowWheelRotation, criteriaOverviewSchema, renderGenreDetailExtras, floatingControlsLeading, sizeMetric: controlledSizeMetric, onSizeMetricChange, renderArtistLink, artistUuid: controlledArtistUuid, onArtistUuidChange, artistExpanded: controlledArtistExpanded, onArtistExpandedChange, getShareUrl, artistSearch, onArtistSelect, artistSearchBaseUrl, renderSummary, renderEssentialTracks, renderSongLeading, renderSongActions, renderTracksToolbar, renderDangerZone, expanded, onExpandedChange, collapsed, onCollapsedChange, overlayPanel, placement, ...focus }: GenreTreeViewProps<O>): react.JSX.Element;
+
+type GenreActionBandProps = {
+    node: GenreTreeNode;
+    /** When set, shows the Play/Pause action. */
+    onPlayPause?: () => void;
+    isPlaying?: boolean;
+    /** When set, shows the "Zoom in" action. */
+    onZoomIn?: () => void;
+    /** When set, shows the "Add" (sub-genre) action. */
+    onAddChild?: () => void;
+    /** When set, shows the "Rename" action. */
+    onRename?: () => void;
+    /** When set, shows the "Parent" (change parent) action. */
+    onChangeParent?: () => void;
+    side?: "core" | "pop";
+    /** When set, shows the "Make pop" / "Make core" action. */
+    onToggleSide?: () => void;
+    /** When set, disables the side toggle and explains why in its tooltip. */
+    toggleSideDisabledReason?: string;
+    additionalActions?: (node: GenreTreeNode) => GenreTreeAction[];
+    shareTarget?: GenreTreeShareTarget;
+    shareUrl?: string;
+};
+declare function GenreActionBand({ node, onPlayPause, isPlaying, onZoomIn, onAddChild, onRename, onChangeParent, side, onToggleSide, toggleSideDisabledReason, additionalActions, shareTarget, shareUrl, }: GenreActionBandProps): react.JSX.Element | null;
+
+/** What the action band reads of a genre's playlist: enough to play it and to know whether it can be. */
+type PlayableGenrePlaylist = CriteriaPlaylistMinimum & {
+    tracksCount: number;
+};
+type GenreNodeActionBandProps = Omit<ComponentProps<typeof GenreActionBand>, "onPlayPause" | "isPlaying"> & {
+    genrePlaylist: PlayableGenrePlaylist;
+    playback: GenrePlaylistPlayback;
+};
+declare function GenreNodeActionBand({ genrePlaylist, playback, ...bandProps }: GenreNodeActionBandProps): react.JSX.Element;
+type GenreInfoPanelBodyProps<O extends CriteriaOverview> = {
+    /** genre-tree-view's toolbar section, rendered first. */
+    toolbar?: ReactNode;
+    family: ReactNode;
+    genreUuid: GenreUuid;
+    genrePlaylist: PlayableGenrePlaylist;
+    wikidataId?: string | null;
+    scope: Scope;
+    getBackendBaseUrl: () => string;
+    playback: GenrePlaylistPlayback;
+    /** Action band props other than play, which the body derives from `playback`. */
+    band: Omit<GenreNodeActionBandProps, "genrePlaylist" | "playback">;
+    extras?: Omit<GenreDetailExtrasProps<O>, "family" | "genreUuid" | "genrePlaylist" | "wikidataId" | "scope" | "getBackendBaseUrl">;
+};
+/** The body of a genre's info panel: action band, then the genre's overview, family and tracks.
+ * Shared by the tree's panel and the standalone GenreDetailPanel. */
+declare function GenreInfoPanelBody<O extends CriteriaOverview>({ toolbar, family, genreUuid, genrePlaylist, wikidataId, scope, getBackendBaseUrl, playback, band, extras, }: GenreInfoPanelBodyProps<O>): react.JSX.Element;
+
+type GenreDetailPanelProps<O extends CriteriaOverview> = {
+    genreUuid: GenreUuid;
+    scope: Scope;
+    getBackendBaseUrl: () => string;
+    onClose: () => void;
+    /** Fired with the uuid of a family or ancestor chip the user picked. */
+    onSelectGenre: (genreUuid: GenreUuid) => void;
+    /** When set, the panel offers "Focus". */
+    onZoomIn?: () => void;
+    /** Absolute or relative URL that shares this genre; the share action shows only when set. */
+    shareUrl?: string;
+    shareTarget?: GenreTreeShareTarget;
+    collapsed?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    extras?: GenreInfoPanelBodyProps<O>["extras"];
+};
+/** A genre's detail panel driven by one uuid, with no tree behind it. The tree's own panel shares its body. */
+declare function GenreDetailPanel<O extends CriteriaOverview>({ genreUuid, scope, getBackendBaseUrl, onClose, onSelectGenre, onZoomIn, shareUrl, shareTarget, collapsed, expanded, onExpandedChange, extras, }: GenreDetailPanelProps<O>): react.JSX.Element;
+
+/** Gives the brand layout tokens a zero-width left column while no left detail panel is showing. */
+declare function useLeftDetailPanelLayout(isPanelShown: boolean, enabled?: boolean): void;
 
 type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     scope: Scope;
@@ -152,16 +281,16 @@ type GenrePlaylistTreePerRootProps<T extends TrackBase> = {
     /** When false, suppresses the hover toolbar on every node. Defaults to true. */
     showToolbar?: boolean;
     wheelZoom?: WheelZoomMode;
-    /** Layout of the floating zoom/pop/fit controls. Defaults to "vertical". */
-    controlsOrientation?: ControlsOrientation;
     /** Mount-only seed for the pan/zoom, replacing the initial fit. */
     defaultViewport?: GenreTreeViewport;
+    /** Runtime viewport restoration request. */
+    viewportRestore?: GenreTreeProps["viewportRestore"];
     /** Fires after a user-driven pan/zoom settles. */
     onViewportChange?: (viewport: GenreTreeViewport) => void;
     /** What node play buttons play; defaults to each node's whole genre playlist. */
     playback?: GenrePlaylistPlayback;
 } & InfoPanelCurationProps;
-declare function GenrePlaylistTreePerRoot<T extends TrackBase>({ scope, className, rootUuid, genrePlaylistTreePerRoot, handleGenreCreationAction, handleGenreRenameAction, additionalActions, onNodeClick, onNodeHover, renderInfoPanelBody, selectedNodeId, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, readOnly, showToolbar, wheelZoom, controlsOrientation, defaultViewport, onViewportChange, playback, ...infoPanelCuration }: GenrePlaylistTreePerRootProps<T>): react.JSX.Element;
+declare function GenrePlaylistTreePerRoot<T extends TrackBase>({ scope, className, rootUuid, genrePlaylistTreePerRoot, handleGenreCreationAction, handleGenreRenameAction, additionalActions, onNodeClick, onNodeHover, renderInfoPanelBody, selectedNodeId, onSelectedNodeChange, hideInfoPanelClose, hideInfoPanelTitle, readOnly, showToolbar, wheelZoom, defaultViewport, viewportRestore, onViewportChange, playback, ...infoPanelCuration }: GenrePlaylistTreePerRootProps<T>): react.JSX.Element;
 
 type GenreSearchExtraResults = {
     /** Heading of this group; genre matches then get a "Genres" heading above it. */
@@ -198,16 +327,20 @@ interface TrackListSidebarProps<T extends TrackBase> {
     renderDuration?: (track: T) => ReactNode;
     renderActions?: (track: T) => ReactNode;
     layout?: "fixed" | "inline";
+    isCollapsed?: boolean;
+    onExpand?: () => void;
+    onMinimize?: () => void;
     /** When set, artist names render through it (e.g. a router `Link`). */
     renderArtistLink?: RenderArtistLink;
 }
-declare function TrackListSidebar<T extends TrackBase>({ className, renderDuration, renderActions, layout, renderArtistLink, }: TrackListSidebarProps<T>): react.JSX.Element | null;
+declare function TrackListSidebar<T extends TrackBase>({ className, renderDuration, renderActions, layout, isCollapsed, onExpand, onMinimize, renderArtistLink, }: TrackListSidebarProps<T>): react.JSX.Element | null;
 
 interface PlayerPanelProps {
     className?: string;
-    /** Hidden via CSS, never unmounted, so the video keeps playing while the panel is closed. */
+    /** Hidden via CSS, never unmounted, so the video keeps playing while the host hides the panel. */
     isVisible?: boolean;
-    onClose: () => void;
+    /** @deprecated The player no longer closes; its header action minimizes to video-only mode. */
+    onClose?: () => void;
     /** Controlled extended state; uncontrolled when omitted. */
     expanded?: boolean;
     onExpandedChange?: (expanded: boolean) => void;
@@ -215,7 +348,7 @@ interface PlayerPanelProps {
     extendedWidth?: string;
     renderArtistLink?: RenderArtistLink;
 }
-declare function PlayerPanel({ className, isVisible, onClose, expanded, onExpandedChange, extendedWidth, renderArtistLink, }: PlayerPanelProps): react.JSX.Element;
+declare function PlayerPanel({ className, isVisible, expanded, onExpandedChange, extendedWidth, renderArtistLink, }: PlayerPanelProps): react.JSX.Element;
 
 interface TrackItemProps<T extends TrackBase> {
     track: T;
@@ -231,8 +364,9 @@ interface TrackPositionPlayPauseProps {
     position: number;
     uuid: string;
     handlePlayPauseClick: (event: React.MouseEvent) => void;
+    isSelected?: boolean;
 }
-declare function TrackPositionPlayPause({ position, uuid, handlePlayPauseClick }: TrackPositionPlayPauseProps): react.JSX.Element;
+declare function TrackPositionPlayPause({ position, uuid, handlePlayPauseClick, isSelected, }: TrackPositionPlayPauseProps): react.JSX.Element;
 
 interface RatingProps {
     rating: number | null | undefined;
@@ -259,4 +393,4 @@ interface PanelEdgeTabProps {
 }
 declare function PanelEdgeTab({ side, edge, center, controls, className }: PanelEdgeTabProps): react.JSX.Element | null;
 
-export { type ArtistSearchProps, type GenreDetailSlots, type GenreFocusProps, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraResults, type GenreSearchProps, GenreTreeView, type GenreTreeViewProps, type InfoPanelCurationProps, PanelEdgeTab, type PanelEdgeTabAction, type PanelEdgeTabProps, type ParentChange, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps };
+export { type ArtistSearchProps, GenreDetailPanel, type GenreDetailPanelProps, type GenreDetailSlots, type GenreFocusProps, GenreInfoPanelBody, type GenreInfoPanelBodyProps, GenreNodeActionBand, type GenrePlaylistPlayback, type GenrePlaylistTracksSlots, GenrePlaylistTreePerRoot, type GenrePlaylistTreePerRootProps, GenreSearch, type GenreSearchExtraResults, type GenreSearchProps, type GenreTreeShareTarget, GenreTreeView, type GenreTreeViewProps, type GetGenreTreeShareUrl, type InfoPanelCurationProps, PanelEdgeTab, type PanelEdgeTabAction, type PanelEdgeTabProps, type ParentChange, type PlayableGenrePlaylist, PlayerPanel, type PlayerPanelProps, Rating, type RatingProps, TrackItem, type TrackItemProps, TrackListSidebar, type TrackListSidebarProps, TrackPositionPlayPause, type TrackPositionPlayPauseProps, type UseGenrePlaylistPlaybackOptions, useGenrePlaylistPlayback, useLeftDetailPanelLayout };

package/dist/genre-tree/index.js

@@ -1,4 +1,7 @@
 import {
+  GenreDetailPanel,
+  GenreInfoPanelBody,
+  GenreNodeActionBand,
   GenrePlaylistTreePerRoot,
   GenreSearch,
   GenreTreeOutlineSkeleton,
@@ -11,10 +14,15 @@ import {
   Rating,
   TrackItem,
   TrackListSidebar,
-  TrackPositionPlayPause
-} from "../chunk-KPWV4LEJ.js";
-import "../chunk-VDXUW7PP.js";
+  TrackPositionPlayPause,
+  useGenrePlaylistPlayback,
+  useLeftDetailPanelLayout
+} from "../chunk-TFLX6C5Q.js";
+import "../chunk-DKQQLLMY.js";
 export {
+  GenreDetailPanel,
+  GenreInfoPanelBody,
+  GenreNodeActionBand,
   GenrePlaylistTreePerRoot,
   GenreSearch,
   GenreTreeOutlineSkeleton,
@@ -27,6 +35,8 @@ export {
   Rating,
   TrackItem,
   TrackListSidebar,
-  TrackPositionPlayPause
+  TrackPositionPlayPause,
+  useGenrePlaylistPlayback,
+  useLeftDetailPanelLayout
 };
 //# sourceMappingURL=index.js.map

package/dist/genre-tree/styles.css

@@ -1 +1,81 @@
 @import "@behindthemusictree/genre-tree-view/styles.css";
+
+.track-position-play-pause__spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex: none;
+  border: 2px solid rgb(255 255 255 / 65%);
+  border-top-color: #22c55e;
+  border-radius: 50%;
+  animation: app-kit-track-spinner 700ms linear infinite;
+}
+
+.track-position-play-pause__bars {
+  display: flex;
+  width: 16px;
+  height: 16px;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 2px;
+}
+
+.track-position-play-pause__bar {
+  display: block;
+  width: 3px;
+  flex: none;
+  border-radius: 9999px;
+  background-color: var(--color-green-500, #22c55e);
+  transform-origin: bottom center;
+}
+
+.track-position-play-pause__bar:nth-child(1) {
+  height: 8px;
+}
+
+.track-position-play-pause__bar:nth-child(2) {
+  height: 13px;
+}
+
+.track-position-play-pause__bar:nth-child(3) {
+  height: 10px;
+}
+
+.track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar {
+  animation: app-kit-playing-bars 700ms ease-in-out infinite alternate;
+}
+
+.track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar:nth-child(2) {
+  animation-delay: 180ms;
+}
+
+.track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar:nth-child(3) {
+  animation-delay: 360ms;
+}
+
+@keyframes app-kit-playing-bars {
+  from {
+    transform: scaleY(0.35);
+  }
+
+  to {
+    transform: scaleY(1);
+  }
+}
+
+@keyframes app-kit-track-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .track-position-play-pause__spinner {
+    animation-duration: 1400ms;
+  }
+
+  .track-position-play-pause__bars[data-playing="true"] .track-position-play-pause__bar {
+    animation: none;
+  }
+}
+