2026-06-28 12:04:21 -04:00
|
|
|
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
|
|
|
|
|
|
|
|
exports[`<PlaybackControls /> should render correctly 1`] = `
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="playback-controls"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="playback-controls__background"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="current-track__wrapper"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="current-track"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
tabIndex="-1"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Link
|
|
|
|
|
|
className="thumbnail-wrapper"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Link"
|
|
|
|
|
|
tabIndex="-1"
|
|
|
|
|
|
to="/modal/kiosk-mode"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Thumbnail
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Thumbnail"
|
|
|
|
|
|
size="small"
|
|
|
|
|
|
type="track"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</Link>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="text"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="title"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="artist"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<section
|
|
|
|
|
|
className="playback"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="section"
|
|
|
|
|
|
>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control previous"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="navigate_before"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control play"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="play_circle_filled"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control next"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="navigate_next"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
|
|
|
|
className="progress"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="section"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="time time--current"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
-
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ProgressSlider
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="ProgressSlider"
|
|
|
|
|
|
playbackPosition={0}
|
|
|
|
|
|
/>
|
|
|
|
|
|
<div
|
|
|
|
|
|
className="time time--total"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="div"
|
|
|
|
|
|
>
|
|
|
|
|
|
-
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
|
|
|
|
className="settings"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="section"
|
|
|
|
|
|
>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control tooltip"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="restaurant"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span
|
|
|
|
|
|
className="tooltip__content"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="span"
|
|
|
|
|
|
>
|
|
|
|
|
|
Consume
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control tooltip"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
2026-06-28 14:13:18 -04:00
|
|
|
|
name="lightbulb_outline"
|
2026-06-28 12:04:21 -04:00
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span
|
|
|
|
|
|
className="tooltip__content"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="span"
|
|
|
|
|
|
>
|
|
|
|
|
|
Smart Queue
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control tooltip"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="shuffle"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span
|
|
|
|
|
|
className="tooltip__content"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="span"
|
|
|
|
|
|
>
|
|
|
|
|
|
Shuffle
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control tooltip"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="repeat"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<span
|
|
|
|
|
|
className="tooltip__content"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="span"
|
|
|
|
|
|
>
|
|
|
|
|
|
Repeat
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<OutputControl
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="OutputControl"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
|
|
|
|
className="volume"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="section"
|
|
|
|
|
|
>
|
|
|
|
|
|
<MuteControl
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="MuteControl"
|
|
|
|
|
|
mute={false}
|
|
|
|
|
|
onMuteChange={[Function]}
|
|
|
|
|
|
/>
|
|
|
|
|
|
<VolumeControl
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="VolumeControl"
|
|
|
|
|
|
mute={false}
|
|
|
|
|
|
onVolumeChange={[Function]}
|
|
|
|
|
|
scrollWheel={true}
|
|
|
|
|
|
volume={50}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
<section
|
|
|
|
|
|
className="triggers"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="section"
|
|
|
|
|
|
>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control expanded-controls"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="expand_less"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<button
|
|
|
|
|
|
className="control sidebar-toggle"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="button"
|
|
|
|
|
|
onClick={[Function]}
|
|
|
|
|
|
type="button"
|
|
|
|
|
|
>
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
className="open"
|
|
|
|
|
|
data-qa-file="PlaybackControls"
|
|
|
|
|
|
data-qa-node="Icon"
|
|
|
|
|
|
name="menu"
|
|
|
|
|
|
type="material"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
`;
|