@christianriedl/media 1.0.2 → 1.0.3

package/dist/playerService.d.ts

@@ -26,6 +26,11 @@ export interface IPlayerRequest {
     trackNo?: number;
     withStreamTitle?: boolean;
 }
+export interface IPlayerCommand {
+    playerName: string;
+    cmd: string;
+    value: string;
+}
 export declare class PlayerService {
     rest: IRest;
     mediaUrl: string;
@@ -36,6 +41,9 @@ export declare class PlayerService {
     getPlayers(): Promise<string[]>;
     getPlayerState(playerName: string): Promise<IPlayerState | null>;
     play(playerRequest: IPlayerRequest): Promise<boolean>;
-    playStop(playerName: string): Promise<boolean>;
-    playPause(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

@@ -37,12 +37,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 playPause(playerName) {
-        const result = await this.rest.postData('apiplayer/playpause', { playerName: playerName });
+    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":"AAOA,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IAClB,mDAAY,CAAA;IACZ,iDAAO,CAAA;IACP,+CAAM,CAAA;IACN,iDAAO,CAAA;IACP,2CAAI,CAAA;IACJ,iDAAO,CAAA;IACP,mDAAQ,CAAA;AACZ,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB;AAqBD,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;IACD,KAAK,CAAC,SAAS,CAAC,UAAkB;QAC9B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,qBAAqB,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;QAChG,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;CACJ"}
+{"version":3,"file":"playerService.js","sourceRoot":"","sources":["../src/playerService.ts"],"names":[],"mappings":"AAOA,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IAClB,mDAAY,CAAA;IACZ,iDAAO,CAAA;IACP,+CAAM,CAAA;IACN,iDAAO,CAAA;IACP,2CAAI,CAAA;IACJ,iDAAO,CAAA;IACP,mDAAQ,CAAA;AACZ,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB;AA2BD,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,IAAI,CAAC,UAAkB;QACzB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,qBAAqB,GAAG,UAAU,CAAC,CAAC;QACjF,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;IACD,KAAK,CAAC,KAAK,CAAC,UAAkB;QAC1B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,sBAAsB,GAAG,UAAU,CAAC,CAAC;QAClF,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,UAAkB;QACzB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,qBAAqB,GAAG,UAAU,CAAC,CAAC;QACjF,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;IACD,KAAK,CAAC,QAAQ,CAAC,UAAkB;QAC7B,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,yBAAyB,GAAG,UAAU,CAAC,CAAC;QACrF,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;IACD,KAAK,CAAC,OAAO,CAAC,aAA6B;QACvC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAM,uBAAuB,EAAE,aAAa,CAAC,CAAC;QACrF,OAAO,MAAM,CAAC,EAAE,CAAC;IACrB,CAAC;CACJ"}

package/package.json

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

package/src/views/MusicPage.vue

@@ -26,7 +26,7 @@
     const volume = ref(0);
     const mute = ref(false);
 
-    const isLocal = computed(() => currentPlayer == 'Local');
+    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);
@@ -42,7 +42,9 @@
         }
         return '';
     });
-    let timer = 0;
+    let syncTimer = 0;
+    let cmdTimer = 0;
+    let syncRemote = false;
 
     window.addEventListener('popstate', onPopState);
     function onPopState (event: any) {
@@ -108,51 +110,61 @@
         }
     }
     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 (timer) {
-            window.clearTimeout(timer);
-            timer = 0;
+        if (syncTimer) {
+            window.clearTimeout(syncTimer);
+            syncTimer = 0;
         }
-        if (currentPlayer != 'Local') {
-            timer = window.setTimeout(getPlayerState, 1000);
+        if (!isLocal.value) {
+            syncTimer = window.setTimeout(() => getPlayerState(), 1000);
+            syncRemote = true;
         }
     }
     async function getPlayerState() {
-        const playerState = await playerService.getPlayerState(currentPlayer);
+        syncTimer = 0;
+        const playerState = await playerService.getPlayerState(currentPlayer.value);
         playerState.state = Helper.stringToEnum(EPlayState, playerState.state);
-        paused.value = playerState.state == EPlayState.Paused;
-        volume.value = playerState.volume;
-        mute.value = playerState.mute;
-        if (!selected.value || playerState.folderId != selected.value.DLNAID) {
-            const album = mediaService.folders[playerState.folderId];
-            if (album) {
-                const audios = mediaService.getAudios(selected.Value);
-                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];
-                        position.value = playingTrack.value.duration * playerState.duration / 100;
+        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();
                 }
-                computeListHeight();
             }
         }
-        timer = window.setTimeout(getPlayerState, 1000);
+        setPosition(playerState.duration);
+        syncTimer = window.setTimeout(() => getPlayerState(), 1000);
     }
     function onEnded() {
         mediaService.log.trace(`onEnded ${playIndex} ended`);
@@ -167,7 +179,7 @@
         paused.value = false;
         playingTrack.value = item;
         playingTrackUrl.value = mediaService.getAudioUrl(item);
-        if (isLocal) {
+        if (isLocal.value) {
             audio.value!.src = playingTrackUrl.value;
             audio.value!.load();
             audio.value!.play()
@@ -175,15 +187,23 @@
         }
         else {
             const rc = await playerService.play({
-                playerName: currentPlayer,
+                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 (isLocal) {
+        if (isLocal.value) {
             if (audio.value!.paused) {
                 paused.value = false;
                 audio.value!.play()
@@ -194,20 +214,32 @@
                 audio.value!.pause();
             }
         }
-        if (paused.value) {
-            playerService.play({ playerName: currentPlayer });
-        }
         else {
-            playerService.pause(currentPlayer);
+            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);
@@ -216,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);
@@ -245,26 +290,26 @@
         </audio>
         <v-list-item three-line>
             <v-row>
-                <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-col cols="2">
+                <v-col cols="1">
                     <v-list-item-avatar tile rounded="0" size="x-large" v-if="selected.ThumbnailUrl">
-                        <img width="40" :src="selected.ThumbnailUrl">
+                        <img width="60" :src="selected.ThumbnailUrl">
                     </v-list-item-avatar>
                 </v-col>
-                <v-col cols="6">
+                <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>
@@ -275,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">