Merge pull request #92 from internet4000/refactor/newyears

Refactor/newyears
internet4000 · Jan 3, 2018 · 84f0830 · 84f0830
2 parents 6925150 + c321855
commit 84f0830
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 242 deletions.
diff --git a/index.html b/index.html
@@ -16,7 +16,7 @@
 <body>
 
 	<!-- There are three different ways to start playing: -->
-	<radio4000-player channel-slug="oskar"></radio4000-player>
+	<radio4000-player channel-slug="200ok"></radio4000-player>
 	<!-- <radio4000-player track-id="-KdVUsr70yYdIoBDmL43"></radio4000-player> -->
 	<!-- <radio4000-player channel-slug="oskar"></radio4000-player> -->
 	<!-- <radio4000-player channel-id="-KFzPXLNzmKjPGwyY-xx"></radio4000-player> -->

diff --git a/src/ChannelHeader.vue b/src/ChannelHeader.vue
@@ -48,7 +48,7 @@ export default {
 			return this.r4Url ? '_self' : '_blank'
 		},
 		channelDescription() {
-			const { title = '', slug = '', body = ''} = this.channel;
+			const { title = '', slug = '', body = ''} = this.channel
 			return `[ ${title}, @${slug} ] ${body}`
 		}
 	}

diff --git a/src/PlayPauseButton.vue b/src/PlayPauseButton.vue
@@ -35,60 +35,60 @@ export default {
 	display: flex;
 }
 .PlayPause::-moz-selection {
-  background-color: transparent;
+	background-color: transparent;
 }
 .PlayPause::selection {
-  background-color: transparent;
+	background-color: transparent;
 }
 .PlayPause-state {
-  width: 0;
-  height: 0;
-  border: none;
-  visibility: hidden;
-  margin: 0;
-  position: absolute;
+	width: 0;
+	height: 0;
+	border: none;
+	visibility: hidden;
+	margin: 0;
+	position: absolute;
 }
 .PlayPause-label {
-	flex: 1;	
-  display: flex;
+	flex: 1;
+	display: flex;
 }
 .PlayPause-controller {
-  display: inline-block;
-  position: relative;
-  font-size: 16px;
-  width: 1em;
-  height: 1.2em;
-  padding: 0;
-  margin: auto;
+	display: inline-block;
+	position: relative;
+	font-size: 16px;
+	width: 1em;
+	height: 1.2em;
+	padding: 0;
+	margin: auto;
 }
 .PlayPause-controller::before,
 .PlayPause-controller::after {
-  box-sizing: content-box;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  content: "";
-  border-top: 0.3em solid transparent;
-  border-bottom: 0.3em solid transparent;
-  border-left: 0.5em solid black;
+	box-sizing: content-box;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	content: "";
+	border-top: 0.3em solid transparent;
+	border-bottom: 0.3em solid transparent;
+	border-left: 0.5em solid black;
 }
 .PlayPause-controller::before {
-  left: 0;
-  transition: all 100ms linear;
-  width: 0;
-  height: 0.6em;
+	left: 0;
+	transition: all 100ms linear;
+	width: 0;
+	height: 0.6em;
 }
 .PlayPause-controller::after {
-  right: 0;
-  transition: all 150ms linear;
-  width: 0;
-  height: 0;
+	right: 0;
+	transition: all 150ms linear;
+	width: 0;
+	height: 0;
 }
 .PlayPause-state:checked + .PlayPause-label .PlayPause-controller::before,
 .PlayPause-state:checked + .PlayPause-label .PlayPause-controller::after {
-  border-top-width: 0;
-  border-bottom-width: 0;
-  border-left-width: 0.38em;
-  height: 100%;
+	border-top-width: 0;
+	border-bottom-width: 0;
+	border-left-width: 0.38em;
+	height: 100%;
 }
 </style>
diff --git a/src/PlayerControls.vue b/src/PlayerControls.vue
@@ -21,7 +21,7 @@
 			</button>
 		</div>
 		<div class="PlayerControl-group PlayerControl-group--large">
