pico-pixel-player

← Back to log@ ad002a5

changeable progress bar height, force show filebrowser when swtiching directories, allow embedded covers for mediasessions

AuthorKonata <konata@posteo.jp>
Date
Commitad002a57146bd7efaa61338fcebfd7b846d2a1e7
Parent6f14a2f
5 files changed, 31 insertions(+), 13 deletions(-)
▾Mwebclient/src/App.tsx
+12-11@ ad002a5@ master
@@ -67,6 +67,7 @@ const App: Component = () => {
filebrowserDisplay: FileDisplay.TRACKNO_TITLE,
playlistDisplay: FileDisplay.TRACKNO_TITLE,
controlsDisplay: FileDisplay.TITLE,
progressBarHeight: 8,
rememberDir: false,
duplicateWarning: true,
@@ -90,6 +91,12 @@ const App: Component = () => {
window.location.hash = encodePath(currentDir());
});
createEffect(
on(currentDir, () => {
setShowFileBrowser(true);
}),
);
createEffect(() => {
const new_font = new FontFace(
"ark-latin",
@@ -131,12 +138,7 @@ const App: Component = () => {
}
const oldSrc = navigator.mediaSession.metadata?.artwork[0]?.src ?? "";
if (oldSrc.startsWith("blob:")) URL.revokeObjectURL(oldSrc);
const artwork = await getCover(
playerState.currentTrack.path.split("/").slice(0, -1).join("/"),
options,
false,
isOffline(),
);
const artwork = await getCover(playerState.currentTrack.path, options, false, isOffline());
navigator.mediaSession.metadata = new MediaMetadata({
title: formatFilename(playerState.currentTrack, options.controlsDisplay),
album: playerState.currentTrack.metadata.album,
@@ -148,9 +150,9 @@ const App: Component = () => {
],
});
navigator.mediaSession.setActionHandler("nexttrack", playNext)
navigator.mediaSession.setActionHandler("previoustrack", playPrevious)
navigator.mediaSession.setActionHandler("stop", stopPlaying)
navigator.mediaSession.setActionHandler("nexttrack", playNext);
navigator.mediaSession.setActionHandler("previoustrack", playPrevious);
navigator.mediaSession.setActionHandler("stop", stopPlaying);
});
createEffect(() => {
if (!playerState.currentTrack) {
@@ -158,14 +160,13 @@ const App: Component = () => {
navigator.mediaSession.setActionHandler("play", null);
return;
}
if(playerState.isPlaying) {
if (playerState.isPlaying) {
navigator.mediaSession.setActionHandler("pause", togglePlay);
navigator.mediaSession.setActionHandler("play", null);
} else {
navigator.mediaSession.setActionHandler("pause", null);
navigator.mediaSession.setActionHandler("play", togglePlay);
}
});
}
▾Mwebclient/src/components/OptionsModal.tsx
+11@ ad002a5@ master
@@ -249,6 +249,17 @@ export default function OptionsModal(props: OptionsModalProps) {
<option value={16}>16px</option>
</select>
</div>
<div>
<label for="progress-height-input">Progress bar height:</label>
<input
id="progress-height-input"
type="number"
min={0}
required
value={newOptions.progressBarHeight}
onChange={(e) => setNewOptions("progressBarHeight", e.target.valueAsNumber)}
/>
</div>
</Match>
<Match when={optionsPage() === 3}>
<div>
▾Mwebclient/src/components/PlayerControls.css
-1@ ad002a5@ master
@@ -61,7 +61,6 @@
& > .progress-bar {
position: relative;
flex: 1;
height: 8px;
background-color: #ddd;
cursor: pointer;
▾Mwebclient/src/components/PlayerControls.tsx
+7-1@ ad002a5@ master
@@ -137,7 +137,13 @@ export default function PlayerControls(props: PlayerControlsProps) {
</div>
</div>
<div class="progress-container" onClick={seekTo}>
<div class="progress-bar" style={controlsDisabled() ? { cursor: "default" } : {}}>
<div
class="progress-bar"
style={{
cursor: controlsDisabled() ? "default" : undefined,
height: `${props.options.progressBarHeight}px`,
}}
>
<For each={props.playerState.buffered}>
{(bufferRange) => {
return (
▾Mwebclient/src/types.ts
+1@ ad002a5@ master
@@ -42,6 +42,7 @@ export interface AppOptions {
playlistDisplay: FileDisplay;
controlsDisplay: FileDisplay;
fontResolution: number;
progressBarHeight: number;
rememberDir: boolean;
duplicateWarning: boolean;