@christianriedl/media 1.0.301 → 1.0.302

package/dist/iMedia.d.ts

@@ -344,6 +344,7 @@ export interface IPlaylistState {
     position: string;
 }
 export interface IPlaylistService {
+    log: ILogger;
     soundbarOn: boolean;
     getTitles(): Promise<string[]>;
     getFeed(title: string): Promise<IRssFeed | null>;

package/package.json

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

package/src/views/MusicPage.vue

@@ -244,6 +244,9 @@
     function onlineRadio() {
         router.push({ path: 'onlineradios' });
     }
+    function onlinePodcast() {
+        router.push({ path: 'onlinepodcasts' });
+    }
     function download() {
         window.open(playingTrackUrl.value);
     }
@@ -319,9 +322,14 @@
             <v-btn v-if="backVisible" @click="listBack">
                 <v-icon icon="$back" />
             </v-btn>
-            <v-btn v-else @click.stop="onlineRadio">
+	    <template v-else>
+            <v-btn @click.stop="onlineRadio">
                 <v-icon size="x-large" icon="$radio" />
             </v-btn>
+            <v-btn @click.stop="onlinePodcast">
+                <v-icon size="x-large" icon="$podcast" />
+            </v-btn>
+	    </template>
             <v-btn v-if="downloadAlbumVisible" @click="downloadAlbum">
                 Album
                 <v-icon icon="$download" />

package/src/views/{OnlineBroadcastPage.vue → OnlinePodcastsPage.vue}

@@ -3,7 +3,7 @@
     import type { ComponentPublicInstance } from 'vue';
     import { useRouter } from 'vue-router';
     import { IAppState, EScope, EDevice, appStateSymbol, appConfigSymbol } from '@christianriedl/utils';
-    import { getPlaylistSymbol, IPlaylistService, IPlaylistState, IRssFeed } from '@christianriedl/media';
+    import { getPlaylistSymbol, IPlaylistService, IPlaylistState, IRssFeed, EPlaylistCommand } from '@christianriedl/media';
 
     const appState = inject(appStateSymbol)!;
     const getPlaylistService = inject(getPlaylistSymbol)!;
@@ -21,9 +21,12 @@
     const currentPlayer = ref<string>(playerNames[0]);
     const playLocal = computed(() => currentPlayer.value == 'Local');
     const playIndex = ref(-1);
+    const itemIndex = ref(0);
     const playingFeed = ref<IRssFeed|null>(null);
     const position = ref(0);
     const positionLength = ref(0);
+    const volume = ref(0);
+    const paused = ref(false);
     let statusTimer = 0;
 
 
@@ -52,20 +55,21 @@
     }
     async function play() {
 	if (playLocal.value) {	
-	    audio.value!.src = selected.value.link;
+	    audio.value!.src = selected.value!.link;
 	    audio.value!.load();
-	    await audio.value!.play();
-	    playlistService.log.trace(`play local ${selected.value.title}`)
+	    audio.value!.play().then(() => {  
+		playlistService.log.trace(`play local ${selected.value!.title}`)
+	    });
 	}
 	else {
-	    const rc = await playlistService.play(selected.value.link);    
+	    const rc = await playlistService.play(selected.value!.link);    
 	    if (!rc) 
 		return;
 	    await getStatus();
-    	    playlistService.log.trace(`play remote ${selected.value.title}`)
+    	    playlistService.log.trace(`play remote ${selected.value!.title}`)
 	}
 	playingFeed.value = selected.value;	
-	playIndex.value = feeds.findIndex((f) => f.link == selected.value.link);
+	itemIndex.value = playIndex.value = feeds.findIndex((f) => f.link == selected.value!.link);
     }
     function listItem(item: IRssFeed) {
         selected.value = item;
@@ -75,7 +79,7 @@
         router.back();
     }
     async function getStatus() {
-	const status = await playlistService.getStatus();
+	const status = await playlistService.getState();
 	status.value = status;
 	setPosition(status.position.toNumber());
 	statusTimer = setTimeout(async () => getStatus(), 1000);
@@ -112,11 +116,55 @@
     }
     function setPosition(value: number) {
         position.value = value;
-        if (playingFeed.value && playingFeed.value.duration > 0)
-            positionLength.value = position.value * 100 / playingFeed.value.duration;
+        if (playingFeed.value!.duration)
+            positionLength.value = position.value * 100 / playingFeed.value!.duration;
         else
             positionLength.value = 0;
     }
+    function onPlayerChange() {
+        if (statusTimer) {
+            clearTimeout(statusTimer);
+            statusTimer = 0;
+        }
+        if (!playLocal.value) {
+            statusTimer = setTimeout(() => getStatus(), 1000);
+        }
+    }
+    function playpause() {
+        if (playLocal.value) {
+            if (audio.value!.paused) {
+                paused.value = false;
+                audio.value!.play()
+                    .then(() => { console.log("play ended") });
+            }
+            else {
+                paused.value = true;
+                audio.value!.pause();
+            }
+        }
+        else {
+            if (paused.value) {
+                playlistService.playCommand(EPlaylistCommand.Resume);
+            }
+            else {
+                playlistService.playCommand(EPlaylistCommand.Pause);
+            }
+        }
+    }
+    function previous() {
+        if (playIndex.value <= 0)
+	    return;
+	selected.value = feeds[playIndex.value - 1];
+        play();
+    }
+    function next() {
+        if (playIndex.value >= feeds.length - 1)
+	    return;
+	selected.value = feeds[playIndex.value + 1];
+        play();
+    }
+    function changeVolume() {
+    }
 
 </script>
 
@@ -126,8 +174,8 @@
         </audio>
         <v-list-item lines="three">
             <v-list-item-content>
-                <v-list-item-title text-h6>{{selected.title}}</v-list-item-title>
-                <v-list-item-subtitle>{{toSubTitle(selected)}}</v-list-item-subtitle>
+                <v-list-item-title text-h6>{{selected!.title}}</v-list-item-title>
+                <v-list-item-subtitle>{{toSubTitle(selected!)}}</v-list-item-subtitle>
             </v-list-item-content>
             <template v-slot:append>
                 <v-select v-model="currentPlayer"
@@ -135,28 +183,28 @@
                             persistent-hint
                             @update:modelValue="onPlayerChange"
                             hide-details single-line>
-                </v-select>
+                </v-select>!
             </template>
         </v-list-item>
         <v-card-actions>
             <v-btn v-if="backVisible" @click="listBack">
                 <v-icon icon="$back" />
             </v-btn>
-            <v-btn size="small" v-if="playingTrack" @click="playpause">
+            <v-btn size="small" v-if="playingFeed" @click="playpause">
                 <v-icon v-if="paused" icon="$play" />
                 <v-icon v-else icon="$pause" />
             </v-btn>
-            <v-btn size="small" v-if="playingTrack" @click="previous">
+            <v-btn size="small" v-if="playingFeed" @click="previous">
                 <v-icon icon="$prev" />
             </v-btn>
-            <v-btn size="small" v-if="playingTrack" @click="next">
+            <v-btn size="small" v-if="playingFeed" @click="next">
                 <v-icon icon="$next" />
             </v-btn>
-            <v-slider v-if="!isLocal && playingTrack" style="width:30%" color="red" track-color="blue" track-fill-color="red" v-model="volume" hide-details density="compact"
+            <v-slider v-if="!playLocal && playingFeed" 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="playingTrack" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
+        <v-progress-linear v-if="playingFeed" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
     </v-card>
     <v-card :height="listHeight" density="compact" class="overflow-y-auto bg-media">
         <v-list lines="two" class="bg-media">