feat: add notification on track when its media is not available

app/components/track-contextual/template.hbs

@@ -17,5 +17,11 @@
 		<optgroup label="Manage">
 			<option value="editTrack">Edit</option>
 		</optgroup>
+		{{#if track.mediaNotAvailable}}
+			<optgroup label="Suggestions">
+				<option value="editTrack">-> Fix broken media URL</option>
+			</optgroup>
+		{{/if}}
 	{{/if}}
+
 </select>

app/components/track-edit/component.js

@@ -15,6 +15,10 @@ export default TrackFormComponent.extend({
 
 	disableSubmit: computed.oneWay('track.validations.isInvalid'),
 
+	youtubeSearchUrl: computed('track.title', function() {
+		return `https://www.youtube.com/results?search_query=${this.get('track.title')}`
+	}),
+
 	submitTask: task(function * (event) {
 		event.preventDefault()
 		yield get(this, 'track.update').perform()

app/components/track-edit/template.hbs

@@ -1,8 +1,8 @@
 {{#form-group
-	model=track
-	valuePath="url"
-	label="URL"
-	hint="Paste in the URL of a YouTube video" as |value|}}
+		 model=track
+		 valuePath="url"
+		 label="URL"
+		 hint="Paste in the URL of a YouTube video" as |value|}}
 	{{focus-input
 			type="url"
 			value=value
@@ -12,6 +12,10 @@
 			autoSelect=true}}
 {{/form-group}}
 
+{{#if track.mediaNotAvailable}}
+	<p>This link seems to be broken, <a href={{youtubeSearchUrl}} target="_blank" rel="noopener">find a new one</a>!</p>
+{{/if}}
+
 {{#form-group
 	model=track
 	valuePath="title"

app/components/track-item/component.js

@@ -11,7 +11,8 @@ export default Component.extend({
 		// 	'isCurrent',
 		'track.liveInCurrentPlayer:Track--live',
 		'track.playedInCurrentPlayer:Track--played',
-		'track.finishedInCurrentPlayer:Track--finished'
+		'track.finishedInCurrentPlayer:Track--finished',
+		'track.mediaNotAvailable:Track--mediaNotAvailable'
 	],
 
 	attributeBindings: [

app/components/x-playback/component.js

@@ -4,7 +4,7 @@ import Ember from 'ember';
 // 1- comment out the following `import`
 // 2- comment in the `script` tag in the `template.hbs`
 // cheers
-import 'npm:radio4000-player';
+// import 'npm:radio4000-player';
 
 const {Component, get, inject, computed} = Ember;
 
@@ -24,9 +24,11 @@ export default Component.extend({
 		const options = {passive: false}
 		player.addEventListener('trackChanged', event => this.onTrackChanged(event), options)
 		player.addEventListener('trackEnded', event => this.onTrackEnded(event), options)
+		player.addEventListener('mediaNotAvailable', event => this.onMediaNotAvailable(event), options)
 		player.addEventListener('channelChanged', event => this.onChannelChanged(event), options)
 	},
 
+	/* events */
 	onTrackChanged(event) {
 		get(this, 'player').onTrackChanged(event.detail[0]);
 	},
@@ -35,6 +37,10 @@ export default Component.extend({
 		get(this, 'player').onTrackEnded(event.detail[0]);
 	},
 
+	onMediaNotAvailable(event) {
+		get(this, 'player').onMediaNotAvailable(event.detail[0]);
+	},
+
 	actions: {
 		toggleMinimizedFormat() {
 			get(this, 'uiStates').toggleMinimizedFormat();

app/components/x-playback/template.hbs

@@ -7,7 +7,7 @@
 		track-id={{track.id}}
 		title="Radio4000 player. [⌨ g c = current channel] [⌨ g x = curent track]"
 	></radio4000-player>
-	{{!--  <script src="http://localhost:4002/radio4000-player.min.js"></script> --}}
+	<script src="http://localhost:4002/radio4000-player.min.js"></script>
 </div>
 
 <div class="Playback-layoutButtons">

app/models/track.js

@@ -45,6 +45,10 @@ export default Model.extend(Validations, {
 	body: attr('string'),
 	ytid: attr('string'),
 
+	mediaNotAvailable: attr('boolean', {
+		defaultValue: false
+	}),
+
 	// relationships
 	channel: belongsTo('channel', {
 		async: true,

app/services/player.js

@@ -96,6 +96,13 @@ export default Service.extend({
 		});
 	},
 
+	onMediaNotAvailable(event) {
+		get(this, 'store').findRecord('track', event.track.id).then(track => {
+			track.set('mediaNotAvailable', true);
+			track.save();
+		});
+	},
+
 	channelChanged(previousChannelId, channelId) {
 		// set previous channel as not active
 		if (previousChannelId !== undefined) {

app/styles/components/_track.scss

@@ -63,6 +63,9 @@
 .Track--finished {
 	border-right-color: $green;
 }
+.Track--mediaNotAvailable {
+	border-right-color: $red;
+}
 
 .Track-title {
 	@extend %font-regular;