move coverImage url generation into mixin

src/components/model/RecordingPreview.vue

@@ -16,21 +16,16 @@
 
 <script>
   import { secondsToDuration } from '../../util'
-  import { recordingTracks } from './mixins'
+  import { imageUrl, recordingTracks } from './mixins'
   import Duration from '../generic/Duration'
 
   export default {
     components: { Duration },
-    mixins: [recordingTracks],
+    mixins: [recordingTracks, imageUrl('recording')],
     props: {
       recording: Object
     },
     computed: {
-      coverImage () {
-        return this.recording.cover_image
-          ? this.dataSources.createImageUrl(this.recording.cover_image)
-          : null
-      },
       productionDate () {
         return new Date(this.recording.production_date)
       },

src/components/model/SeriesPreview.vue

@@ -6,16 +6,16 @@
 </template>
 
 <script>
+  import { imageUrl } from './mixins'
+
   export default {
+    mixins: [ imageUrl('series') ],
     props: {
       series: Object
     },
     computed: {
       description () {
         return this.series.teaser || this.series.description
-      },
-      coverImage () {
-        return this.dataSources.createImageUrl(this.series.cover_image)
       }
     },
     inject: ['dataSources']

src/components/model/mixins.js

 import { createHowlerTracks } from '../../util/audio'
 
+const toCamelCase = s =>
+  s.replace(/([-_][a-z])/ig, t =>
+    t.toUpperCase()
+      .replace('-', '')
+      .replace('_', '')
+  )
+
 export const recordingTracks = {
   data () {
     return {
@@ -26,3 +33,16 @@ export const recordingTracks = {
     }
   }
 }
+
+export const imageUrl = (containerName, prop = 'cover_image', computed) => {
+  computed = computed || toCamelCase(prop)
+  return {
+    computed: {
+      [computed] () {
+        return this[containerName][prop]
+          ? this.dataSources.createImageUrl(this[containerName][prop])
+          : null
+      }
+    }
+  }
+}