From 6947b5eaa1e55db4745ba2b8bdbe44672f0b1f61 Mon Sep 17 00:00:00 2001
From: 4www <4www@duck.com>
Date: Sun, 10 Nov 2024 18:14:43 +0100
Subject: [PATCH] add support for host-root-url and platform-url together

---
 src/Radio4000Player.vue | 644 +++++++++++++++++++---------------------
 1 file changed, 307 insertions(+), 337 deletions(-)

diff --git a/src/Radio4000Player.vue b/src/Radio4000Player.vue
index a143c4c..d32df6d 100644
--- a/src/Radio4000Player.vue
+++ b/src/Radio4000Player.vue
@@ -1,66 +1,32 @@
 <template>
-	<div class="Layout" v-if="canLoad" :class="{ isShowHeader: showHeader, isShowTracklist: showTracklist, isShowControls: showControls }">
-		<FetchData
-			v-if="isOnline"
-			:channelId="channelId"
-			:channelSlug="channelSlug"
-			:trackId="trackId"
-			:currentChannel="channel"
-			:currentTracks="tracks"
-			@afterFetch="updateData">
+	<div class="Layout" v-if="canLoad"
+		:class="{ isShowHeader: showHeader, isShowTracklist: showTracklist, isShowControls: showControls }">
+		<FetchData v-if="isOnline" :channelId="channelId" :channelSlug="channelSlug" :trackId="trackId"
+			:currentChannel="channel" :currentTracks="tracks" @afterFetch="updateData">
 		</FetchData>
 
-		<SpeechDispatcher
-			v-if="speech"
-			:isPlaying="isPlaying"
-			:track="track"></SpeechDispatcher>
+		<SpeechDispatcher v-if="speech" :isPlaying="isPlaying" :track="track"></SpeechDispatcher>
 
 		<div class="Layout-header">
-			<channel-header
-				:isOnline="isOnline"
-				:channel="channel"
-				:image="image"
-				:playlistPermalink="playlistPermalink"
-				:platform="platform"
-				:track="track"></channel-header>
+			<channel-header :isOnline="isOnline" :channel="channel" :image="image"
+				:playlistPermalink="playlistPermalink" :platform="platform" :track="track"></channel-header>
 		</div>
 		<div class="Layout-section">
 			<div class="Layout-aside">
-				<provider-player
-					:autoplay="autoplay"
-					:isMuted="isMuted"
-					:isPlaying="isPlaying"
-					:track="track"
-					:volume="internalVolume"
-					@play="play"
-					@pause="pause"
-					@mediaNotAvailable="mediaNotAvailable"
+				<provider-player :autoplay="autoplay" :isMuted="isMuted" :isPlaying="isPlaying" :track="track"
+					:volume="internalVolume" @play="play" @pause="pause" @mediaNotAvailable="mediaNotAvailable"
 					@trackEnded="trackEnded"></provider-player>
 			</div>
 			<div class="Layout-main">
-				<tracklist
-					:currentTrackIndex="currentTrackIndex"
-					:channelSlug="channel.slug"
-					:track="track"
-					:tracks="tracksPool"
-					:query="userQuery"
-					:queryPermalink="queryPermalink"
-					:platform="platform"
+				<tracklist :currentTrackIndex="currentTrackIndex" :channelSlug="channel.slug" :track="track"
+					:tracks="tracksPool" :query="userQuery" :queryPermalink="queryPermalink" :platform="platform"
 					@select="playTrack"></tracklist>
 			</div>
 		</div>
 		<div class="Layout-footer">
-			<player-controls
-				:isDisabled="!this.tracksPool.length"
-				:isMuted="isMuted"
-				:isPlaying="isPlaying"
-				:isShuffle="isShuffle"
-				:volume="volume"
-				@play="play"
-				@pause="pause"
-				@toggleMute="toggleMute"
-				@toggleShuffle="toggleShuffle"
-				@next="playNextTrack"></player-controls>
+			<player-controls :isDisabled="!this.tracksPool.length" :isMuted="isMuted" :isPlaying="isPlaying"
+				:isShuffle="isShuffle" :volume="volume" @play="play" @pause="pause" @toggleMute="toggleMute"
+				@toggleShuffle="toggleShuffle" @next="playNextTrack"></player-controls>
 		</div>
 	</div>
 	<div v-else class="Console">
