refactoring media in event (multiple in db, focalpoint, alt text)

2021-07-15 16:18:56 +02:00
parent 49301de42d
commit 9673e40640
13 changed files with 271 additions and 106 deletions
--- a/pages/add/MediaInput.vue
+++ b/pages/add/MediaInput.vue
@@ -0,0 +1,97 @@
+<template lang="pug">
+  span
+    v-dialog(v-model='openMediaDetails' max-width='1000px')
+      v-card
+        v-card-title {{$t('common.media')}}
+        v-card-text
+          v-row
+            v-col(:span='4' :cols='4')
+              p Scegli il punto centrale cliccando
+              v-img(v-if='mediaPreview'
+                :src='mediaPreview'
+                aspect-ratio='1.7778'
+                :position="position")
+
+              v-textarea.mt-4(type='text'
+                label='Alternative text'
+                persistent-hint
+                @input='v => name=v'
+                :value='value.name' filled
+                hint='Descrizione per utenti con disabilita visive')
+              v-card-actions.justify-space-between
+                v-btn(@click='openMediaDetails=false' color='warning') Cancel
+                v-btn(color='primary' @click='save') Save
+
+            v-col(:span='8' :cols='8')
+              v-img(
+                v-if='mediaPreview' :src='mediaPreview'
+                @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-btn-toggle
+        v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
+        v-btn(text color='primary' @click='remove') {{$t('common.remove')}}
+      p {{event.media[0].name}}
+    v-file-input(
+      v-else
+      :label="$t('common.media')"
+      :hint="$t('event.media_description')"
+      prepend-icon="mdi-camera"
+      :value='value.image'
+      @change="v => $emit('input', { image: v, focalpoint: [0, 0] })"
+      persistent-hint
+      accept='image/*')
+</template>
+<script>
+export default {
+  name: 'MediaInput',
+  props: {
+    value: { type: Object, default: () => ({ image: null }) },
+    event: { type: Object, default: () => {} }
+  },
+  data () {
+    console.error(this.value)
+    return {
+      openMediaDetails: false,
+      name: this.value.name || '',
+      focalpoint: this.value.focalpoint || [0, 0]
+    }
+  },
+  computed: {
+    mediaPreview () {
+      if (!this.value.url && !this.value.image) {
+        return false
+      }
+      const url = this.value.image ? URL.createObjectURL(this.value.image) : `/media/thumb/${this.value.url}`
+      return url
+    },
+    position () {
+      return `${(this.focalpoint[0] + 1) * 50}% ${(this.focalpoint[1] + 1) * 50}%`
+    }
+  },
+  methods: {
+    save () {
+      this.$emit('input', { url: this.value.url, image: this.value.image, name: this.name, focalpoint: this.focalpoint })
+      this.openMediaDetails = false
+    },
+    remove () {
+      this.$emit('remove')
+    },
+    selectFocal (ev) {
+      const boundingClientRect = ev.target.getBoundingClientRect()
+
+      // get relative coordinate
+      const x = Math.ceil(ev.clientX - boundingClientRect.left)
+      const y = Math.ceil(ev.clientY - boundingClientRect.top)
+
+      // map to real image coordinate
+      const posY = -1 + (y / boundingClientRect.height) * 2
+      const posX = -1 + (x / boundingClientRect.width) * 2
+
+      this.focalpoint = [posX, posY]
+    }
+  }
+}
+</script>
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -45,14 +45,7 @@

              //- MEDIA / FLYER / POSTER
              v-col(cols=12 md=6)
-                v-file-input(
-                  :label="$t('common.media')"
-                  :hint="$t('event.media_description')"
-                  prepend-icon="mdi-camera"
-                  v-model='event.image'
-                  persistent-hint
-                  accept='image/*')
-                v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview')
+                MediaInput(v-model='event.media[0]' :event='event' @remove='event.media=[]')

              //- tags
              v-col(cols=12 md=6)
@@ -66,7 +59,7 @@
      v-card-actions
        v-spacer
        v-btn(@click='done' :loading='loading' :disabled='!valid || loading'
-          color='primary') {{edit?$t('common.edit'):$t('common.send')}}
+          color='primary') {{edit?$t('common.save'):$t('common.send')}}

 </template>
 <script>
@@ -77,16 +70,17 @@ import List from '@/components/List'
 import ImportDialog from './ImportDialog'
 import DateInput from './DateInput'
 import WhereInput from './WhereInput'
