@christianriedl/media 1.0.1 → 1.0.4

package/dist/playerService.d.ts

@@ -1,21 +1,36 @@
 import { IRest } from '@christianriedl/rest';
 import { ILogger, Dictionary } from '@christianriedl/utils';
+import { EMediaType } from "./iMedia";
+export declare enum EPlayState {
+    PowerOff = 0,
+    NoMedia = 1,
+    Paused = 2,
+    Stopped = 3,
+    Play = 4,
+    PlayAll = 5,
+    PlayOnly = 6
+}
 export interface IPlayerState {
     playerName: string;
     albumId: string;
     mediaId: string;
     trackNo: number;
     duration: number;
-    state: string;
+    state: EPlayState;
     volume: number;
     mute: boolean;
 }
 export interface IPlayerRequest {
     playerName: string;
-    folderId: string;
-    mediaId: string;
-    trackNo: number;
-    withStreamTitle: boolean;
+    folderId?: string;
+    mediaId?: string;
+    trackNo?: number;
+    withStreamTitle?: boolean;
+}
+export interface IPlayerCommand {
+    playerName: string;
+    cmd: string;
+    value: string;
 }
 export declare class PlayerService {
     rest: IRest;
@@ -24,8 +39,12 @@ export declare class PlayerService {
     playerNames: string[];
     playerStates: Dictionary<IPlayerState>;
     constructor(rest: IRest, log: ILogger);
-    getPlayers(): Promise<string[]>;
+    getPlayers(mediaType?: EMediaType, isReady?: boolean): Promise<string[]>;
     getPlayerState(playerName: string): Promise<IPlayerState | null>;
     play(playerRequest: IPlayerRequest): Promise<boolean>;
-    playStop(playerName: string): Promise<boolean>;
+    stop(playerName: string): Promise<boolean>;
+    pause(playerName: string): Promise<boolean>;
+    next(playerName: string): Promise<boolean>;
+    previous(playerName: string): Promise<boolean>;
+    command(playerCommand: IPlayerCommand): Promise<boolean>;
 }

package/dist/playerService.js

@@ -1,3 +1,13 @@
+export var EPlayState;
+(function (EPlayState) {
+    EPlayState[EPlayState["PowerOff"] = 0] = "PowerOff";
+    EPlayState[EPlayState["NoMedia"] = 1] = "NoMedia";
+    EPlayState[EPlayState["Paused"] = 2] = "Paused";
+    EPlayState[EPlayState["Stopped"] = 3] = "Stopped";
+    EPlayState[EPlayState["Play"] = 4] = "Play";
+    EPlayState[EPlayState["PlayAll"] = 5] = "PlayAll";
+    EPlayState[EPlayState["PlayOnly"] = 6] = "PlayOnly";
+})(EPlayState || (EPlayState = {}));
 export class PlayerService {
     rest;
     mediaUrl;
@@ -9,8 +19,13 @@ export class PlayerService {
         this.rest = rest;
         this.mediaUrl = rest.serviceUrl;
     }
-    async getPlayers() {
-        const players = await this.rest.getData('apiplayer/players');
+    async getPlayers(mediaType, isReady) {
+        const query = {};
+        if (mediaType)
+            query.mediaType = mediaType;
+        if (isReady)
+            query.isReady = isReady;
+        const players = await this.rest.getData('apiplayer/players', query);
         this.playerNames = players.result;
         return this.playerNames;
     }
@@ -27,8 +42,24 @@ export class PlayerService {
         const result = await this.rest.postData('apiplayer/play', playerRequest);
         return result.ok;
     }
-    async playStop(playerName) {
-        const result = await this.rest.postData('apiplayer/playstop', { playerName: playerName });
+    async stop(playerName) {
+        const result = await this.rest.postData('apiplayer/playstop/' + playerName);
+        return result.ok;
+    }
+    async pause(playerName) {
+        const result = await this.rest.postData('apiplayer/playpause/' + playerName);
+        return result.ok;
+    }
+    async next(playerName) {
+        const result = await this.rest.postData('apiplayer/playnext/' + playerName);
+        return result.ok;
+    }
+    async previous(playerName) {
+        const result = await this.rest.postData('apiplayer/playprevious/' + playerName);
+        return result.ok;
+    }
+    async command(playerCommand) {
+        const result = await this.rest.postData('apiplayer/playcommand', playerCommand);
         return result.ok;
     }
 }

package/dist/playerService.js.map

@@ -1 +1 @@
-{"version":3,"file":"playerService.js","sourceRoot":"","sources":["../src/playerService.ts"],"names":[],"mappings":"AA0BA,MAAM,OAAO,aAAa;IACtB,IAAI,CAAQ;IACZ,QAAQ,CAAS;IACjB,GAAG,CAAU;IACb,WAAW,GAAa,EAAE,CAAC;IAC3B,YAAY,GAA6B,EAAE,CAAA;IAE3C,YAAY,IAAW,EAAE,GAAY;QACjC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC;IACpC,CAAC;IACD,KAAK,CAAC,UAAU;QACZ,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAW,mBAAmB,CAAC,CAAC;QACvE,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,MAAkB,CAAC;QAC9C,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IACD,KAAK,CAAC,cAAc,CAAC,UAAkB;QACnC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAe,qBAAqB,EAAE,EAAE,UAAU,EAAE,UAAU,EAAC,CAAC,CAAC;QACvG,IAAI,MAAM,CAAC,EAAE,EAAE;YACX,MAAM,WAAW,GAAG,MAAM,CAAC,MAAsB,CAAC;YAClD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,GAAG,WAAW,CAAC;YAC5C,OAAO,WAAW,CAAC;SACtB;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,aAA6B;QACpC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAiB,gBAAgB,EAAE,aAAa,CAAC,CAAC;QACzF,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;IACD,KAAK,CAAC,QAAQ,CAAC,UAAkB;QAC7B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,oBAAoB,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;QAC/F,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;CACJ"}
+{"version":3,"file":"playerService.js","sourceRoot":"","sources":["../src/playerService.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",

package/src/views/MusicPage.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
     import { inject, ref, reactive, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
-    import { IAppState } from '@christianriedl/utils';
-    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IAudioFile, MediaService } from '@christianriedl/media';
+    import { IAppState, Helper } from '@christianriedl/utils';
+    import { EItemType, EMediaType, IMediaFolder, IMediaItem, IAudioFile, MediaService, EPlayState, PlayerService } from '@christianriedl/media';
 
     const appState = inject<IAppState>('appstate')!;
     const getMediaService = inject<() => MediaService>('get-media')!;
     const mediaService = getMediaService();
+    const getPlayerService = inject<() => PlayerService>('get-player')!;
+    const playerService = getPlayerService();
     const heightStyle = computed(() => { return { height: appState.bodyHeight.value + 'px', overflowY: 'auto' } });
     const isMobile = appState.isMobile;
 
+    const playerNames = reactive<string[]>(['Local']);
+    const currentPlayer = ref('Local');
     const items: IMediaItem[] = reactive([]);
     const selected = ref<IMediaItem>({ Name: 'Root', ItemType: EItemType.Root } as IMediaFolder);
     const playingTrackUrl = ref("");
@@ -19,7 +23,10 @@
     const positionLength = ref(0);
     const listHeight = ref(0);
     const playIndex = ref(-1);
+    const volume = ref(0);
+    const mute = ref(false);
 
+    const isLocal = computed(() => currentPlayer.value == 'Local');
     const backVisible = computed(() => selected.value.ItemType != EItemType.AudioRoot);
     const downloadAlbumVisible = computed(() => selected.value.ItemType == EItemType.AudioAlbum && !playingTrackUrl.value && !isMobile);
     const downloadVisible = computed(() => playingTrackUrl.value && !isMobile);
@@ -35,6 +42,10 @@
         }
         return '';
     });
+    let syncTimer = 0;
+    let cmdTimer = 0;
+    let syncRemote = false;
+
     window.addEventListener('popstate', onPopState);
     function onPopState (event: any) {
         if (event.state && event.state.noBackExitsApp && backVisible.value) {
@@ -59,6 +70,8 @@
         selected.value = root;
         items.splice(0, items.length, ...root.Folders);
         computeListHeight();
+        const players = await playerService.getPlayers(EMediaType.Audio, true);
+        playerNames.splice(playerNames.length, 0, ...players);
     })
     watch(appState.bodyHeight, () => computeListHeight());
     function computeListHeight() {
@@ -97,24 +110,68 @@
         }
     }
     function listBack() {
+        syncRemote = false;
+        playingTrack.value = null;
         const parent = mediaService.folders[selected.value.DLNAParentID];
         selected.value = parent;
         items.splice(0, items.length, ...parent.Folders);
         computeListHeight();
     }
     function onTimeUpdate() {
-        position.value = audio.value!.currentTime;
+        setPosition(audio.value!.currentTime);
+    }
+    function setPosition(value: number) {
+        position.value = value;
         if (playingTrack.value && playingTrack.value.Duration > 0)
             positionLength.value = position.value * 100 / playingTrack.value.Duration;
         else
             positionLength.value = 0;
     }
+    function onPlayerChange() {
+        if (syncTimer) {
+            window.clearTimeout(syncTimer);
+            syncTimer = 0;
+        }
+        if (!isLocal.value) {
+            syncTimer = window.setTimeout(() => getPlayerState(), 1000);
+            syncRemote = true;
+        }
+    }
+    async function getPlayerState() {
+        syncTimer = 0;
+        const playerState = await playerService.getPlayerState(currentPlayer.value);
+        playerState.state = Helper.stringToEnum(EPlayState, playerState.state);
+        paused.value = playerState.state == EPlayState.Paused || playerState.state == EPlayState.Stopped;
+        if (!cmdTimer) {
+            volume.value = playerState.volume;
+            mute.value = playerState.mute;
+        }
+        if (syncRemote) {
+            if (!selected.value || playerState.folderId != selected.value.DLNAID) {
+                const album = mediaService.folders[playerState.albumId];
+                if (album) {
+                    const audios = await mediaService.getAudios(album);
+                    selected.value = audios;
+                    items.splice(0, items.length, ...audios.Files);
+                    playItems.splice(0, items.length, ...audios.Files);
+                    if (playerState.mediaId) {
+                        playIndex.value = items.findIndex((it) => it.DLNAID == playerState.mediaId);
+                        if (playIndex.value >= 0) 
+                            playingTrack.value = items[playIndex.value];
+                    }
+                    computeListHeight();
+                }
+            }
+        }
+        setPosition(playerState.duration);
+        syncTimer = window.setTimeout(() => getPlayerState(), 1000);
+    }
     function onEnded() {
         mediaService.log.trace(`onEnded ${playIndex} ended`);
         if (playIndex.value < playItems.length - 1)
             play(playIndex.value + 1);
     }
-    function play(index: number) {
+    async function play(index: number) {
         if (items.length == playItems.length && items[0].DLNAParentID == playItems[0].DLNAParentID)
             itemIndex.value = index;
         playIndex.value = index;
@@ -122,29 +179,67 @@
         paused.value = false;
         playingTrack.value = item;
         playingTrackUrl.value = mediaService.getAudioUrl(item);
-        audio.value!.src = playingTrackUrl.value;
-        audio.value!.load();
-        audio.value!.play()
-            .then(() => { mediaService.log.trace(`play ${index}ended`) });
+        if (isLocal.value) {
+            audio.value!.src = playingTrackUrl.value;
+            audio.value!.load();
+            audio.value!.play()
+                .then(() => { mediaService.log.trace(`play ${index}ended`) });
+        }
+        else {
+            const rc = await playerService.play({
+                playerName: currentPlayer.value,
+                folderId: selected.value.DLNAID,
+                mediaId: playingTrack.value.DLNAID,
+                trackNo: playingTrack.value.TrackNo
+            });
+        }
+    }
+    async function playFolder() {
+        const rc = await playerService.play({
+            playerName: currentPlayer.value,
+            folderId: selected.value.DLNAID,
+            trackNo: -1
+        });
+        syncRemote = true;
     }
     function playpause() {
-        if (audio.value!.paused) {
-            paused.value = false;
-            audio.value!.play()
-                .then(() => { console.log("play ended") });
+        if (isLocal.value) {
+            if (audio.value!.paused) {
+                paused.value = false;
+                audio.value!.play()
+                    .then(() => { console.log("play ended") });
+            }
+            else {
+                paused.value = true;
+                audio.value!.pause();
+            }
         }
         else {
-            paused.value = true;
-            audio.value!.pause();
+            if (paused.value) {
+                playerService.play({ playerName: currentPlayer.value });
+            }
+            else {
+                playerService.pause(currentPlayer.value);
+            }
         }
     }
     function previous() {
-        if (playIndex.value > 0)
-            play(playIndex.value - 1);
+        if (isLocal.value) {
+            if (playIndex.value > 0)
+                play(playIndex.value - 1);
+        }
+        else {
+            playerService.previous(currentPlayer.value);
+        }
     }
     function next() {
-        if (playIndex.value < playItems.length - 1)
-            play(playIndex.value + 1);
+        if (isLocal.value) {
+            if (playIndex.value < playItems.length - 1)
+                play(playIndex.value + 1);
+        }
+        else {
+            playerService.next(currentPlayer.value);
+        }
     }
     function download() {
         window.open(playingTrackUrl.value);
@@ -153,6 +248,19 @@
         const downloadUrl = mediaService.getAlbumDownloadUrl(selected.value.Url);
         window.open(downloadUrl);
     }
+    function changeVolume() {
+        if (cmdTimer)
+            window.clearTimeout(cmdTimer);
+        
+        cmdTimer = window.setTimeout(async () => {
+            await playerService.command({
+                playerName: currentPlayer.value,
+                cmd: "Volume",
+                value: volume.value.toString()
+            });
+            cmdTimer = 0;
+        }, 500);
+    }
     function to_time(s: number): string {
         var r = "";
         s = Math.floor(s);
@@ -181,14 +289,28 @@
         <audio ref="audio" preload="none" @ended="onEnded" @timeupdate="onTimeUpdate">
         </audio>
         <v-list-item three-line>
-            <v-list-item-avatar tile rounded="0" size="x-large" v-if="selected.ThumbnailUrl">
-                <img width="40" :src="selected.ThumbnailUrl">
-            </v-list-item-avatar>
-            <v-list-item-content>
-                <v-list-item-title>{{selected.title}}</v-list-item-title>
-                <v-list-item-subtitle>{{selected.subTitle}}</v-list-item-subtitle>
-                <v-list-item-subtitle v-if="playingTrack">{{playingTrack.Name}}</v-list-item-subtitle>
-            </v-list-item-content>
+            <v-row>
+                <v-col cols="1">
+                    <v-list-item-avatar tile rounded="0" size="x-large" v-if="selected.ThumbnailUrl">
+                        <img width="60" :src="selected.ThumbnailUrl">
+                    </v-list-item-avatar>
+                </v-col>
+                <v-col cols="7">
+                    <v-list-item-content>
+                        <v-list-item-title>{{selected.title}}</v-list-item-title>
+                        <v-list-item-subtitle>{{selected.subTitle}}</v-list-item-subtitle>
+                        <v-list-item-subtitle v-if="playingTrack">{{playingTrack.Name}}</v-list-item-subtitle>
+                    </v-list-item-content>
+                </v-col>
+                <v-col cols="4">
+                    <v-select v-model="currentPlayer"
+                              :items="playerNames"
+                              persistent-hint
+                              @update:modelValue="onPlayerChange"
+                              dense solo hide-details single-line>
+                    </v-select>
+                </v-col>
+            </v-row>
         </v-list-item>
         <v-card-actions>
             <v-btn v-if="backVisible" @click="listBack">
@@ -198,20 +320,27 @@
                 Album
                 <v-icon>{{$vuetify.icons.values.download}}</v-icon>
             </v-btn>
-            <v-btn small v-if="playingTrackUrl" @click="playpause">
+            <v-btn v-if="!isLocal" @click="playFolder">
+                {{selected.title}}
+                <v-icon>{{$vuetify.icons.values.play}}</v-icon>
+            </v-btn>
+            <v-btn small v-if="playingTrack" @click="playpause">
                 <v-icon>{{paused ? $vuetify.icons.values.play : $vuetify.icons.values.pause }}</v-icon>
             </v-btn>
-            <v-btn small v-if="playingTrackUrl" @click="previous">
+            <v-btn small v-if="playingTrack" @click="previous">
                 <v-icon>{{$vuetify.icons.values.prev}}</v-icon>
             </v-btn>
-            <v-btn small v-if="playingTrackUrl" @click="next">
+            <v-btn small v-if="playingTrack" @click="next">
                 <v-icon>{{$vuetify.icons.values.next}}</v-icon>
             </v-btn>
             <v-btn small v-if="downloadVisible" @click="download">
                 <v-icon>{{$vuetify.icons.values.download}}</v-icon>
             </v-btn>
+            <v-slider v-if="playingTrack" style="width:30%" color="red" track-color="blue" track-fill-color="red" v-model="volume" hide-details density="compact"
+                    min="0" max="100" step="5" @update:modelValue="changeVolume">
+            </v-slider>
         </v-card-actions>
-        <v-progress-linear v-if="playingTrackUrl" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
+        <v-progress-linear v-if="playingTrack" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
     </v-card>
     <v-card :height="listHeight" class="overflow-y-auto bg-media">
         <v-list two-line class="bg-media">

package/src/views/PhotosPage.vue

@@ -160,7 +160,7 @@
                 <v-icon large>{{$vuetify.icons.values.back}}</v-icon>Back
             </v-btn>
             <v-rating clearable length="2" v-model="selected.rating" @update:modelValue="onRating" />
-            <v-select v-model="selected.root" c
+            <v-select v-model="selected.root" 
                         :items="roots"
                         persistent-hint
                         @update:modelValue="onRootChange"