cap scrobble status at max values

- left / right values should be consistent width

src/renderer/api/jellyfin/jellyfin-controller.ts

@@ -1062,7 +1062,9 @@ export const JellyfinController: InternalControllerEndpoint = {
             throw new Error('Failed to get server info');
         }
 
-        const defaultFeatures = {};
+        const defaultFeatures = {
+            [ServerFeature.REPORT_PLAYBACK]: [1],
+        };
 
         const features = {
             ...defaultFeatures,

src/renderer/api/subsonic/subsonic-api.ts

@@ -289,6 +289,14 @@ export const contract = c.router({
             200: ssType._response.removeFavorite,
         },
     },
+    reportPlayback: {
+        method: 'GET',
+        path: 'reportPlayback.view',
+        query: ssType._parameters.reportPlayback,
+        responses: {
+            200: ssType._response.reportPlayback,
+        },
+    },
     savePlayQueue: {
         method: 'GET',
         path: 'savePlayQueue.view',

src/renderer/api/subsonic/subsonic-controller.ts

@@ -1460,6 +1460,10 @@ export const SubsonicController: InternalControllerEndpoint = {
             features.serverPlayQueue = [1];
         }
 
+        if (subsonicFeatures[SubsonicExtensions.PLAYBACK_REPORT]) {
+            features.reportPlayback = [1];
+        }
+
         return { features, id: apiClientProps.server?.id, version: ping.body.serverVersion };
     },
     getSimilarSongs: async (args) => {
@@ -2298,6 +2302,57 @@ export const SubsonicController: InternalControllerEndpoint = {
     scrobble: async (args) => {
         const { apiClientProps, query } = args;
 
+        if (hasFeature(apiClientProps.server, ServerFeature.REPORT_PLAYBACK)) {
+            if (query.submission) {
+                const res = await ssApiClient(apiClientProps).scrobble({
+                    query: {
+                        id: query.id,
+                        submission: query.submission,
+                    },
+                });
+
+                if (res.status !== 200) {
+                    throw new Error('Failed to scrobble');
+                }
+
+                return null;
+            }
+
+            let state: 'paused' | 'playing' | 'starting' | 'stopped' = 'playing';
+
+            switch (query.event) {
+                case 'pause':
+                    state = 'paused';
+                    break;
+                case 'start':
+                    state = 'starting';
+                    break;
+                case 'timeupdate':
+                case 'unpause':
+                    state = 'playing';
+                    break;
+                default:
+                    state = 'playing';
+            }
+
+            const res = await ssApiClient(apiClientProps).reportPlayback({
+                query: {
+                    ignoreScrobble: true,
+                    mediaId: query.id,
+                    mediaType: query.mediaType,
+                    playbackRate: query.playbackRate,
+                    positionMs: query.position ?? 0,
+                    state,
+                },
+            });
+
+            if (res.status !== 200) {
+                throw new Error('Failed to report playback');
+            }
+
+            return null;
+        }
+
         const res = await ssApiClient(apiClientProps).scrobble({
             query: {
                 id: query.id,

src/renderer/features/player/components/playerbar-slider.module.css

@@ -14,6 +14,8 @@
 }
 
 .root {
+    width: 100%;
+
     &:hover {
         .bar {
             background-color: var(--theme-colors-primary-filled);
@@ -44,48 +46,45 @@
     transition: opacity 0.2s ease-in-out;
 }
 
-.track {
-    &::before {
-        right: calc(0.1rem * -1);
-    }
-}
-
 .slider-container {
-    display: flex;
+    --slider-value-width: 4.75rem;
+    --slider-value-gap: var(--theme-spacing-sm);
+
+    display: grid;
+    grid-template-columns: var(--slider-value-width) minmax(0, 1fr) var(--slider-value-width);
+    gap: var(--slider-value-gap);
+    align-items: center;
     width: 95%;
     height: 20px;
 }
 
 .slider-value-wrapper {
-    display: flex;
+    min-width: 0;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-    max-width: 50px;
     min-height: 0;
 
+    &:first-child {
+        justify-self: end;
+    }
+
+    &:last-child {
+        justify-self: start;
+    }
+
     @media (width < 768px) {
         display: none;
     }
 }
 
-.slider-value-wrapper-elapsed {
+@media (width < 768px) {
-    display: flex;
+    .slider-container {
-    flex: 1;
+        grid-template-columns: minmax(0, 1fr);
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-    max-width: 4.75rem;
-    min-height: 0;
-
-    @media (width < 768px) {
-        display: none;
     }
 }
 
 .slider-wrapper {
     display: flex;
-    flex: 6;
     align-items: center;
+    width: 100%;
+    min-width: 0;
     height: 100%;
 }

src/renderer/features/player/components/playerbar-slider.tsx

@@ -42,7 +42,7 @@ export const PlayerbarSlider = () => {
     return (
         <>
             <div className={styles.sliderContainer}>
-                <div className={styles.sliderValueWrapperElapsed}>
+                <div className={styles.sliderValueWrapper}>
                     <ScrobbleStatus formattedTime={formattedTime} />
                 </div>
                 <div className={styles.sliderWrapper}>
@@ -81,7 +81,6 @@ export const CustomPlayerbarSlider = ({ ...props }: SliderProps) => {
                 label: styles.label,
                 root: styles.root,
                 thumb: styles.thumb,
-                track: styles.track,
             }}
             {...props}
             size={6}

src/renderer/features/player/components/scrobble-status.tsx

@@ -22,6 +22,12 @@ const scrobbleProgressProps = {
 
 const clampPct = (n: number) => Math.min(100, Math.max(0, n));
 
+const capForDisplay = (value: number, limit: number) =>
+    limit > 0 ? Math.min(value, limit) : value;
+
+const progressTowardLimit = (current: number, limit: number) =>
+    limit > 0 ? clampPct((current / limit) * 100) : 0;
+
 const ScrobbleConditionProgress = ({ value }: { value: number }) => (
     <Progress {...scrobbleProgressProps} value={value} w="100%" />
 );
@@ -34,18 +40,25 @@ export const ScrobbleStatus = ({ formattedTime }: { formattedTime: string }) =>
 
     const hookInactive = !scrobbleEnabled || privateMode;
 
-    const listenedSec = (snapshot.listenedMs / 1000).toFixed(1);
+    const listenedSecRaw = snapshot.listenedMs / 1000;
-    const listenPercentOfTrack =
+    const listenedSecDisplay = snapshot.submitted
-        snapshot.trackDurationMs > 0 ? (snapshot.listenedMs / snapshot.trackDurationMs) * 100 : 0;
+        ? snapshot.targetDurationSec
+        : capForDisplay(listenedSecRaw, snapshot.targetDurationSec);
 
-    const durationConditionPct =
+    const listenPercentOfTrackRaw =
-        snapshot.targetDurationSec > 0
+        snapshot.trackDurationMs > 0 ? (snapshot.listenedMs / snapshot.trackDurationMs) * 100 : 0;
-            ? clampPct((snapshot.listenedMs / 1000 / snapshot.targetDurationSec) * 100)
+    const listenPercentDisplay = snapshot.submitted
-            : 0;
+        ? snapshot.targetPercentage
-    const percentConditionPct =
+        : capForDisplay(listenPercentOfTrackRaw, snapshot.targetPercentage);
-        snapshot.targetPercentage > 0 && snapshot.trackDurationMs > 0
+
-            ? clampPct((listenPercentOfTrack / snapshot.targetPercentage) * 100)
+    const durationConditionPct = progressTowardLimit(
-            : 0;
+        listenedSecDisplay,
+        snapshot.targetDurationSec,
+    );
+    const percentConditionPct = progressTowardLimit(
+        listenPercentDisplay,
+        snapshot.targetPercentage,
+    );
 
     return (
         <HoverCard position="top" width={280}>
@@ -87,13 +100,13 @@ export const ScrobbleStatus = ({ formattedTime }: { formattedTime: string }) =>
                         <>
                             <Stack gap="xs">
                                 <Text size="xs">
-                                    {`${listenedSec}s / ${snapshot.targetDurationSec}s`}
+                                    {`${listenedSecDisplay.toFixed(1)}s / ${snapshot.targetDurationSec}s`}
                                 </Text>
                                 <ScrobbleConditionProgress value={durationConditionPct} />
                             </Stack>
                             <Stack gap="xs">
                                 <Text size="xs">
-                                    {`${listenPercentOfTrack.toFixed(1)}% / ${snapshot.targetPercentage}%`}
+                                    {`${listenPercentDisplay.toFixed(1)}% / ${snapshot.targetPercentage}%`}
                                 </Text>
                                 <ScrobbleConditionProgress value={percentConditionPct} />
                             </Stack>

src/renderer/features/player/hooks/use-scrobble.ts

@@ -4,17 +4,21 @@ import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { usePlayerEvents } from '/@/renderer/features/player/audio-player/hooks/use-player-events';
 import { useSendScrobble } from '/@/renderer/features/player/mutations/scrobble-mutation';
 import {
+    getServerById,
     publishScrobbleDebug,
     useAppStore,
     usePlaybackSettings,
     usePlayerSong,
+    usePlayerSpeed,
     usePlayerStore,
     useSettingsStore,
     useTimestampStoreBase,
 } from '/@/renderer/store';
 import { LogCategory, logFn } from '/@/renderer/utils/logger';
 import { logMsg } from '/@/renderer/utils/logger-message';
+import { hasFeature } from '/@/shared/api/utils';
 import { LibraryItem, QueueSong, ServerType } from '/@/shared/types/domain-types';
+import { ServerFeature } from '/@/shared/types/features-types';
 import { PlayerStatus } from '/@/shared/types/types';
 
 type ScrobbleManualHandlers = {
@@ -36,6 +40,14 @@ export const invokeScrobbleResetListenedState = () => {
     scrobbleManualHandlers?.resetListenedState();
 };
 
+const getPositionValue = (seconds: number, useTicks: boolean) => {
+    if (useTicks) {
+        return Math.round(seconds * 1e7);
+    }
+
+    return seconds;
+};
+
 /*
  Submission (Last.fm / etc.) eligibility uses accumulated listen time:
   - If listened time meets the required percentage of track duration
@@ -99,6 +111,7 @@ export const useScrobble = () => {
     const isPrivateModeEnabled = useAppStore((state) => state.privateMode);
     const sendScrobble = useSendScrobble();
     const currentSong = usePlayerSong();
+    const playbackRate = usePlayerSpeed();
 
     const imageUrl = useItemImageUrl({
         id: currentSong?.imageId || undefined,
@@ -166,6 +179,11 @@ export const useScrobble = () => {
             if (!isScrobbleEnabled || isPrivateModeEnabled) return;
 
             const currentSong = usePlayerStore.getState().getCurrentSong();
+            const mediaType = currentSong?._itemType.includes('song') ? 'song' : 'podcast';
+            const serverId = currentSong?._serverId;
+            const server = getServerById(serverId);
+            const hasPlaybackReport = hasFeature(server, ServerFeature.REPORT_PLAYBACK);
+            const useTicks = currentSong?._serverType === ServerType.JELLYFIN;
             const currentStatus = usePlayerStore.getState().player.status;
             const currentTime = properties.timestamp;
             const previousTime = prev.timestamp;
@@ -220,19 +238,20 @@ export const useScrobble = () => {
                 }
             }
 
-            // Send Jellyfin progress events every 10 seconds
+            // Send progress events every 10 seconds
-            if (currentSong._serverType === ServerType.JELLYFIN) {
+            if (hasPlaybackReport) {
                 const timeSinceLastProgress = currentTime - lastProgressEventRef.current;
                 if (timeSinceLastProgress >= 10) {
-                    const position = currentTime * 1e7;
                     sendScrobble.mutate(
                         {
-                            apiClientProps: { serverId: currentSong._serverId || '' },
+                            apiClientProps: { serverId: serverId || '' },
                             query: {
                                 albumId: currentSong.albumId,
                                 event: 'timeupdate',
                                 id: currentSong.id,
-                                position,
+                                mediaType: mediaType,
+                                playbackRate,
+                                position: getPositionValue(currentTime, useTicks),
                                 submission: false,
                             },
                         },
@@ -261,20 +280,15 @@ export const useScrobble = () => {
                 });
 
                 if (shouldSubmitScrobble) {
-                    // Since jellyfin-plugin-lastfm uses the submission Position to determine if the song should actually scrobble
-                    // we just send the full duration of the song when it matches the local scrobble conditions
-                    const position =
-                        currentSong._serverType === ServerType.JELLYFIN
-                            ? currentSong.duration * 1e7
-                            : undefined;
-
                     sendScrobble.mutate(
                         {
                             apiClientProps: { serverId: currentSong._serverId || '' },
                             query: {
                                 albumId: currentSong.albumId,
                                 id: currentSong.id,
-                                position,
+                                mediaType: mediaType,
+                                playbackRate: playbackRate,
+                                position: getPositionValue(currentSong.duration ?? 0, useTicks),
                                 submission: true,
                             },
                         },
@@ -295,7 +309,7 @@ export const useScrobble = () => {
                 }
             }
         },
-        [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble],
+        [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble, playbackRate],
     );
 
     const handleScrobbleFromSongChange = useCallback(
@@ -305,6 +319,7 @@ export const useScrobble = () => {
         ) => {
             const currentSong = properties.song;
             const previousSong = previousSongRef.current;
+            const mediaType = currentSong?._itemType.includes('song') ? 'song' : 'podcast';
 
             // Handle notifications
             if (scrobbleSettings?.notify && currentSong?.id) {
@@ -365,6 +380,8 @@ export const useScrobble = () => {
                                 albumId: currentSong.albumId,
                                 event: 'start',
                                 id: currentSong.id,
+                                mediaType: mediaType,
+                                playbackRate: playbackRate,
                                 position: 0,
                                 submission: false,
                             },
@@ -388,11 +405,12 @@ export const useScrobble = () => {
             flushScrobbleDebug();
         },
         [
-            flushScrobbleDebug,
             scrobbleSettings?.notify,
             isScrobbleEnabled,
             isPrivateModeEnabled,
+            flushScrobbleDebug,
             sendScrobble,
+            playbackRate,
         ],
     );
 
@@ -404,6 +422,11 @@ export const useScrobble = () => {
             }
 
             const currentSong = usePlayerStore.getState().getCurrentSong();
+            const mediaType = currentSong?._itemType.includes('song') ? 'song' : 'podcast';
+            const serverId = currentSong?._serverId;
+            const server = getServerById(serverId);
+            const hasPlaybackReport = hasFeature(server, ServerFeature.REPORT_PLAYBACK);
+            const useTicks = currentSong?._serverType === ServerType.JELLYFIN;
 
             if (!currentSong?.id) {
                 return;
@@ -422,7 +445,7 @@ export const useScrobble = () => {
             }
 
             // Position scrobbles are only relevant for Jellyfin
-            if (currentSong._serverType !== ServerType.JELLYFIN) {
+            if (!hasPlaybackReport) {
                 flushScrobbleDebug();
                 return;
             }
@@ -436,8 +459,6 @@ export const useScrobble = () => {
                 return;
             }
 
-            const position = properties.timestamp * 1e7;
-
             lastProgressEventRef.current = properties.timestamp;
             lastSeekEventRef.current = now;
 
@@ -448,7 +469,9 @@ export const useScrobble = () => {
                         albumId: currentSong.albumId,
                         event: 'timeupdate',
                         id: currentSong.id,
-                        position,
+                        mediaType: mediaType,
+                        playbackRate: playbackRate,
+                        position: getPositionValue(properties.timestamp, useTicks),
                         submission: false,
                     },
                 },
@@ -465,7 +488,7 @@ export const useScrobble = () => {
             );
             flushScrobbleDebug();
         },
-        [flushScrobbleDebug, isScrobbleEnabled, isPrivateModeEnabled, sendScrobble],
+        [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble, playbackRate, flushScrobbleDebug],
     );
 
     const handleScrobbleFromStatus = useCallback(
@@ -475,18 +498,22 @@ export const useScrobble = () => {
             }
 
             const currentSong = usePlayerStore.getState().getCurrentSong();
+            const mediaType = currentSong?._itemType.includes('song') ? 'song' : 'podcast';
+            const serverId = currentSong?._serverId;
+            const server = getServerById(serverId);
+            const hasPlaybackReport = hasFeature(server, ServerFeature.REPORT_PLAYBACK);
+            const useTicks = currentSong?._serverType === ServerType.JELLYFIN;
 
             if (!currentSong?.id) {
                 return;
             }
 
             // Only apply to Jellyfin controller scrobble
-            if (currentSong._serverType !== ServerType.JELLYFIN) {
+            if (!hasPlaybackReport) {
                 return;
             }
 
             const currentTimestamp = useTimestampStoreBase.getState().timestamp;
-            const position = currentTimestamp * 1e7;
 
             // Send pause event when status changes to paused
             if (properties.status === PlayerStatus.PAUSED && prev.status === PlayerStatus.PLAYING) {
@@ -497,7 +524,9 @@ export const useScrobble = () => {
                             albumId: currentSong.albumId,
                             event: 'pause',
                             id: currentSong.id,
-                            position,
+                            mediaType: mediaType,
+                            playbackRate: playbackRate,
+                            position: getPositionValue(currentTimestamp, useTicks),
                             submission: false,
                         },
                     },
@@ -523,7 +552,9 @@ export const useScrobble = () => {
                             albumId: currentSong.albumId,
                             event: 'unpause',
                             id: currentSong.id,
-                            position,
+                            mediaType: mediaType,
+                            playbackRate: playbackRate,
+                            position: getPositionValue(currentTimestamp, useTicks),
                             submission: false,
                         },
                     },
@@ -542,7 +573,7 @@ export const useScrobble = () => {
 
             flushScrobbleDebug();
         },
-        [flushScrobbleDebug, isScrobbleEnabled, isPrivateModeEnabled, sendScrobble],
+        [isScrobbleEnabled, isPrivateModeEnabled, flushScrobbleDebug, sendScrobble, playbackRate],
     );
 
     const handleScrobbleFromRepeat = useCallback(() => {
@@ -552,6 +583,7 @@ export const useScrobble = () => {
 
         const currentSong = usePlayerStore.getState().getCurrentSong();
         const currentStatus = usePlayerStore.getState().player.status;
+        const mediaType = currentSong?._itemType.includes('song') ? 'song' : 'podcast';
 
         if (currentStatus !== PlayerStatus.PLAYING || !currentSong?.id) {
             return;
@@ -570,6 +602,8 @@ export const useScrobble = () => {
                     albumId: currentSong.albumId,
                     event: 'start',
                     id: currentSong.id,
+                    mediaType: mediaType,
+                    playbackRate: playbackRate,
                     position: 0,
                     submission: false,
                 },
@@ -587,7 +621,7 @@ export const useScrobble = () => {
             },
         );
         flushScrobbleDebug();
-    }, [flushScrobbleDebug, isScrobbleEnabled, isPrivateModeEnabled, sendScrobble]);
+    }, [isScrobbleEnabled, isPrivateModeEnabled, sendScrobble, playbackRate, flushScrobbleDebug]);
 
     // Update previous timestamp on progress for use in status change handler
     const handleProgressUpdate = useCallback(
@@ -607,20 +641,22 @@ export const useScrobble = () => {
                 }
 
                 const song = usePlayerStore.getState().getCurrentSong();
+                const mediaType = song?._itemType.includes('song') ? 'song' : 'podcast';
+                const useTicks = song?._serverType === ServerType.JELLYFIN;
+
                 if (!song?.id) {
                     return;
                 }
 
-                const position =
-                    song._serverType === ServerType.JELLYFIN ? song.duration * 1e7 : undefined;
-
                 sendScrobble.mutate(
                     {
                         apiClientProps: { serverId: song._serverId || '' },
                         query: {
                             albumId: song.albumId,
                             id: song.id,
-                            position,
+                            mediaType: mediaType,
+                            playbackRate: playbackRate,
+                            position: getPositionValue(song.duration ?? 0, useTicks),
                             submission: true,
                         },
                     },
@@ -659,7 +695,7 @@ export const useScrobble = () => {
         });
 
         return () => registerScrobbleManualHandlers(null);
-    }, [flushScrobbleDebug, isPrivateModeEnabled, isScrobbleEnabled, sendScrobble]);
+    }, [flushScrobbleDebug, isPrivateModeEnabled, isScrobbleEnabled, playbackRate, sendScrobble]);
 
     usePlayerEvents(
         {

src/shared/api/subsonic/subsonic-types.ts

@@ -454,6 +454,7 @@ const similarSongs2 = z.object({
 export enum SubsonicExtensions {
     FORM_POST = 'formPost',
     INDEX_BASED_QUEUE = 'indexBasedQueue',
+    PLAYBACK_REPORT = 'playbackReport',
     SONG_LYRICS = 'songLyrics',
     TRANSCODE_OFFSET = 'transcodeOffset',
     TRANSCODING = 'transcoding',
@@ -793,6 +794,17 @@ const getInternetRadioStations = z.object({
         .optional(),
 });
 
+const reportPlaybackParameters = z.object({
+    ignoreScrobble: z.boolean().optional(),
+    mediaId: z.string(),
+    mediaType: z.enum(['song', 'podcast']),
+    playbackRate: z.number().optional(),
+    positionMs: z.number(),
+    state: z.enum(['starting', 'playing', 'paused', 'stopped']),
+});
+
+const reportPlayback = z.null();
+
 export const ssType = {
     _body: {
         getTranscodeDecision: transcodeDecisionRequestBody,
@@ -824,6 +836,7 @@ export const ssType = {
         getTranscodeStream: getTranscodeStreamParameters,
         randomSongList: randomSongListParameters,
         removeFavorite: removeFavoriteParameters,
+        reportPlayback: reportPlaybackParameters,
         savePlayQueueByIndex: savePlayQueueByIndexParameters,
         saveQueue: saveQueueParameters,
         scrobble: scrobbleParameters,
@@ -877,6 +890,7 @@ export const ssType = {
         playQueueByIndex,
         randomSongList,
         removeFavorite,
+        reportPlayback,
         saveQueue,
         scrobble,
         search3,

src/shared/types/domain-types.ts

@@ -1365,6 +1365,8 @@ export type ScrobbleQuery = {
     albumId?: string;
     event?: 'pause' | 'start' | 'timeupdate' | 'unpause';
     id: string;
+    mediaType: 'podcast' | 'song';
+    playbackRate: number;
     position?: number;
     submission: boolean;
 };

src/shared/types/features-types.ts

@@ -13,6 +13,7 @@ export enum ServerFeature {
     PLAYLIST_IMAGE_UPLOAD = 'playlistImageUpload',
     PLAYLISTS_SMART = 'playlistsSmart',
     PUBLIC_PLAYLIST = 'publicPlaylist',
+    REPORT_PLAYBACK = 'reportPlayback',
     SERVER_PLAY_QUEUE = 'serverPlayQueue',
     SHARING_ALBUM_SONG = 'sharingAlbumSong',
     SIMILAR_SONGS_MUSIC_FOLDER = 'similarSongsMusicFolder',