-			<PlayPauseButton 
+			<PlayPauseButton
 				class="Btn"
 				:isPlaying="isPlaying"
 				@play="$emit('play')"
@@ -42,15 +42,15 @@ import PlayPauseButton from './PlayPauseButton.vue'
 export default {
 	name: 'player-controls',
 	components: {PlayPauseButton},
-	props: { 
+	props: {
 		volume: Number,
 		isPlaying: Boolean,
 		isDisabled: Boolean,
 		isMuted: Boolean,
 		isShuffle: Boolean
 	},
 	computed: {
-		isNotFullVolume: function() {
+		isNotFullVolume() {
 			return this.volume < 100
 		}
 	}

diff --git a/src/PlayerData.vue b/src/PlayerData.vue
@@ -76,27 +76,28 @@
 			}
 		},
 		watch: {
-			channelSlug: function (slug) {
+			channelSlug(slug) {
 				this.loadChannelBySlug(slug)
 			},
-			channelId: function (id) {
+			channelId(id) {
 				this.loadChannelById(id)
 			},
-			trackId: function (id) {
+			trackId(id) {
 				this.loadChannelByTrack(id)
 			}
 		},
 		computed: {
 			localVolume: {
-				get: function() {
+				get() {
 					return this.volume
 				},
-				set: function(volume) {
-					this.$root.$el.parentNode.volume = volume;
+				set(volume) {
+					const el = this.$root.$el.parentNode
+					el.setAttribute('volume', volume)
 				}
 			},
 			// When either of these is set, it means we can load and show the player.
-			canLoad: function() {
+			canLoad() {
 				return this.channel || this.channelSlug || this.channelId || this.trackId
 			}
 		},

diff --git a/src/ProviderPlayer.vue b/src/ProviderPlayer.vue
@@ -6,9 +6,9 @@
 			:autoplay="autoplay"
 			:videoId="track.ytid"
 			:isPlaying="isPlaying"
-			@playing="playProvider"
-			@paused="pauseProvider"
-			@ended="trackEnded"></youtube-player>
+			@playing="$emit('play')"
+			@paused="$emit('pause')"
+			@ended="$emit('trackEnded')"></youtube-player>
 	</div>
 </template>
 
@@ -27,27 +27,10 @@ export default {
 		volume: Number
 	},
 	computed: {
-		provider: function() {
+		provider() {
 			if (this.track && this.track.ytid) return 'youtube'
 			return undefined
 		}
-	},
-	methods: {
-		playProvider() {
-			this.$emit('play')
-		},
-		pauseProvider() {
-			this.$emit('pause')
-		},
-		muteProvider() {
-			this.$emit('mute')
-		},
-		unMuteProvider() {
-			this.$emit('unMute')
-		},
-		trackEnded() {
-			this.$emit('trackEnded')
-		}
 	}
 }
 </script>

diff --git a/src/Radio4000Player.vue b/src/Radio4000Player.vue
@@ -2,7 +2,6 @@
 	<div class="Layout">
 		<div class="Layout-header">
 			<channel-header
-				slot="header"
 				:channel="channel"
 				:image="image"
 				:r4Url="r4Url"
@@ -89,10 +88,10 @@ export default {
 	},
 	computed: {
 		isMuted: {
-			get: function() {
+			get() {
 				return this.volume === 0
 			},
-			set: function(newValue) {
+			set(newValue) {
 				if (newValue) {
 					this.$root.$emit('setVolume', 0)
 				} else {
@@ -105,21 +104,21 @@ export default {
 		}
 	},
 	watch: {
-		shuffle: function(shuffle) {
+		shuffle(shuffle) {
 			this.isShuffle = shuffle
 		},
-		originTrack: function(track) {
+		originTrack(track) {
 			this.playTrack(track)
 		},
-		tracks: function(tracks) {
+		tracks(tracks) {
 			this.newTracksPool()
 			const noTrack = Object.keys(this.currentTrack).length === 0
 			if (noTrack) this.playNextTrack()
 		}
 	},
 	methods: {
 		playTrack(track) {
-			const previousTrack = this.currentTrack;
+			const previousTrack = this.currentTrack
 			this.currentTrack = track
 			this.$emit('trackChanged', {
 				track,

diff --git a/src/TrackItem.vue b/src/TrackItem.vue
@@ -1,5 +1,5 @@
 <template>
-	<a :href="href" class="TrackItem" @click="select">
+	<a :href="href" class="TrackItem" @click.prevent="$emit('select')">
 		<p class="TrackItem-title">{{track.title}}</p>
 		<p v-if="track.body" class="TrackItem-body">{{track.body}}</p>
 	</a>
@@ -8,33 +8,25 @@
 <script>
 export default {
 	name: 'track-item',
-	props: { 
+	props: {
 		track: Object,
 		channelSlug: String
 	},
 	computed: {
-		href: function() {
+		href() {
 			return `https://radio4000.com/${this.channelSlug}/${this.track.id}`
 		}
-	},
-	methods: {
-		select(event) {
-			event.preventDefault()
-			this.$emit('select', this.track)
-		}
 	}
 }
 </script>
 
 <style scoped>
 	.TrackItem {
 		display: block;
-		width: 100%;
 		padding: 0.4em 0.6em;
-		cursor: pointer;
-    color: initial;
+		color: initial;
 		text-decoration: none;
-  }
+	}
 	.TrackItem-title,
 	.TrackItem-body {
 		margin: 0;

diff --git a/src/TrackList.vue b/src/TrackList.vue
@@ -1,25 +1,31 @@
 <template>
 	<div class="TrackList">
-		<Loading v-if="!tracks || !tracks.length"></Loading>
+		<Loading v-if="!hasTracks"></Loading>
+
 		<ol class="TrackList-list">
-			<li v-if="query" class="TrackList-query">Playing selection <em>"{{query}}"</em></li>
+			<li v-if="query" class="TrackList-query">
+				Playing selection <em>"{{query}}"</em>
+			</li>
 			<li v-for="(track, index) in tracks" :key="track.id" class="TrackList-item">
 				<track-item
 					:track="track"
 					:channelSlug="channelSlug"
 					:class="{active : currentTrackIndex === index}"
-					@select="select"></track-item>
+					@select="$emit('select', track)"></track-item>
 			</li>
 		</ol>
-		<div v-if="tracks && tracks.length" class="TrackList-controls">
+
+		<div v-if="hasTracks" class="TrackList-controls">
 			<button class="Btn Btn--locateTrack" title="Locate current track" @click="locateCurrentTrack">◎</button>
 		</div>
+
 	</div>
 </template>
 
 <script>
 import TrackItem from './TrackItem.vue'
 import Loading from './Loading.vue'
+
 export default {
 	name: 'track-list',
 	props: {
@@ -33,19 +39,22 @@ export default {
 		Loading,
 		TrackItem
 	},
+	computed: {
+		hasTracks() {
+			return this.tracks && this.tracks.length > 0
+		}
+	},
 	watch: {
+		// When the `tracks` array is changed, scroll to current track.
 		tracks() {
 			this.$nextTick(this.locateCurrentTrack)
 		}
 	},
 	methods: {
-		select(track) {
-			this.$emit('select', track)
-		},
 		locateCurrentTrack() {
 			if (isNaN(this.currentTrackIndex)) return
-			const container = this.$el.querySelector('.TrackList-list');
-			const tracks = this.$el.querySelectorAll('li');
+			const container = this.$el.querySelector('.TrackList-list')
+			const tracks = this.$el.querySelectorAll('li')
 			const activeTrack = tracks[this.currentTrackIndex]
 			if (!activeTrack) return
 			container.scrollTop = activeTrack.offsetTop - 4
@@ -86,7 +95,6 @@ export default {
 		background-color: hsla(0, 0%, 50%, 0.2);
 		padding: 0.5em;
 		font-size: 0.75em;
-		/*color: #737373;*/
 		text-align: center;
 	}
 	.TrackList-controls {
@@ -104,5 +112,6 @@ export default {
 		margin: 0;
 		line-height: 1;
 		border: 1px solid #999;
+		border-radius: 3px;
 	}
 </style>