+import MediaInput from './MediaInput'

 export default {
  name: 'NewEvent',
-  components: { List, Editor, ImportDialog, WhereInput, DateInput },
+  components: { List, Editor, ImportDialog, MediaInput, WhereInput, DateInput },
  validate ({ store }) {
    return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
  },
  async asyncData ({ params, $axios, error, store }) {
    if (params.edit) {
-      const data = { event: { place: {} } }
+      const data = { event: { place: {}, media: [] } }
      data.id = params.edit
      data.edit = true
      let event
@@ -112,7 +106,7 @@ export default {
      data.event.description = event.description
      data.event.id = event.id
      data.event.tags = event.tags
-      data.event.image_path = event.image_path
+      data.event.media = event.media || []
      return data
    }
    return {}
@@ -128,7 +122,7 @@ export default {
        title: '',
        description: '',
        tags: [],
-        image: null
+        media: []
      },
      page: { month, year },
      fileList: [],
@@ -136,7 +130,6 @@ export default {
      date: { from: 0, due: 0, recurrent: null },
      edit: false,
      loading: false,
-      mediaUrl: '',
      disableAddress: false
    }
  },
@@ -145,16 +138,7 @@ export default {
      title: `${this.settings.title} - ${this.$t('common.add_event')}`
    }
  },
-  computed: {
-    ...mapState(['tags', 'places', 'settings']),
-    mediaPreview () {
-      if (!this.event.image && !this.event.image_path) {
-        return false
-      }
-      const url = this.event.image ? URL.createObjectURL(this.event.image) : `/media/thumb/${this.event.image_path}`
-      return url
-    }
-  },
+  computed: mapState(['tags', 'places', 'settings']),
  methods: {
    ...mapActions(['updateMeta']),
    eventImported (event) {
@@ -170,9 +154,6 @@ export default {
      }
      this.openImportDialog = false
    },
-    cleanFile () {
-      this.event.image = {}
-    },
    async done () {
      if (!this.$refs.form.validate()) {
        this.$nextTick(() => {
@@ -187,9 +168,13 @@ export default {

      formData.append('recurrent', JSON.stringify(this.date.recurrent))

-      if (this.event.image) {
-        formData.append('image', this.event.image)
+      if (this.event.media.length) {
+        formData.append('image', this.event.media[0].image)
+        formData.append('image_url', this.event.media[0].url)
+        formData.append('image_name', this.event.media[0].name)
+        formData.append('image_focalpoint', this.event.media[0].focalpoint)
      }
+
      formData.append('title', this.event.title)
      formData.append('place_name', this.event.place.name)
      formData.append('place_address', this.event.place.address)
--- a/pages/embed/_event_id.vue
+++ b/pages/embed/_event_id.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
-  nuxt-link.embed_event(:to='`/event/${event.slug || event.id}`' target='_blank' :class='{ withImg: event.image_path }')
+  nuxt-link.embed_event(:to='`/event/${event.slug || event.id}`' target='_blank' :class='{ withImg: event.media }')

    //- image
-    img.float-left(:src='`/media/thumb/${event.image_path || "logo.png"}`')
+    img.float-left(:src='event | mediaURL("thumb")')
    .event-info
      //-  title
      .date {{event|when}}<br/>
--- a/pages/event/_id.vue
+++ b/pages/event/_id.vue
@@ -11,13 +11,14 @@ v-container#event.pa-0.pa-sm-2
      v-row
        v-col.col-12.col-lg-8
          //- fake image to use u-featured in h-event microformat
-          img.u-featured(v-show='false' v-if='event.image_path' :src='`${settings.baseurl}${imgPath}`')
+          img.u-featured(v-show='false' v-if='event.media' :src='event | mediaURL')
          v-img.main_image.mb-3(
            contain
-            :src='imgPath'
-            :lazy-src='thumbImgPath'
-            v-if='event.image_path')
-          .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-else v-html='event.description')
+            :alt='event | mediaURL("alt")'
+            :src='event | mediaURL'
+            :lazy-src='event | mediaURL("thumb")'
+            v-if='event.media && event.media.length')
+          .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='!event.media && event.description' v-html='event.description')

        v-col.col-12.col-lg-4
          v-card
@@ -60,7 +61,7 @@ v-container#event.pa-0.pa-sm-2
                    :href='`/api/event/${event.slug || event.id}.ics`')
                    v-icon mdi-calendar-export

-      .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='event.image_path && event.description' v-html='event.description')
+      .p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='event.media && event.description' v-html='event.description')

      //- resources from fediverse
      #resources.mt-1(v-if='settings.enable_federation')
@@ -197,7 +198,7 @@ export default {
        { property: 'og:type', content: 'event' },
        {
          property: 'og:image',
-          content: this.thumbImgPath
+          content: this.$options.filters.mediaURL(this.event)
        },
        { property: 'og:site_name', content: this.settings.title },
        {
@@ -213,7 +214,7 @@ export default {
        { property: 'twitter:title', content: this.event.title },
        {
          property: 'twitter:image',
-          content: this.thumbImgPath
+          content: this.$options.filters.mediaURL(this.event, 'thumb')
        },
        {
          property: 'twitter:description',
@@ -221,7 +222,7 @@ export default {
        }
      ],
      link: [
-        { rel: 'image_src', href: this.thumbImgPath },
+        { rel: 'image_src', href: this.$options.filters.mediaURL(this.event, 'thumb') },
        {
          rel: 'alternate',
          type: 'application/rss+xml',
@@ -241,12 +242,6 @@ export default {
    currentAttachmentLabel () {
      return get(this.selectedResource, `data.attachment[${this.currentAttachment}].name`, '')
    },
-    imgPath () {
-      return '/media/' + this.event.image_path
-    },
-    thumbImgPath () {
-      return this.settings.baseurl + '/media/thumb/' + this.event.image_path
-    },
    is_mine () {
      if (!this.$auth.user) {
        return false
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -184,7 +184,7 @@ export default {
      // Message({ message: this.$t('email_notification_activated'), showClose: true, type: 'success' })
    },
    imgPath (event) {
-      return event.image_path && event.image_path
+      return event.media && event.media[0].url
    }
  }
 }