Commit 7b01a7e0 authored by christianrhansen's avatar christianrhansen

Merge branch 'master' of...

Merge branch 'master' of gitlab.rlp.net:motionbank/mbjs/quasar-components-shared into 263-shared---navibar-revision

 Conflicts:
	navigation/BreadcrumbNav.vue
	navigation/PageSubNav.vue
	navigation/UserNav.vue
	navigation/UserNavButton.vue
parents 975640e6 eb4fb8ee
Pipeline #16197 passed with stage
in 1 minute and 24 seconds
......@@ -14,7 +14,7 @@
},
computed: {
isLocal () {
return this.url && (this.url.indexOf(process.env.UI_HOST) === 0 || this.url[0] === '/')
return this.url && (this.url.indexOf(document.location.origin) === 0 || this.url[0] === '/')
},
routerTo () {
let url
......
<template lang="pug">
span {{ videoTitle }}
</template>
<script>
import path from 'path'
import url from 'url'
import he from 'he'
// import { getMetaData } from '../../../lib/annotations/videos'
const fetchTitle = function (source) {
const _this = this
return Promise.resolve()
.then(() => {
if (source.indexOf('http') !== 0) return
if (path.extname(url.URL(source).path) === '.mp4') {
source = source.replace(/\.mp4/i, '.html')
}
return this.$axios.get(`${_this.$globalConfig.app.hosts.api}/proxy?url=${encodeURIComponent(source)}`)
.then(result => {
let title = result.text.match(/<title[^>]*>([^<]+)<\/title>/)[1]
return he.decode(title)
})
.catch(err => {
console.warn(`Error getting title for ${source}: ${err.message}`)
return source
})
})
}
export {
fetchTitle
}
export default {
props: ['source'],
/*
watch: {
async source () {
const meta = await getMetaData()
}
},
*/
asyncComputed: {
async videoTitle () {
const title = await fetchTitle(this.source)
return title
}
}
}
</script>
......@@ -4,7 +4,6 @@ import MarkdownDisplay from './MarkdownDisplay'
import PromiseSpan from './PromiseSpan'
import StyleTag from './StyleTag'
import Username from './Username'
import VideoTitle from './VideoTitle'
export {
ConditionalLink,
......@@ -12,6 +11,5 @@ export {
MarkdownDisplay,
PromiseSpan,
StyleTag,
Username,
VideoTitle
Username
}
......@@ -152,9 +152,6 @@
body: message,
type: 'success'
})
if (schema.state) {
$store.commit(`forms/${schema.state}`, null)
}
})
.catch(function (err) {
Loading.hide()
......@@ -182,9 +179,6 @@
this.initForm()
}
this.$emit('input', data)
if (this.schema.state) {
this.$store.commit(`forms/${this.schema.state}`, data)
}
},
deep: true
}
......
......@@ -10,7 +10,7 @@
q-list.col-7.no-border.no-padding.margin-bottom(v-if="sc == 'timeline'")
q-item.item-hover
q-item-main ...is allowed to add videos to this timeline.
q-item-main ...is allowed to add media to this timeline.
q-item-side.text-white
q-toggle(v-for="ut in u.timelines", v-model="ut.add", :key="ut")
......@@ -30,7 +30,7 @@
q-list.col-7.no-border.no-padding.margin-bottom(v-if="sc == 'grid'")
q-item.item-hover
q-item-main ...is allowed to add videos to this grid.
q-item-main ...is allowed to add media to this grid.
q-item-side.text-white
q-toggle(v-model="toggle")
q-item.item-hover
......@@ -48,22 +48,22 @@
q-list.col-7.no-border.no-padding.margin-bottom(v-if="sc == 'timeline'")
q-item.item-hover
q-item-main ...is allowed to add videos.
q-item-main ...is allowed to add media.
q-item-side.text-white
q-toggle(v-model="toggle")
q-item.item-hover
q-item-main ...is allowed to videos.
q-item-main ...is allowed to media.
q-item-side.text-white
q-toggle(v-model="toggle")
q-item.item-hover
q-item-main ...is allowed to delete videos.
q-item-main ...is allowed to delete media.
q-item-side.text-white
q-toggle(v-model="toggle")
q-item.item-hover
q-item-main ...is allowed to annotate videos.
q-item-main ...is allowed to annotate media.
q-item-side.text-white
q-toggle(v-model="toggle")
......
import { BackButton } from './buttons'
import FullScreen from './layouts/FullScreen'
import VideoPlayer from './media/VideoPlayer'
import MediaPlayer from './media/MediaPlayer'
import BrowserWarning from './dialogs/BrowserWarning'
import DataTable from './partials/DataTable'
import ConfirmModal from './dialogs/ConfirmModal'
......@@ -9,19 +9,17 @@ import PromiseSpan from './elements/PromiseSpan'
import SiteFooter from './partials/SiteFooter'
import Uploader from './partials/Uploader'
import Username from './elements/Username'
import VideoTitle from './elements/VideoTitle'
export {
BackButton,
BrowserWarning,
FullScreen,
VideoPlayer,
MediaPlayer,
DataTable,
ConfirmModal,
MarkdownDisplay,
PromiseSpan,
SiteFooter,
Uploader,
Username,
VideoTitle
Username
}
......@@ -3,6 +3,7 @@
ref="videoPlayer",
:options="playerOptions",
:playsinline="true",
:audio="isAudio",
customEventName="customstatechangedeventname",
@play="onPlayerEvent('play', $event)",
@pause="onPlayerEvent('pause', $event)",
......@@ -27,8 +28,6 @@
import { videoPlayer } from 'vue-video-player'
import guessType from 'mbjs-media/src/util/guess-type'
if (process.env.FEATURE_BETWEENUS) require('./videojs-betweenus.styl')
export default {
components: {
'vue-video-player': videoPlayer
......@@ -42,6 +41,7 @@
'vjs-big-play-centered': true,
'vjs-betweenus': process.env.FEATURE_BETWEENUS
},
isAudio: undefined,
playerOptions: {
fluid: true,
autoplay: this.autoplay,
......@@ -104,6 +104,9 @@
async getSource (src, annotation = undefined) {
if (!src && !annotation) return
this.type = guessType(src || annotation.body.source.id)
this.isAudio = this.type.substr(0, 6) === 'audio/'
// FIXME: fix m4a mime type hack
if (this.type === 'audio/m4a') this.type = 'audio/mp4'
if (this.type === 'video/youtube') {
this.playerOptions.techOrder = ['youtube']
}
......@@ -208,7 +211,7 @@
top -0.4em
z-index 0
/* Video.js scaling */
/* Media.js scaling */
.video-js .vjs-tech
/*height auto*/
......
// FOR EXHIBITION
.vjs-betweenus
.video-js
font-family 'Roboto'
.video-js .vjs-control-bar
height 40px
.video-js.vjs-paused .vjs-big-play-button
background #2a65ff
width 65px
height 65px
border 0
border-radius 0
.vjs-big-play-centered
.vjs-big-play-button
margin-top -33px
.vjs-icon-placeholder:before
line-height 65px !important
.vjs-button > .vjs-icon-placeholder:before
font-size 2.5em
padding-top 1px
.video-js .vjs-control-bar
background-color #2a65ffaa
.vjs-slider
background-color #ffffff55
.vjs-volume-panel
display: none
.vjs-play-control
.vjs-icon-placeholder:before
line-height 40px
.vjs-fullscreen-control .vjs-icon-placeholder:before
line-height 40px
.video-js .vjs-time-control
font-size 0.85rem
line-height 40px
.video-js .vjs-progress-control
padding-top 3px
.vjs-load-progress
background-color #ffffff55
.video-js .vjs-play-progress:before
font-size: 1.5em
right: -0.8em
top: -0.4em
......@@ -25,21 +25,24 @@
:name="cancelButton.name",
:icon="'clear'")
q-btn-dropdown.bg-grey-10(v-else, type="a", :to="b.route", :label="b.label", flat, split)
q-list.q-pa-none(link)
q-item.q-pa-none(v-for="(di, i) in dropdownItems")
user-nav-button(
:route="di.route",
:label="di.label",
:name="di.name")
q-btn-dropdown.bg-grey-10(v-else-if="!createScreen", type="a", :to="b.route", :label="b.label", flat, split)
q-list.q-pa-none(link)
q-item.q-pa-none(v-for="di in dropdownItems")
user-nav-button(
:route="di.route",
:label="di.label",
:name="di.name")
template(v-if="b.name && createScreen")
q-btn(
type="a",
to="/piecemaker/timelines",
label="cancel",
icon="clear")
// cancel button
template(v-if="createScreen")
q-btn.bg-grey-9(disabled, style="min-height: auto") {{ b.label }}
q-btn.bg-primary.text-white.q-ml-sm(type="a", :to="b.route", flat, icon="clear", size="sm", round)
// q-icon.q-ml-sm(name="clear", size="sm")
// user: user-name w/o dropdown
template(v-else-if="user")
q-btn.bg-grey-10.text-white(v-if="breadcrumbs.length === 1 && !addButton", type="a", :to="b.route", flat)
| {{ user.profile ? user.profile.name : 'Unknown' }}
// ------------------------------------------------------------------------------------------------- simple button
template(v-else)
q-btn(v-if="b.name", type="a", :to="b.route", :label="b.label", flat)
......@@ -47,10 +50,11 @@
<script>
import UserNavButton from './UserNavButton'
import { mapGetters } from 'vuex'
export default {
name: 'breadcrumb-nav',
props: ['timeline', 'videoMetadata', 'video', 'grid', 'document'],
props: ['timeline', 'mediaMetadata', 'media', 'grid', 'document'],
components: {
UserNavButton
},
......@@ -82,14 +86,12 @@
}
},
computed: {
...mapGetters({
user: 'auth/getUserState'
}),
createScreen () {
const parts = this.$route.name.split('.')
if (parts[parts.length - 1] === 'create') {
return true
}
else {
return false
}
return parts[parts.length - 1] === 'create'
},
breadcrumbs () {
let bc = []
......@@ -110,13 +112,13 @@
label: this.timeline.title,
name: 'piecemaker.timelines.show',
params: { uuid: this.timeline._uuid },
route: '/piecemaker/timelines/' + this.timeline._uuid + '/videos'
route: '/piecemaker/timelines/' + this.timeline._uuid + '/media'
})
}
if (this.videoMetadata) {
if (this.mediaMetadata) {
bc.push({
label: this.videoMetadata.title,
route: '/piecemaker/videos/' + this.video._uuid + '/annotate'
label: this.mediaMetadata.title,
route: '/piecemaker/media/' + this.media._uuid + '/annotate'
})
}
if (this.grid) {
......@@ -141,14 +143,43 @@
// const s = b[2]
// if (!this.excludeTermns.includes(s)) bc.push({ label: this.toProperCase(b[2]) })
// }
if (parts[parts.length - 1] === 'create') {
if (parts[0] === 'piecemaker') {
if (!this.timeline) {
bc.push({
label: 'Create timeline',
route: '/piecemaker/timelines'
})
}
else {
bc.push({
label: 'Add media',
route: '/piecemaker/timelines/' + this.timeline._uuid + '/media'
})
}
}
if (parts[0] === 'mosys') {
bc.push({
label: 'Create grid',
route: '/mosys/grids'
})
}
if (parts[0] === 'documents') {
bc.push({
label: 'Add document',
route: '/documents/list'
})
}
}
return bc
},
dropdownItems () {
let di = []
if (this.timeline) {
di.push({
label: this.$t('navigation.piecemaker.piecemaker_videos_list'),
route: '/piecemaker/timelines/' + this.timeline._uuid + '/videos',
label: this.$t('navigation.piecemaker.piecemaker_media_list'),
route: '/piecemaker/timelines/' + this.timeline._uuid + '/media',
name: 'piecemaker.timelines.list'
}, {
label: this.$t('navigation.piecemaker.piecemaker_timelines_annotate'),
......@@ -164,20 +195,20 @@
name: 'piecemaker.timelines.search'
})
}
if (this.videoMetadata) {
if (this.mediaMetadata) {
di = []
di.push({
label: this.$t('navigation.piecemaker.piecemaker_videos_annotate'),
route: '/piecemaker/videos/' + this.video._uuid + '/annotate',
name: 'piecemaker.videos.annotate'
label: this.$t('navigation.piecemaker.piecemaker_media_annotate'),
route: '/piecemaker/media/' + this.media._uuid + '/annotate',
name: 'piecemaker.media.annotate'
}, {
label: this.$t('navigation.piecemaker.piecemaker_videos_edit'),
route: '/piecemaker/videos/' + this.video._uuid + '/edit',
name: 'piecemaker.videos.edit'
label: this.$t('navigation.piecemaker.piecemaker_media_edit'),
route: '/piecemaker/media/' + this.media._uuid + '/edit',
name: 'piecemaker.media.edit'
}, {
label: this.$t('navigation.piecemaker.piecemaker_videos_sync'),
route: '/piecemaker/videos/' + this.video._uuid + '/sync',
name: 'piecemaker.videos.sync'
label: this.$t('navigation.piecemaker.piecemaker_media_sync'),
route: '/piecemaker/media/' + this.media._uuid + '/sync',
name: 'piecemaker.media.sync'
})
}
if (this.grid) {
......@@ -232,9 +263,9 @@
}
if (this.timeline) {
ab = {
label: this.$t('buttons.add_video'),
route: '/piecemaker/timelines/' + this.timeline._uuid + '/videos/create',
name: 'piecemaker.videos.create'
label: this.$t('buttons.add_media'),
route: '/piecemaker/timelines/' + this.timeline._uuid + '/media/create',
name: 'piecemaker.media.create'
}
}
if (this.breadcrumbs[0].label === 'Documents') {
......@@ -248,17 +279,17 @@
},
cancelButton () {
let cb
const parts = this.$route.name.split('.')
cb = {
label: this.$t('buttons.cancel'),
route: '/piecemaker/timelines'
route: '/piecemaker/timelines',
name: 'xxx'
}
if (parts[parts.length - 1] === 'create') {
return cb
}
return cb
}
},
mounted () {
},
watch: {
},
methods: {
toProperCase (t) {
return t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()
......@@ -271,4 +302,16 @@
@import '~variables'
.q-btn-dropdown-split .q-btn-dropdown-arrow
border-left 0px solid red!important
.q-btn-dropdown-split .q-btn
min-height auto!important
padding-top 8px
padding-bottom 8px
</style>
<style lang="stylus" scoped>
@import '~variables'
.q-btn
min-height auto!important
padding-top 8px
padding-bottom 8px
</style>
......@@ -76,18 +76,18 @@
'piecemaker.timelines.edit',
'piecemaker.timelines.search',
'piecemaker.timelines.show',
'piecemaker.videos.create'
'piecemaker.media.create'
],
timelineCreate: [
'piecemaker.timelines.create'
],
video: [
'piecemaker.videos.annotate',
'piecemaker.videos.edit',
'piecemaker.videos.sync'
media: [
'piecemaker.media.annotate',
'piecemaker.media.edit',
'piecemaker.media.sync'
],
videoCreate: [
'piecemaker.videos.create'
mediaCreate: [
'piecemaker.media.create'
],
mosys: [
'mosys.grids.list'
......@@ -196,7 +196,7 @@
navLinks: [
{
name: 'piecemaker.timelines.show',
label: 'Videos'
label: 'labels.media'
},
{
name: 'piecemaker.timelines.annotate',
......@@ -216,9 +216,9 @@
'piecemaker.timelines.show': [
{
type: 'link',
label: this.$t('buttons.add_video'),
label: this.$t('buttons.add_media'),
color: 'primary',
name: 'piecemaker.videos.create',
name: 'piecemaker.media.create',
icon: 'add',
params: {
'timelineUuid': 'uuid'
......@@ -239,23 +239,23 @@
]
}
},
video: {
media: {
navLinks: [
{
name: 'piecemaker.videos.annotate',
name: 'piecemaker.media.annotate',
label: 'Annotate'
},
{
name: 'piecemaker.videos.edit',
name: 'piecemaker.media.edit',
label: 'Edit'
},
{
name: 'piecemaker.videos.sync',
name: 'piecemaker.media.sync',
label: 'Sync'
}
],
specialFunctions: {
'piecemaker.videos.annotate': [
'piecemaker.media.annotate': [
{
type: 'popover',
icon: 'view_quilt',
......@@ -265,14 +265,14 @@
label: 'Annotation List',
model: 'annotationListVisibility',
onInput: () => {
this.$store.commit('swimLaneSettings/setVisibilityDrawer')
this.$store.commit('swimLane/setVisibilityDrawer')
}
},
{
label: 'Swim Lane',
model: 'swimLaneVisibility',
onInput: () => {
this.$store.commit('swimLaneSettings/setVisibilitySwimlanes')
this.$store.commit('swimLane/setVisibilitySwimlanes')
}
},
{
......@@ -280,7 +280,7 @@
model: 'annotationDetailsVisibility',
class: 'q-pl-lg',
onInput: () => {
this.$store.commit('swimLaneSettings/setVisibilityDetails')
this.$store.commit('swimLane/setVisibilityDetails')
}
}
]
......@@ -288,9 +288,9 @@
]
}
},
videoCreate: {
mediaCreate: {
specialFunctions: {
'piecemaker.videos.create': [
'piecemaker.media.create': [
{
type: 'link',
label: 'Cancel',
......@@ -335,9 +335,9 @@
...mapGetters({
// user: 'auth/getUserState',
// isMobile: 'globalSettings/getIsMobile',
visibilitySwimlanes: 'swimLaneSettings/getVisibilitySwimlanes',
visibilityDetails: 'swimLaneSettings/getVisibilityDetails',
visibilityDrawer: 'swimLaneSettings/getVisibilityDrawer',
visibilitySwimlanes: 'swimLane/getVisibilitySwimlanes',
visibilityDetails: 'swimLane/getVisibilityDetails',
visibilityDrawer: 'swimLane/getVisibilityDrawer',
showSources: 'mosys/getShowSources',
showAddCells: 'mosys/getShowAddCells'
}),
......
This diff is collapsed.
......@@ -4,7 +4,7 @@
:to="route",
:label="label",
:icon="icon",
:class="{'text-primary background-primary-20' : name === currentRoute}",
:class="{'text-primary background-primary-20' : nameCheck === currentRoute}",
align="left",
flat)
</template>
......@@ -15,12 +15,29 @@
props: ['label', 'name', 'route', 'icon'],
data () {
return {
currentRoute: ''
nameCheck: undefined
}
},
computed: {
currentRoute () {
return this.$route.name
}
},
mounted () {
if (this.currentRoute === 'piecemaker.timelines.show' && this.name === 'piecemaker.timelines.list') {
this.nameCheck = 'piecemaker.timelines.show'
}
else if (this.currentRoute === 'piecemaker.media.list' && this.name === 'piecemaker.timelines.list') {
this.nameCheck = 'piecemaker.media.list'
}
else this.nameCheck = this.name
},
watch: {
'$route' (route) {
this.currentRoute = route.name
// coloring fix
currentRoute () {
if (this.name === 'mosys.grids.create' || this.name === 'mosys.grids.show') {
this.nameCheck = 'mosys.grids.show'
}
}
}
}
......
......@@ -2,9 +2,11 @@
div
// buttons and search bar above the table
.row.gutter-md.q-mb-md
.col-3.col-sm-5.col-md-4.col-lg-3.col-xl-3
slot(name="top-buttons", slot-scope="props")
.col-9.col-sm-7.col-md-8.col-lg-9.col-xl-9
//
.col-3.col-sm-5.col-md-4.col-lg-3.col-xl-3
slot(name="top-buttons", slot-scope="props")
.col-9.col-sm-7.col-md-8.col-lg-9.col-xl-9
.col-12
q-search(v-model="filter", dark, icon="search")
q-table.full-width(
......@@ -58,7 +60,7 @@
</template>
<script>
import PromiseSpan from '../elements/PromiseSpan'
import { PromiseSpan } from '../elements'
import { mapGetters } from 'vuex'
import { userHasFeature } from 'mbjs-quasar/src/lib'
// import { DateTime } from 'luxon'
......
......@@ -101,7 +101,7 @@
if (/.+\/timelines\/[^/]+\/edit$/.test(path)) {
return constants.mapTypes.MAP_TYPE_TIMELINE
}
else if (/.+\/videos\/[^/]+\/edit$/.test(path)) {
else if (/.+\/media\/[^/]+\/edit$/.test(path)) {
return 'Video'
}
else if (/.+\/grids\/[^/]+\/edit$/.test(path)) {
......
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