mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
media improvement
This commit is contained in:
lesion
parent
35e44a8a80
commit
95b546afa9
10 changed files with 112 additions and 137 deletions
|
|
@ -83,14 +83,6 @@ li {
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
max-height: 250px;
|
||||
min-height: 160px;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
aspect-ratio: 1.7778;
|
||||
}
|
||||
|
||||
.place {
|
||||
max-width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template lang="pug">
|
||||
v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
|
||||
nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
|
||||
img.img.u-featured(:src='thumbnail' :alt='alt' :loading='this.lazy?"lazy":"eager"' itemprop="image" :style="{ 'object-position': thumbnailPosition }")
|
||||
MyPicture(:event='event' thumb :lazy='lazy')
|
||||
v-icon.float-right.mr-1(v-if='event.parentId' color='success' v-text='mdiRepeat')
|
||||
.title.p-name(itemprop="name") {{event.title}}
|
||||
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import clipboard from '../assets/clipboard'
|
||||
import MyPicture from '~/components/MyPicture'
|
||||
import { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy,
|
||||
mdiCalendarExport, mdiDeleteForever, mdiCalendar, mdiMapMarker } from '@mdi/js'
|
||||
|
||||
|
|
@ -58,6 +59,9 @@ export default {
|
|||
return { mdiRepeat, mdiPencil, mdiDotsVertical, mdiContentCopy, mdiCalendarExport,
|
||||
mdiDeleteForever, mdiMapMarker, mdiCalendar }
|
||||
},
|
||||
components: {
|
||||
MyPicture
|
||||
},
|
||||
props: {
|
||||
event: { type: Object, default: () => ({}) },
|
||||
lazy: Boolean
|
||||
|
|
@ -65,25 +69,6 @@ export default {
|
|||
mixins: [clipboard],
|
||||
computed: {
|
||||
...mapState(['settings']),
|
||||
thumbnail () {
|
||||
let path
|
||||
if (this.event.media && this.event.media.length) {
|
||||
path = '/media/thumb/' + this.event.media[0].url
|
||||
} else {
|
||||
path = '/noimg.svg'
|
||||
}
|
||||
return path
|
||||
},
|
||||
alt () {
|
||||
return this.event.media && this.event.media.length ? this.event.media[0].name : ''
|
||||
},
|
||||
thumbnailPosition () {
|
||||
if (this.event.media && this.event.media.length && this.event.media[0].focalpoint) {
|
||||
const focalpoint = this.event.media[0].focalpoint
|
||||
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
|
||||
}
|
||||
return 'center center'
|
||||
},
|
||||
is_mine () {
|
||||
if (!this.$auth.user) {
|
||||
return false
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
"each_month": "Each month",
|
||||
"due": "until",
|
||||
"from": "From",
|
||||
"image_too_big": "The image can't be bigger than 4 MB",
|
||||
"image_too_big": "The image can't be bigger than 4MB",
|
||||
"interact_with_me_at": "Interact with me on fediverse at",
|
||||
"follow_me_description": "One of the ways to stay up to date on events published here on {title},\nis following the account <u>{account}</u> from the fediverse, for example via Mastodon, and possibly add resources to an event from there.<br/><br/>\nIf you have never heard of Mastodon and the fediverse we recommend reading <a href='https://www.savjee.be/videos/simply-explained/mastodon-and-fediverse-explained/'>this article</a>.<br/><br/>Enter your instance below (e.g. mastodon.social)",
|
||||
"interact_with_me": "Follow me",
|
||||
|
|
@ -159,7 +159,11 @@
|
|||
"import_URL": "Import from URL",
|
||||
"import_ICS": "Import from ICS",
|
||||
"ics": "ICS",
|
||||
"import_description": "You can import events from other platforms and other instances through standard formats (ics and h-event)"
|
||||
"import_description": "You can import events from other platforms and other instances through standard formats (ics and h-event)",
|
||||
"alt_text_description": "Description for people with visual impairments",
|
||||
"choose_focal_point": "Choose the focal point",
|
||||
"remove_media_confirmation": "Do you confirm the image removal?",
|
||||
"download_flyer": "Download flyer"
|
||||
},
|
||||
"admin": {
|
||||
"place_description": "If you have gotten the place or address wrong, you can change it.<br/>All current and past events associated with this place will change address.",
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@
|
|||
"each_month": "Ogni mese",
|
||||
"due": "alle",
|
||||
"from": "Dalle",
|
||||
"image_too_big": "L'immagine non può essere più grande di 4 MB",
|
||||
"image_too_big": "L'immagine non può essere più grande di 4MB",
|
||||
"interact_with_me": "Seguimi dal fediverso",
|
||||
"follow_me_description": "Tra i vari modi di rimanere aggiornati degli eventi pubblicati qui su {title},\npuoi seguire l'account <u>{account}</u> dal fediverso, ad esempio via Mastodon, ed eventualmente aggiungere risorse ad un evento da lì.<br/><br/>\nSe non hai mai sentito parlare di Mastodon e del fediverso ti consigliamo di leggere <a href='https://cagizero.wordpress.com/2018/10/25/cose-mastodon/'>questo articolo</a>.<br/><br/> Inserisci la tua istanza qui sotto (es. mastodon.cisti.org o mastodon.bida.im)",
|
||||
"only_future": "solo eventi futuri",
|
||||
|
|
@ -160,9 +160,10 @@
|
|||
"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)",
|
||||
"alt_text_description": "Descrizione per utenti con disabilità visive",
|
||||
"alt_text_description": "Descrizione per persone con disabilità visive",
|
||||
"choose_focal_point": "Scegli il punto centrale cliccando",
|
||||
"remove_media_confirmation": "Confermi l'eliminazione dell'immagine?"
|
||||
"remove_media_confirmation": "Confermi l'eliminazione dell'immagine?",
|
||||
"download_flyer": "Scarica volantino"
|
||||
},
|
||||
"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).",
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ module.exports = {
|
|||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
|
||||
],
|
||||
link: [{ rel: 'icon', type: 'image/png', href: '/logo.png' }],
|
||||
link: [{ rel: 'preload', type: 'image/png', href: '/logo.png', as: 'image' }],
|
||||
script: [{ src: '/gancio-events.es.js', async: true, body: true }],
|
||||
},
|
||||
dev: isDev,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
v-col.col-12.col-sm-4
|
||||
p {{$t('event.choose_focal_point')}}
|
||||
img.img.d-none.d-sm-block(v-if='mediaPreview'
|
||||
img.mediaPreview.d-none.d-sm-block(v-if='mediaPreview'
|
||||
:src='mediaPreview' :style="{ 'object-position': position }")
|
||||
|
||||
v-textarea.mt-4(type='text'
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
v-btn(text color='primary' @click='openMediaDetails = true') {{$t('common.edit')}}
|
||||
v-btn(text color='error' @click='remove') {{$t('common.remove')}}
|
||||
div(v-if='mediaPreview')
|
||||
img.img.col-12.ml-3(:src='mediaPreview' :style="{ 'object-position': savedPosition }")
|
||||
img.mediaPreview.col-12.ml-3(:src='mediaPreview' :style="{ 'object-position': savedPosition }")
|
||||
span.float-right {{event.media[0].name}}
|
||||
v-file-input(
|
||||
v-else
|
||||
|
|
@ -53,7 +53,7 @@ export default {
|
|||
name: 'MediaInput',
|
||||
props: {
|
||||
value: { type: Object, default: () => ({ image: null }) },
|
||||
event: { type: Object, default: () => {} }
|
||||
event: { type: Object, default: () => ({}) }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -142,7 +142,7 @@ export default {
|
|||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.img {
|
||||
.mediaPreview {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<template lang="pug">
|
||||
v-row
|
||||
v-col(cols=12 md=6)
|
||||
v-combobox(ref='place'
|
||||
:rules="[$validators.required('common.where')]"
|
||||
:label="$t('common.where')"
|
||||
:hint="$t('event.where_description')"
|
||||
:search-input.sync="placeName"
|
||||
:prepend-icon='mdiMapMarker'
|
||||
persistent-hint
|
||||
:value="value.name"
|
||||
:items="filteredPlaces"
|
||||
no-filter
|
||||
item-text='name'
|
||||
@change='selectPlace')
|
||||
template(v-slot:item="{ item, attrs, on }")
|
||||
v-list-item(v-bind='attrs' v-on='on')
|
||||
v-list-item-content(two-line v-if='item.create')
|
||||
v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='add'></v-icon> {{item.name}}
|
||||
v-list-item-content(two-line v-else)
|
||||
v-list-item-title(v-text='item.name')
|
||||
v-list-item-subtitle(v-text='item.address')
|
||||
v-row
|
||||
v-col(cols=12 md=6)
|
||||
v-combobox(ref='place'
|
||||
:rules="[$validators.required('common.where')]"
|
||||
:label="$t('common.where')"
|
||||
:hint="$t('event.where_description')"
|
||||
:search-input.sync="placeName"
|
||||
:prepend-icon='mdiMapMarker'
|
||||
persistent-hint
|
||||
:value="value.name"
|
||||
:items="filteredPlaces"
|
||||
no-filter
|
||||
item-text='name'
|
||||
@change='selectPlace')
|
||||
template(v-slot:item="{ item, attrs, on }")
|
||||
v-list-item(v-bind='attrs' v-on='on')
|
||||
v-list-item-content(two-line v-if='item.create')
|
||||
v-list-item-title <v-icon color='primary' v-text='mdiPlus' :aria-label='$t("common.add")'></v-icon> {{item.name}}
|
||||
v-list-item-content(two-line v-else)
|
||||
v-list-item-title(v-text='item.name')
|
||||
v-list-item-subtitle(v-text='item.address')
|
||||
|
||||
v-col(cols=12 md=6)
|
||||
v-text-field(ref='address'
|
||||
:prepend-icon='mdiMap'
|
||||
:disabled='disableAddress'
|
||||
:rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
|
||||
:label="$t('common.address')"
|
||||
@change="changeAddress"
|
||||
:value="value.address")
|
||||
v-col(cols=12 md=6)
|
||||
v-text-field(ref='address'
|
||||
:prepend-icon='mdiMap'
|
||||
:disabled='disableAddress'
|
||||
:rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
|
||||
:label="$t('common.address')"
|
||||
@change="changeAddress"
|
||||
:value="value.address")
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -61,8 +61,7 @@ export default {
|
|||
if (tmpName === placeName) { nameMatch = true }
|
||||
return true
|
||||
}
|
||||
if (tmpAddress.includes(placeName)) { return true }
|
||||
return false
|
||||
return tmpAddress.includes(placeName)
|
||||
})
|
||||
if (!nameMatch) {
|
||||
matches.unshift({ create: true, name: this.placeName })
|
||||
|
|
|
|||
|
|
@ -11,13 +11,7 @@ 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='hasMedia' :src='event | mediaURL' itemprop="image")
|
||||
v-img.main_image.mb-3(
|
||||
contain
|
||||
:alt='event | mediaURL("alt")'
|
||||
:src='event | mediaURL'
|
||||
:lazy-src='event | mediaURL("thumb")'
|
||||
v-if='hasMedia')
|
||||
MyPicture(v-if='hasMedia' :event='event')
|
||||
.p-description.text-body-1.pa-3.rounded(v-if='!hasMedia && event.description' itemprop='description' v-html='event.description')
|
||||
|
||||
v-col.col-12.col-lg-4
|
||||
|
|
@ -55,6 +49,9 @@ v-container#event.pa-0.pa-sm-2
|
|||
v-btn.ml-2(large icon :title="$t('common.add_to_calendar')" color='primary' :aria-label="$t('common.add_to_calendar')"
|
||||
:href='`/api/event/${event.slug || event.id}.ics`')
|
||||
v-icon(v-text='mdiCalendarExport')
|
||||
v-btn.ml-2(v-if='hasMedia' large icon :title="$t('event.download_flyer')" color='primary' :aria-label="$t('event.download_flyer')"
|
||||
:href='event | mediaURL')
|
||||
v-icon(v-text='mdiFileDownloadOutline')
|
||||
|
||||
.p-description.text-body-1.pa-3.rounded(v-if='hasMedia && event.description' itemprop='description' v-html='event.description')
|
||||
|
||||
|
|
@ -133,10 +130,11 @@ import { mapState } from 'vuex'
|
|||
import get from 'lodash/get'
|
||||
import moment from 'dayjs'
|
||||
import clipboard from '../../assets/clipboard'
|
||||
import MyPicture from '~/components/MyPicture'
|
||||
const htmlToText = require('html-to-text')
|
||||
|
||||
import { mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiClose,
|
||||
mdiEye, mdiEyeOff, mdiDelete, mdiRepeat, mdiLock,
|
||||
mdiEye, mdiEyeOff, mdiDelete, mdiRepeat, mdiLock, mdiFileDownloadOutline,
|
||||
mdiCalendarExport, mdiCalendar, mdiContentCopy, mdiMapMarker } from '@mdi/js'
|
||||
|
||||
export default {
|
||||
|
|
@ -145,8 +143,9 @@ export default {
|
|||
components: {
|
||||
EventAdmin: () => import(/* webpackChunkName: "event" */'./eventAdmin'),
|
||||
EmbedEvent: () => import(/* webpackChunkName: "event" */'./embedEvent'),
|
||||
MyPicture
|
||||
},
|
||||
async asyncData ({ $axios, params, error, store }) {
|
||||
async asyncData ({ $axios, params, error }) {
|
||||
try {
|
||||
const event = await $axios.$get(`/event/${params.slug}`)
|
||||
return { event }
|
||||
|
|
@ -156,7 +155,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar,
|
||||
mdiArrowLeft, mdiArrowRight, mdiDotsVertical, mdiCodeTags, mdiCalendarExport, mdiCalendar, mdiFileDownloadOutline,
|
||||
mdiMapMarker, mdiContentCopy, mdiClose, mdiDelete, mdiEye, mdiEyeOff, mdiRepeat, mdiLock,
|
||||
currentAttachment: 0,
|
||||
event: {},
|
||||
|
|
@ -330,11 +329,4 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main_image {
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
transition: max-height 0.2s;
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
|
@ -12,48 +12,43 @@ try {
|
|||
|
||||
const DiskStorage = {
|
||||
_handleFile (req, file, cb) {
|
||||
const filename = crypto.randomBytes(16).toString('hex') + '.jpg'
|
||||
const finalPath = path.resolve(config.upload_path, filename)
|
||||
const thumbPath = path.resolve(config.upload_path, 'thumb', filename)
|
||||
const outStream = fs.createWriteStream(finalPath)
|
||||
const thumbStream = fs.createWriteStream(thumbPath)
|
||||
const filename = crypto.randomBytes(16).toString('hex')
|
||||
const sharpStream = sharp({ failOnError: true })
|
||||
const promises = [
|
||||
sharpStream.clone().resize(500, null, { withoutEnlargement: true }).jpeg({ quality: 90, mozjpeg: true }).toFile(path.resolve(config.upload_path, 'thumb', filename + '.jpg')),
|
||||
sharpStream.clone().resize(500).webp({ quality: 90, alphaQuality: 0, effort: 6 }).toFile(path.resolve(config.upload_path, 'thumb', filename + '.webp')),
|
||||
sharpStream.clone().resize(1200, null, { withoutEnlargement: true } ).jpeg({ quality: 98, mozjpeg: true }).toFile(path.resolve(config.upload_path, filename + '.jpg')),
|
||||
sharpStream.clone().resize(1200).webp({ quality: 98, alphaQuality: 0, effor: 6 }).toFile(path.resolve(config.upload_path, filename + '.webp')),
|
||||
sharpStream.clone()
|
||||
.resize(6)
|
||||
.png({ quality: 20, palette: true, alphaQuality: 0, effort: 6})
|
||||
.toBuffer()
|
||||
.then(buffer => buffer.toString('base64'))
|
||||
]
|
||||
|
||||
const resizer = sharp().resize(1200).jpeg({ quality: 98 })
|
||||
const thumbnailer = sharp().resize(500).jpeg({ quality: 98 })
|
||||
let onError = false
|
||||
const err = e => {
|
||||
if (onError) {
|
||||
log.error('[UPLOAD]', err)
|
||||
return
|
||||
}
|
||||
onError = true
|
||||
log.error('[UPLOAD]', e)
|
||||
req.err = e
|
||||
cb(null)
|
||||
}
|
||||
|
||||
file.stream
|
||||
.pipe(thumbnailer)
|
||||
.on('error', err)
|
||||
.pipe(thumbStream)
|
||||
.on('error', err)
|
||||
|
||||
file.stream
|
||||
.pipe(resizer)
|
||||
.on('error', err)
|
||||
.pipe(outStream)
|
||||
.on('error', err)
|
||||
|
||||
outStream.on('finish', () => {
|
||||
cb(null, {
|
||||
destination: config.upload_path,
|
||||
filename,
|
||||
path: finalPath,
|
||||
size: outStream.bytesWritten
|
||||
file.stream.pipe(sharpStream)
|
||||
Promise.all(promises)
|
||||
.then(res => {
|
||||
const info = res[2]
|
||||
const preview = res[4]
|
||||
console.error(preview)
|
||||
cb(null, {
|
||||
destination: config.upload_path,
|
||||
filename: filename + '.jpg',
|
||||
path: path.resolve(config.upload_path, filename + '.jpg'),
|
||||
height: info.height,
|
||||
width: info.width,
|
||||
size: info.size,
|
||||
preview
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
req.err = err
|
||||
cb(null)
|
||||
})
|
||||
})
|
||||
},
|
||||
_removeFile (req, file, cb) {
|
||||
_removeFile (_req, file, cb) {
|
||||
delete file.destination
|
||||
delete file.filename
|
||||
fs.unlink(file.path, cb)
|
||||
|
|
|
|||
|
|
@ -22,18 +22,22 @@
|
|||
|
||||
function when (event) {
|
||||
return new Date(event.start_datetime*1000)
|
||||
.toLocaleDateString(undefined,
|
||||
{
|
||||
weekday: 'long',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
.toLocaleDateString(undefined,
|
||||
{
|
||||
weekday: 'long',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
function thumbnail(event) {
|
||||
return `${baseurl}/media/thumb/${event.media[0].url}`
|
||||
function thumbnail(event, format) {
|
||||
const imgPath = event.media[0].url
|
||||
if (format === 'webp') {
|
||||
return `${baseurl}/media/thumb/${imgPath.replace(/.jpg$/, '.webp')}`
|
||||
}
|
||||
return `${baseurl}/media/thumb/${imgPath}`
|
||||
}
|
||||
|
||||
function position(event) {
|
||||
|
|
@ -49,7 +53,11 @@
|
|||
{#if event}
|
||||
<a href='{baseurl}/event/{event.slug || event.id}' class='card' target='_blank'>
|
||||
{#if event.media.length}
|
||||
<img src="{thumbnail(event)}" alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;">
|
||||
|
||||
<picture>
|
||||
<source srcset="{thumbnail(event, 'webp')}" type='image/webp' />
|
||||
<img src="{thumbnail(event)}" alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;">
|
||||
</picture>
|
||||
{/if}
|
||||
<div class="container">
|
||||
<strong>{event.title}</strong>
|
||||
|
|
|
|||
Loading…
Reference in a new issue