Commit bee2eab6 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '532-Assets-to-mosys' into 'release_2_5'

add assets to mosys

See merge request !58
parents fa1a09da f3dc2fb9
Pipeline #111040 passed with stage
in 11 seconds
......@@ -34,20 +34,28 @@
.slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
template(v-if="selectedSource === 'cells'")
source-cells
source-cells(@nextSlide="onNextSlide()")
template(v-if="selectedSource === 'piecemaker'")
source-piecemaker(@nextSlide="onNextSlide()")
//---------- slide 3
q-carousel-slide.q-pa-none(v-if="selectedSource === 'piecemaker'")
slide-header.bg-grey-10.text-grey-3.q-pl-xl.text-left(v-if="storeCurrentTimeline", style="max-height: 52px;")
q-tooltip.z-max.bg-dark.q-mx-md.shadow-6(anchor="top left", self="bottom left")
| {{ storeCurrentTimeline.title }}
.q-px-sm.ellipsis
| {{ storeCurrentTimeline.title }}
q-carousel-slide.q-pa-none
slide-header.bg-grey-10.text-grey-3
// Header Timeline
template(v-if="selectedSource === 'piecemaker'")
div(v-if="storeCurrentTimeline", style="max-height: 52px;")
q-tooltip.z-max.bg-dark.q-mx-md.shadow-6(anchor="top left", self="bottom left")
| {{ storeCurrentTimeline.title }}
.q-px-sm.ellipsis
| {{ storeCurrentTimeline.title }}
// Header Assets
template(v-else) Select Asset
.slide-body(:class="[isMobile ? 'mobile' : 'desktop']")
source-piecemaker-details
template(v-if="selectedSource === 'cells'")
source-cells-assets
template(v-if="selectedSource === 'piecemaker'")
source-piecemaker-details
.absolute-top-left.fit.q-pa-md(v-if="cachedNewCell", disabled)
//
......@@ -58,6 +66,7 @@
<script>
import SlideHeader from './SlideHeader'
import SourceCells from './sources/SourceCells'
import SourceCellsAssets from './sources/SourceCellsAssets'
import SourcePiecemaker from './sources/SourcePiecemaker'
import SourcePiecemakerDetails from './sources/SourcePiecemakerDetails'
......@@ -67,6 +76,7 @@
components: {
SlideHeader,
SourceCells,
SourceCellsAssets,
SourcePiecemaker,
SourcePiecemakerDetails
},
......
......@@ -60,6 +60,12 @@
@input="value => {handleItemChanged(value, item)}",
@change="value => {handleItemChanged(value, item)}")
// Select media from asset store
q-btn.q-mb-md.q-px-sm.q-py-xs(
v-if="item.type === 'Media' || item.type === 'Image'"
dense
@click="goToAssets"
) Select Media
</template>
<script>
......@@ -207,6 +213,9 @@
item.value = value
}
}
},
goToAssets () {
this.$emit('nextSlide')
}
}
}
......
<template lang="pug">
q-list.q-py-none
template(v-if="!userAssets.length")
q-item(v-if="loadingMedia")
q-item-side
q-spinner(style="margin-right: 1em")
q-item-main Loading Assets
q-item.text-grey-8.text-italic.q-mt-sm(v-else) No Assets Found!
template(v-else)
template(v-for="(asset, i) in userAssets")
q-item-separator.q-ma-none(v-if="i > 0", style="background-color: rgba(255,255,255,0.04);")
q-item.q-px-md.q-py-lg.media-item.custom-hover(@click.native="cacheNewCell(asset)")
q-item-main
q-item-tile.text-grey-3.q-mb-md {{ asset.title.length > 24 ? `${asset.title.slice(0, 24)}…` : asset.title }}
// TODO: Test imgs
q-item-tile
img(
:src="getAssetUrl(asset)"
)
//q-img(
//:src="getAssetUrl(asset)"
//:ratio="16/9"
//contain
//)
</template>
<script>
import { mapGetters } from 'vuex'
import path from 'path'
export default {
name: 'SourceAssets',
data () {
return {
items: {
media: {
inputType: 'url',
type: 'Media',
label: 'Media Cell',
component: 'CellMedia',
help: 'Insert a URL to: a video file or a Vimeo / YouTube video page',
error: false,
errorMessage: 'Needs to be a valid URL',
value: ''
},
image: {
inputType: 'url',
type: 'Image',
label: 'Image Cell',
component: 'CellImage',
help: 'Insert a URL to an image file',
error: false,
errorMessage: 'Needs to be a valid URL',
value: ''
}
},
userAssets: undefined,
showAclModal: false,
aclResource: undefined
}
},
computed: {
...mapGetters({
user: 'auth/getUserState'
}),
bucket () {
if (this.user) return `user-${this.user.uuid}`
}
},
async mounted () {
await this.initUserAssets()
},
methods: {
cacheNewCell (asset) {
console.log('Handling it')
const item = asset.metadata['content-type'].slice(0, 5) === 'image' ? this.items.image : this.items.media
let resourceCell = {
source: {
value: {
content: this.getAssetUrl(asset)
}
},
configuration: {
value: {
component: item.component
}
},
stylesheet: {
value: undefined
}
}
if (item.component === 'CellImage') {
resourceCell.configuration.value.backgroundSize = 'contain'
resourceCell.configuration.value.backgroundPosition = 'center'
resourceCell.stylesheet.value = 'background-size: contain; background-position: center;'
}
this.$store.commit('mosys/cacheNewCell', resourceCell)
if (this.isMobile) this.$store.commit('mosys/toggleSources')
},
getIcon (entry) {
if (entry.size) {
const { metaData } = entry
if (metaData) {
if (metaData['content-type'].indexOf('audio') === 0) return 'audiotrack'
if (metaData['content-type'].indexOf('image') === 0) return 'image'
if (metaData['content-type'].indexOf('video') === 0) return 'movie'
}
}
else return 'folder'
},
async initUserAssets () {
this.userAssets = await this.listDir(this.bucket, true)
},
transformEntries (entries) {
return [].concat(entries.filter(entry => !entry.size).map(node => ({
label: path.basename(node.prefix),
fullpath: `${this.bucket}/${node.prefix || ''}${node.name || ''}`,
expandable: true,
lazy: true,
icon: 'folder'
})).sort((a, b) => a.label.localeCompare(b.label))).concat(entries.filter(entry => !!entry.size).map(node => ({
title: path.basename(node.name),
label: path.basename(node.name),
fullpath: `${this.bucket}/${node.prefix || ''}${node.name || ''}`,
size: node.size,
metadata: node.metaData,
expandable: false,
icon: this.getIcon(node)
})).sort((a, b) => a.label.localeCompare(b.label)))
},
async listDir (path, isRoot = false) {
const entries = await this.$store.dispatch('assets/find', path)
if (entries) {
return this.transformEntries(entries, isRoot)
}
},
getAssetUrl (node) {
return `${process.env.API_HOST}/assets/${node.fullpath}?dl=true&token=${this.$auth.token}`
}
}
}
</script>
<style lang="stylus" scoped>
img
max-width 100%
max-height 150px
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment