Refactor images

app/channel/route.js

@@ -30,15 +30,10 @@ export default Route.extend({
 		const headData = get(this, 'headData')
 		const description = model.get('body')
 		const slug = model.get('slug')
+		const image = model.get('image')
 		set(headData, 'description', description)
 		set(headData, 'slug', slug)
-		// Because images come from a model relationship…
-		model.get('images').then(images => {
-			const image = images.get('lastObject.src')
-			if (image) {
-				set(headData, 'image', image)
-			}
-		})
+		set(headData, 'image', image)
 	},
 
 	serialize(model) {

app/channels/index/controller.js

@@ -2,7 +2,7 @@ import Controller from '@ember/controller';
 import {computed} from '@ember/object'
 
 export default Controller.extend({
-	filteredModel: computed.filterBy('model', 'coverImage'),
+	filteredModel: computed.filterBy('model', 'image'),
 
 	actions: {
 		refreshSelection() {

app/channels/search/route.js

@@ -1,4 +1,4 @@
-import Route from '@ember/routing/route';
+import Route from '@ember/routing/route'
 
 export default Route.extend({
 	// When search changes the url, don't replace (add) to the history.

app/channels/search/template.hbs

@@ -73,7 +73,6 @@
 			</div>
 
 			<div class="Grid">
-
 				<div class="Grid-cell">
 					<p>
 						Each radio is <a href="{{href-to 'about'}}">curated by one human</a>. Listen, discover someone's personal selection.<br/>

app/components/channel-card/template.hbs

@@ -1,5 +1,6 @@
 {{#link-to "channel" channel title=title}}
-	{{channel-cover src=channel.coverImage.src}}
+	{{channel-cover src=channel.image}}
+
 	<h3 class="ChannelCard-title">
 		{{channel.title}}
 	</h3>
@@ -12,6 +13,7 @@
 		showText=false
 	}}
 </div>
+
 <p class="ChannelCard-body">
 	{{link-hashtags (do-truncate channel.body 200) channel.slug}}
 </p>

app/components/channel-header/template.hbs

@@ -2,12 +2,12 @@
 	{{#if channel.canEdit}}
 		{{#link-to "settings.channel"}}
 			<div class="Channel-cover">
-				{{channel-cover src=channel.coverImage.src}}
+				{{channel-cover src=channel.image}}
 			</div>
 		{{/link-to}}
 	{{else}}
 		<div class="Channel-cover">
-			{{channel-cover src=channel.coverImage.src}}
+			{{channel-cover src=channel.image}}
 		</div>
 	{{/if}}
 </div>

app/components/map-world/template.hbs

@@ -25,7 +25,7 @@
 {{!-- Icon markers
 icon=(icon
 	className="ImageMapMarker"
-	iconUrl=(if item.coverImage.src (cover-img item.coverImage.src size=32 format='awebp') "favicon-32x32.png")
+	iconUrl=(if item.image (cover-img item.image size=32 format='awebp') "favicon-32x32.png")
 )
 icon=(if item.isFavorite iconFavorite iconDefault)
 --}}

app/components/page-welcome/template.hbs

@@ -20,7 +20,7 @@
 	{{#link-to 'settings.channel'}}
 		<label>
 			{{input type='checkbox'
-				checked=channel.images.firstObject}} Customize your radio with an image
+				checked=channel.image}} Customize your radio with an image
 		</label>
 	{{/link-to}}
 	{{#link-to 'channels.search'}}

app/models/channel.js

@@ -78,16 +78,13 @@ export default DS.Model.extend(Validations, {
 		lat: 'coordinatesLatitude'
 	}),
 
-	// Set the latest image as the cover image.
-	coverImage: computed('images.[]', function () {
-		return this.get('images.lastObject');
-	}),
+	// A Cloudinary media ID. Use the "cover-img" helper to generate a full URL.
+	image: attr('string'),
 
 	// This property is toggled by the player setChannel.
 	isInPlayer: false,
 
 	// Relationships.
-	images: hasMany('image', {async: true}),
 	tracks: hasMany('track', {async: true}),
 	favoriteChannels: hasMany('channel', {inverse: null, async: true}),
 	channelPublic: belongsTo('channelPublic', {async: true}),
@@ -120,7 +117,7 @@ export default DS.Model.extend(Validations, {
 		}
 	}),
 
-	isExperienced: computed.and('images.firstObject', 'totalTracks', 'favoriteChannels.firstObject'),
+	isExperienced: computed.and('image', 'totalTracks', 'favoriteChannels.firstObject'),
 
 	// Is already a favorite channel of session.currentUser.
 	isFavorite: computed('model', 'session.currentUser.channels.firstObject.favoriteChannels.[]', function () {

app/services/player.js

@@ -174,11 +174,7 @@ export default Service.extend({
 		});
 		cleanedChannel.query = query
 		cleanedChannel.tracks = tracks.reverse()
-
-		// Get a full image src to pass.
-		const imageModel = channelModel.get('coverImage')
-		const src = coverImg([imageModel.get('src')], {size: 56})
-		cleanedChannel.image = src
+		cleanedChannel.image = coverImg([cleanedChannel.image], {size: 56})
 
 		return cleanedChannel
 	},

app/settings/channel/index/controller.js

@@ -1,6 +1,6 @@
 import Ember from 'ember'
 import Controller from '@ember/controller'
-import {get} from '@ember/object'
+import {get, set} from '@ember/object'
 import {task} from 'ember-concurrency'
 import clean from 'radio4000/utils/clean'
 import ValidateSlug from 'radio4000/mixins/validate-slug'
@@ -30,7 +30,7 @@ export default Controller.extend(ValidateSlug, {
 		if (slugChanged) {
 			try {
 				yield get(this, 'validateSlug').perform(newSlug)
-				channel.set('slug', newSlug)
+				set(channel, 'slug', newSlug)
 			} catch (err) {
 				messages.warning(err)
 				return
@@ -66,30 +66,29 @@ export default Controller.extend(ValidateSlug, {
 
 	actions: {
 		saveImage(cloudinaryId) {
+			const messages = get(this, 'flashMessages')
+			const channel = get(this, 'model')
+
 			if (!cloudinaryId) {
 				throw new Error('Could not save image. Missing cloudinary id')
 			}
-			const channel = get(this, 'model')
-			const image = this.store.createRecord('image', {
-				src: cloudinaryId,
-				channel
-			})
-			// save and add it to the channel
-			return image
+
+			channel.set('image', cloudinaryId)
+
+			return channel
 				.save()
-				.then(image => {
-					channel.get('images').addObject(image)
-					channel.save().then(() => {
-						debug('Saved channel with image')
-					})
+				.then(() => {
+					debug('Saved channel with image')
 				})
-				.catch(err => {
-					Ember.debug('could not save image', err)
+				.catch(() => {
+					messages.warning('Could not save the image to your channel')
+					channel.set('image', undefined)
 				})
 		},
 
 		deleteImage() {
-			return this.get('model.coverImage').destroyRecord()
+			set(this, 'model.image', undefined)
+			return this.get('model').save()
 		},
 
 		goBack() {

app/settings/channel/index/template.hbs

@@ -3,15 +3,18 @@
 		<p>
 			<label>Cover image</label>
 		</p>
-		{{#if model.coverImage}}
+		{{#if model.image}}
 			<figure style="max-width: 100px">
-				{{channel-cover src=model.coverImage.src}}
+				{{channel-cover src=model.image}}
 			</figure>
 			<button class="Btn Btn--small" title="To change your image, you'll need to delete this one first" {{action "deleteImage"}}>
 				Delete image
 			</button>
 		{{else}}
-			{{cloudinary-upload cloudName='radio4000' unsignedUploadPreset='tc44ivjo' didUpload=(action "saveImage")}}
+			{{cloudinary-upload
+				cloudName='radio4000'
+				unsignedUploadPreset='tc44ivjo'
+				didUpload=(action "saveImage")}}
 		{{/if}}
 	</div>
 </section>