@@ -71,328 +37,332 @@
 </template>
 
 <script>
-	import debounce from 'lodash.debounce'
-	import { mediaUrlParser } from 'media-url-parser'
-	import { shuffleArray } from './utils/shuffle-helpers'
-
-	import FetchData from './FetchData.vue'
-	import SpeechDispatcher from './SpeechDispatcher.vue'
-	import ChannelHeader from './ChannelHeader.vue'
-	import Tracklist from './Tracklist.vue'
-	import ProviderPlayer from './ProviderPlayer.vue'
-	import PlayerControls from './PlayerControls.vue'
-
-	export default {
-		components: {
-			FetchData,
-			SpeechDispatcher,
-			ChannelHeader,
-			Tracklist,
-			ProviderPlayer,
-			PlayerControls
+import debounce from 'lodash.debounce'
+import { mediaUrlParser } from 'media-url-parser'
+import { shuffleArray } from './utils/shuffle-helpers'
+
+import FetchData from './FetchData.vue'
+import SpeechDispatcher from './SpeechDispatcher.vue'
+import ChannelHeader from './ChannelHeader.vue'
+import Tracklist from './Tracklist.vue'
+import ProviderPlayer from './ProviderPlayer.vue'
+import PlayerControls from './PlayerControls.vue'
+
+export default {
+	components: {
+		FetchData,
+		SpeechDispatcher,
+		ChannelHeader,
+		Tracklist,
+		ProviderPlayer,
+		PlayerControls
+	},
+
+	// Top level properties are also exposed as attributes on the web component.
+	props: {
+		/* data */
+		channelSlug: String,
+		channelId: String,
+		trackId: String,
+
+		hostRootUrl: {
+			type: String,
+			default: 'https://radio4000.com/'
 		},
-
-		// Top level properties are also exposed as attributes on the web component.
-		props: {
-			/* data */
-			channelSlug: String,
-			channelId: String,
-			trackId: String,
-
-			hostRootUrl: {
-				type: String,
-				default: 'https://radio4000.com/'
-			},
-			platform: {
-				type: Boolean,
-				default: false
-			},
-			query: String,
-
-			/* player behavior */
-			autoplay: Boolean,
-			shuffle: Boolean,
-			speech: Boolean,
-			volume: {
-				type: Number,
-				default: 100
-			},
-			
-			/* ui */
-			/* we always show media; youtube terms. */
-			/* when all are activated, media is fullscreen */
-			showHeader: {
-				type: Boolean,
-				default: true
-			},
-			showTracklist: {
-				type: Boolean,
-				default: true
-			},
-			showControls: {
-				type: Boolean,
-				default: true
-			}		
+		platform: {
+			type: Boolean,
+			default: false
+		},
+		query: String,
+
+		/* player behavior */
+		autoplay: Boolean,
+		shuffle: Boolean,
+		speech: Boolean,
+		volume: {
+			type: Number,
+			default: 100
 		},
 
-		data() {
-			return {
-				channel: {},
-				image: '',
-				tracks: [],
-				track: {},
-				tracksPool: [],
-				isPlaying: false,
-				isShuffle: this.$props.shuffle
-			}
+		/* ui */
+		/* we always show media; youtube terms. */
+		/* when all are activated, media is fullscreen */
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		showTracklist: {
+			type: Boolean,
+			default: true
 		},
+		showControls: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	data() {
+		return {
+			channel: {},
+			image: '',
+			tracks: [],
+			track: {},
+			tracksPool: [],
+			isPlaying: false,
+			isShuffle: this.$props.shuffle
+		}
+	},
 
-		created() {
-			this.$root.$on('setVolume', debounce(vol => {
-				this.internalVolume = vol
-			}, 100))
+	created() {
+		this.$root.$on('setVolume', debounce(vol => {
+			this.internalVolume = vol
+		}, 100))
 
-			if (this.autoplay) {
-				this.play()
-			}
-		},
+		if (this.autoplay) {
+			this.play()
+		}
+	},
 
-		computed: {
-			isOnline() {
-				return window.navigator.onLine
-			},
-			userQuery() {
-				if (this.channel && this.channel.query) {
-					return this.channel.query
-				}
+	computed: {
+		isOnline() {
+			return window.navigator.onLine
+		},
+		userQuery() {
+			if (this.channel && this.channel.query) {
+				return this.channel.query
+			}
 
-				if (this.query) {
-					return this.query
-				}
-				return ''
-			},
-			playlistPermalink() {
-				let rootUrl = ''
-				if (this.platform) {
-					rootUrl = '/'
-				} else {
+			if (this.query) {
+				return this.query
+			}
+			return ''
+		},
+		playlistPermalink() {
+			let rootUrl = ''
+			if (this.platform) {
+				if (this.hostRootUrl) {
 					rootUrl = this.hostRootUrl
+				} else {
+					rootUrl = '/'
 				}
+			} else {
+				rootUrl = this.hostRootUrl
+			}
 
-				let channelSlug = ''
-				if (this.channelSlug) {
-					channelSlug = this.channelSlug
-				} else if (this.channel && this.channel.slug) {
-					channelSlug = this.channel.slug
-				}
+			let channelSlug = ''
+			if (this.channelSlug) {
+				channelSlug = this.channelSlug
+			} else if (this.channel && this.channel.slug) {
+				channelSlug = this.channel.slug
+			}
 
-				if (channelSlug) {
-					rootUrl = rootUrl + channelSlug
-				}
-				return rootUrl
-			},
-			queryPermalink() {
-				if (this.platform)
+			if (channelSlug) {
+				rootUrl = rootUrl + channelSlug
+			}
+			return rootUrl
+		},
+		queryPermalink() {
+			if (this.platform)
 				return this.playlistPermalink + '/tracks?search=' + this.userQuery
-			},
-			// When either of these is set, it means we can load and show the player.
-			canLoad() {
-				return this.channel || this.channelSlug || this.channelId || this.trackId
-			},
-			currentTrackIndex() {
-				let index = this.tracksPool.findIndex(track => track.uid === this.track.uid)
-				// if there is no index, find a possible match
-				// the use case is on r4-cms. When we load the player,
-				// starting from `one specific track`, it is serialized outside the `track list`,
-				// therefore its uid, is different from the uid of the same track in the `track list`.
-				if (index < 0) {
-					index = this.tracksPool.findIndex(track => {
-						if (!track.id || !this.track.id) {
-							return false
-						} else {
-							return track.id === this.track.id
-						}
-					})
-				} 
-				return index 
-			},
-			internalVolume: {
-				get() {
-					return this.volume
-				},
-				set(volume) {
-					const el = this.$root.$el.parentNode
-					el.setAttribute('volume', volume)
-				}
-			},
-			isMuted: {
-				get() {
-					return this.volume === 0
-				},
-				set(newValue) {
-					if (newValue) {
-						this.$root.$emit('setVolume', 0)
+		},
+		// When either of these is set, it means we can load and show the player.
+		canLoad() {
+			return this.channel || this.channelSlug || this.channelId || this.trackId
+		},
+		currentTrackIndex() {
+			let index = this.tracksPool.findIndex(track => track.uid === this.track.uid)
+			// if there is no index, find a possible match
+			// the use case is on r4-cms. When we load the player,
+			// starting from `one specific track`, it is serialized outside the `track list`,
+			// therefore its uid, is different from the uid of the same track in the `track list`.
+			if (index < 0) {
+				index = this.tracksPool.findIndex(track => {
+					if (!track.id || !this.track.id) {
+						return false
 					} else {
-						this.$root.$emit('setVolume', 100)
+						return track.id === this.track.id
 					}
-				}
+				})
 			}
+			return index
 		},
-
-		watch: {
-			shuffle(shuffle) {
-				this.shuffle = shuffle
+		internalVolume: {
+			get() {
+				return this.volume
 			},
-			tracks(tracks) {
-				this.newTracksPool()
-				const noTrack = Object.keys(this.track).length === 0
-				if (noTrack) {
-					if ( this.isPlaying) {
-						this.playNextTrack()
-					} else {
-						this.loadNextTrack()
-					}
-				}
+			set(volume) {
+				const el = this.$root.$el.parentNode
+				el.setAttribute('volume', volume)
 			}
 		},
-
-		methods: {
-			serializeTracks(tracks) {
-				return tracks.map(this.serializeTrack)
+		isMuted: {
+			get() {
+				return this.volume === 0
 			},
-			serializeTrack(track) {
-				const randomString = window.crypto.getRandomValues(new Uint32Array(1))[0]
-				let parsed;
-
-				try {
-					parsed = mediaUrlParser(track.url.trim())
-				} catch(e) {
-					console.error('Broken track', track)
+			set(newValue) {
+				if (newValue) {
+					this.$root.$emit('setVolume', 0)
+				} else {
+					this.$root.$emit('setVolume', 100)
 				}
+			}
+		}
+	},
 
-				if (!parsed) {
-					return {
-						id: track.id,
-						uid: randomString,
-						url: track.url,
-						title: `(bad url) ${track.title}`,
-						body: track.body
-					}
+	watch: {
+		shuffle(shuffle) {
+			this.shuffle = shuffle
+		},
+		tracks(tracks) {
+			this.newTracksPool()
+			const noTrack = Object.keys(this.track).length === 0
+			if (noTrack) {
+				if (this.isPlaying) {
+					this.playNextTrack()
+				} else {
+					this.loadNextTrack()
 				}
-				// id = original id of the track, untouched when given to the player
-				// (it is also unsused, in this app, just given back in the events
-				// that this player emits to outside apps. Ex: radio4000 when a track changes)
-				// uid = unique id, each track has semi-random id just for itself
-				// pid = id given by the provider for this media (youtube.com/:video-id)
+			}
+		}
+	},
+
+	methods: {
+		serializeTracks(tracks) {
+			return tracks.map(this.serializeTrack)
+		},
+		serializeTrack(track) {
+			const randomString = window.crypto.getRandomValues(new Uint32Array(1))[0]
+			let parsed;
+
+			try {
+				parsed = mediaUrlParser(track.url.trim())
+			} catch (e) {
+				console.error('Broken track', track)
+			}
+
+			if (!parsed) {
 				return {
-					uid: parsed.id + randomString,
 					id: track.id,
-					pid: parsed.id,
-					provider: parsed.provider,
-					url: parsed.url,
-					title: track.title,
+					uid: randomString,
+					url: track.url,
+					title: `(bad url) ${track.title}`,
 					body: track.body
 				}
-			},
-			updateData(newData) {
-				if (newData.channel) this.channel = newData.channel
-				if (newData.image) this.image = newData.image
-				if (newData.tracks) {
-					this.tracks = this.serializeTracks(newData.tracks)
-				}
-				if (newData.track) {
-					// Don't set track directly.
-					this.playTrack(this.serializeTrack(newData.track))
-				}
-			},
-			newTracksPool() {
-				var pool = this.tracks.slice().reverse()
-				if (this.isShuffle) {
-					const currentTrackArray = pool.splice(this.currentTrackIndex, 1)
-					const shuffledArray = shuffleArray(pool)
-					this.tracksPool = [...currentTrackArray, ...shuffledArray]
-				} else {
-					this.tracksPool = pool
-				}
-			},
-			loadTrack(track) {
-				const previousTrack = this.track
-				this.track = track
-				this.$emit('trackChanged', {
-					track, previousTrack
-				})
-			},
-			playTrack(track) {
-				this.loadTrack(track)
-				// force play when asking to play a track
-				// also solves mediaNotAvailable putting pause
-				this.play()
-			},
-			playNextTrack() {
-				const track = this.getNextTrack()
-				if (!track) return
-				this.playTrack(track)
-			},
-			loadNextTrack() {
-				const track = this.getNextTrack()
-				if (!track) return
-				this.loadTrack(track)
-			},
-			getNextTrack() {
-				const pool = this.tracksPool
-				const index = this.currentTrackIndex
-				return pool[index + 1]
-			},
-			play() {
-				this.isPlaying = true
-			},
-			pause() {
-				this.isPlaying = false
-			},
-			toggleShuffle() {
-				this.isShuffle = !this.isShuffle
-				this.newTracksPool()
-			},
-			toggleMute() {
-				this.isMuted = !this.isMuted
-			},
+			}
+			// id = original id of the track, untouched when given to the player
+			// (it is also unsused, in this app, just given back in the events
+			// that this player emits to outside apps. Ex: radio4000 when a track changes)
+			// uid = unique id, each track has semi-random id just for itself
+			// pid = id given by the provider for this media (youtube.com/:video-id)
+			return {
+				uid: parsed.id + randomString,
+				id: track.id,
+				pid: parsed.id,
+				provider: parsed.provider,
+				url: parsed.url,
+				title: track.title,
+				body: track.body
+			}
+		},
+		updateData(newData) {
+			if (newData.channel) this.channel = newData.channel
+			if (newData.image) this.image = newData.image
+			if (newData.tracks) {
+				this.tracks = this.serializeTracks(newData.tracks)
+			}
+			if (newData.track) {
+				// Don't set track directly.
+				this.playTrack(this.serializeTrack(newData.track))
+			}
+		},
+		newTracksPool() {
+			var pool = this.tracks.slice().reverse()
+			if (this.isShuffle) {
+				const currentTrackArray = pool.splice(this.currentTrackIndex, 1)
+				const shuffledArray = shuffleArray(pool)
+				this.tracksPool = [...currentTrackArray, ...shuffledArray]
+			} else {
+				this.tracksPool = pool
+			}
+		},
+		loadTrack(track) {
+			const previousTrack = this.track
+			this.track = track
+			this.$emit('trackChanged', {
+				track, previousTrack
+			})
+		},
+		playTrack(track) {
+			this.loadTrack(track)
+			// force play when asking to play a track
+			// also solves mediaNotAvailable putting pause
+			this.play()
+		},
+		playNextTrack() {
+			const track = this.getNextTrack()
+			if (!track) return
+			this.playTrack(track)
+		},
+		loadNextTrack() {
+			const track = this.getNextTrack()
+			if (!track) return
+			this.loadTrack(track)
+		},
+		getNextTrack() {
+			const pool = this.tracksPool
+			const index = this.currentTrackIndex
+			return pool[index + 1]
+		},
+		play() {
+			this.isPlaying = true
+		},
+		pause() {
+			this.isPlaying = false
+		},
+		toggleShuffle() {
+			this.isShuffle = !this.isShuffle
+			this.newTracksPool()
+		},
+		toggleMute() {
+			this.isMuted = !this.isMuted
+		},
 
-			/**
-			 * Public methods
-			 */
-
-			// As an alternative to letting the player load the right data for you, you can pass a "playlist" object.
-			updatePlaylist(playlist) {
-				//  Reset tracks and image to show loading UX immediately.
-				this.tracks = []
-				this.image = ''
-				
-				this.channel = playlist
-				if (playlist.image) this.image = playlist.image
-				if (playlist.tracks.length) {
-					const serializedTracks = this.serializeTracks(playlist.tracks)
-					this.tracks = serializedTracks
-				}
-			},
+		/**
+		 * Public methods
+		 */
+
+		// As an alternative to letting the player load the right data for you, you can pass a "playlist" object.
+		updatePlaylist(playlist) {
+			//  Reset tracks and image to show loading UX immediately.
+			this.tracks = []
+			this.image = ''
+
+			this.channel = playlist
+			if (playlist.image) this.image = playlist.image
+			if (playlist.tracks.length) {
+				const serializedTracks = this.serializeTracks(playlist.tracks)
+				this.tracks = serializedTracks
+			}
+		},
 
-			/**
-			 * Public events
-			 */
+		/**
+		 * Public events
+		 */
 
-			trackEnded() {
-				this.$emit('trackEnded', {
-					track: this.track
-				})
-				this.playNextTrack()
-			},
-			mediaNotAvailable() {
-				this.$emit('mediaNotAvailable', {
-					track: this.track
-				})
-				this.trackEnded()					
-			}
+		trackEnded() {
+			this.$emit('trackEnded', {
+				track: this.track
+			})
+			this.playNextTrack()
+		},
+		mediaNotAvailable() {
+			this.$emit('mediaNotAvailable', {
+				track: this.track
+			})
+			this.trackEnded()
 		}
 	}
+}
 </script>
 
 <style>