refactoring MediaInput

components/Event.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   v-card.h-event.event.d-flex
     nuxt-link(:to='`/event/${event.slug || event.id}`')
-      v-img.u-featured.img(v-if='event.media' :src='thumbnail' :position='thumbnailPosition' :alt='event.media.length ? event.media[0].name : ""')
+      v-img.u-featured.img(v-if='event.media' aspect-ratio='1.7778' :src='thumbnail' :position='thumbnailPosition' :alt='event.media.length ? event.media[0].name : ""')
       v-icon.float-right.mr-1(v-if='event.parentId' color='success') mdi-repeat
       .title.p-name {{event.title}}
 

locales/it.json

@@ -159,7 +159,10 @@
         "import_ICS": "Importa da ICS",
         "import_URL": "Importa da URL (ics o h-event)",
         "ics": "ICS",
-        "import_description": "Puoi importare eventi da altre piattaforme e da altre istanze attraverso i formati standard (ics e h-event)"
+        "import_description": "Puoi importare eventi da altre piattaforme e da altre istanze attraverso i formati standard (ics e h-event)",
+        "alt_text_description": "Descrizione per utenti con disabilità visive",
+        "choose_focal_point": "Scegli il punto centrale cliccando",
+        "remove_media_confirmation": "Confermi l'eliminazione dell'immagine?"
     },
     "admin": {
         "place_description": "Nel caso in cui un luogo sia errato o cambi indirizzo, puoi modificarlo.<br/>Considera che tutti gli eventi associati a questo luogo cambieranno indirizzo (anche quelli passati).",

pages/add/MediaInput.vue

@@ -6,7 +6,7 @@
         v-card-text
           v-row
             v-col(:span='4' :cols='4')
-              p Scegli il punto centrale cliccando
+              p {{$t('event.choose_focal_point')}}
               v-img(v-if='mediaPreview'
                 :src='mediaPreview'
                 aspect-ratio='1.7778'
@@ -17,23 +17,25 @@
                 persistent-hint
                 @input='v => name=v'
                 :value='value.name' filled
-                hint='Descrizione per utenti con disabilita visive')
+                :hint='$t("event.alt_text_description")')
+              br
               v-card-actions.justify-space-between
-                v-btn(@click='openMediaDetails=false' color='warning') Cancel
+                v-btn(text @click='openMediaDetails=false' color='warning') Cancel
-                v-btn(color='primary' @click='save') Save
+                v-btn(text color='primary' @click='save') Save
 
             v-col(:span='8' :cols='8')
-              v-img(
+              v-img.cursorPointer(
                 v-if='mediaPreview' :src='mediaPreview'
-                @click='selectFocal'
+                @click='selectFocal')
-                max-width='88%')
 
     h3.mb-3.font-weight-regular(v-if='mediaPreview') {{$t('common.media')}}
-    v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview' aspect-ratio='1.7778' :position='position')
+    v-card-actions(v-if='mediaPreview')
-      v-btn-toggle
+      v-spacer
-        v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
+      v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
-        v-btn(text color='primary' @click='remove') {{$t('common.remove')}}
+      v-btn(text color='error' @click='remove') {{$t('common.remove')}}
-      p {{event.media[0].name}}
+    div(v-if='mediaPreview')
+      v-img.col-12.col-sm-2.ml-3(:src='mediaPreview' aspect-ratio='1.7778' :position='`${(this.value.focalpoint[0] + 1) * 50}% ${(this.value.focalpoint[1] + 1) * 50}%`')
+      span.float-right {{event.media[0].name}}
     v-file-input(
       v-else
       :label="$t('common.media')"
@@ -52,7 +54,6 @@ export default {
     event: { type: Object, default: () => {} }
   },
   data () {
-    console.error(this.value)
     return {
       openMediaDetails: false,
       name: this.value.name || '',
@@ -64,7 +65,7 @@ export default {
       if (!this.value.url && !this.value.image) {
         return false
       }
-      const url = this.value.image ? URL.createObjectURL(this.value.image) : `/media/thumb/${this.value.url}`
+      const url = this.value.image ? URL.createObjectURL(this.value.image) : /^https?:\/\//.test(this.value.url) ? this.value.url : `/media/thumb/${this.value.url}`
       return url
     },
     position () {
@@ -73,18 +74,24 @@ export default {
   },
   methods: {
     save () {
-      this.$emit('input', { url: this.value.url, image: this.value.image, name: this.name, focalpoint: this.focalpoint })
+      this.$emit('input', { url: this.value.url, image: this.value.image, name: this.name || '', focalpoint: [...this.focalpoint] })
       this.openMediaDetails = false
     },
-    remove () {
+    async remove () {
+      const ret = await this.$root.$confirm('event.remove_media_confirmation')
+      if (!ret) { return }
       this.$emit('remove')
     },
     selectFocal (ev) {
       const boundingClientRect = ev.target.getBoundingClientRect()
 
       // get relative coordinate
-      const x = Math.ceil(ev.clientX - boundingClientRect.left)
+      let x = Math.ceil(ev.clientX - boundingClientRect.left)
-      const y = Math.ceil(ev.clientY - boundingClientRect.top)
+      let y = Math.ceil(ev.clientY - boundingClientRect.top)
+
+      // snap to border
+      x = x < 20 ? 0 : x > boundingClientRect.width - 20 ? boundingClientRect.width : x
+      y = y < 20 ? 0 : y > boundingClientRect.height - 20 ? boundingClientRect.height : y
 
       // map to real image coordinate
       const posY = -1 + (y / boundingClientRect.height) * 2
@@ -95,3 +102,9 @@ export default {
   }
 }
 </script>
+<style>
+.cursorPointer {
+  cursor: crosshair;
+}
+
+</style>

server/helpers.js

@@ -132,6 +132,7 @@ module.exports = {
           }
           const events = data.items.map(e => {
             const props = e.properties
+            const media = get(props, 'featured[0]')
             return {
               title: get(props, 'name[0]', ''),
               description: get(props, 'description[0]', ''),
@@ -142,7 +143,7 @@ module.exports = {
               start_datetime: dayjs(get(props, 'start[0]', '')).unix(),
               end_datetime: dayjs(get(props, 'end[0]', '')).unix(),
               tags: get(props, 'category', []),
-              media: { url: get(props, 'featured[0]') }
+              media: media ? [{ name: get(props, 'name[0]', ''), url: get(props, 'featured[0]'), focalpoint: [0, 0] }] : []
             }
           })
           return res.json(events)

views/feed/rss.pug

@@ -14,7 +14,7 @@ rss(version='2.0' xmlns:atom="http://www.w3.org/2005/Atom")
                     | <h4>#{event.title}</h4>
                     | <strong>#{event.place.name} - #{event.place.address}</strong>
                     | <small>(#{moment.unix(event.start_datetime).format("dddd, D MMMM HH:mm")})</small><br/>
-                    if (event.media)
+                    if (event.media && event.media.length)
                         | <img alt="#{event.media[0].name}" src="#{settings.baseurl}/media/#{event.media[0].url}"/>
                     | <pre>!{event.description}</pre>
                     | ]]>