Commit f530419b authored by Anton's avatar Anton
Browse files

Remove obsolete code

parent 7809a92e
<template lang="pug">
q-list.default-source-container
q-list-header
q-input(
v-model="term", type="textarea", :min-rows="1",
:max-height="200", :style="{'line-height': '1.5em', width: '100%'}")
q-item-separator
template(v-if="results.length === 0")
q-item This is the magic box, just enter:
q-item ● A tag starting with a hash-symbol: #[span #my tag]
q-item ● A URL pointing to a video, image or internal or external page
q-item ● Short or long text
// loading, nothing here
template(v-if="loading")
q-item
q-item-side
q-spinner(style="margin-right: 1em")
q-item-main Loading videos for »{{term}}«
q-item-separator
template(v-else-if="nothingFound")
q-item No Videos Found!
// videos, annotations
template(v-if="results")
template(v-for="(result, i) in results")
template(v-if="i > 0")
q-item-separator
q-item(draggable="true", @dragstart.native="event => {handleItemDragStart(event, result)}")
q-item-side
q-icon(:name="typeToIconName(result.body.type)", style="font-size: 1.8rem")
q-item-main
a(@click.prevent="event => {handleItemClick(event, result)}")
template(v-if="result.body.source") {{result.body.source.substring(0, 100)}}
template(v-if="result.body.source.length > 100") ...
template(v-else-if="result.body.value") {{result.body.value.substring(0, 100)}}
template(v-if="result.body.value.length > 100") ...
template(v-else) Hm, no title?
</template>
<script>
import url from 'url'
import { ObjectUtil } from 'mbjs-utils'
const hostToTypeMap = {
'vimeo.com': 'Video',
'www.vimeo.com': 'Video',
'youtube.com': 'Video',
'www.youtube.com': 'Video'
}
const typeToIconName = {
'image': 'photo',
'iframe': 'picture in picture',
'internal-link': 'link',
'video': 'local movies',
'text': 'subject',
'title': 'title'
}
const mimeTypesToAnnotationTypeMap = {
'image/jpeg': 'Image',
'image/png': 'Image',
'image/gif': 'Image',
'image/svg+xml': 'Image',
'image/tiff': 'Image',
'image/webp': 'Image',
'application/pdf': 'PDF-Document',
'video/webm': 'Video',
'video/3gpp': 'Video',
'video/3gpp2': 'Video',
'video/x-msvideo': 'Video',
'video/mpeg': 'Video',
'video/mp4': 'Video',
'video/ogg': 'Video',
'audio/x-wav': 'Audio',
'audio/webm': 'Audio',
'audio/3gpp': 'Audio',
'audio/3gpp2': 'Audio',
'audio/aac': 'Audio',
'audio/midi': 'Audio',
'audio/ogg': 'Audio',
'text/csv': 'Unknown',
'text/calendar': 'Unknown',
'application/json': 'Unknown',
'application/rtf': 'Unknown',
'application/xml': 'Unknown',
'text/plain': 'IFrame',
'text/html': 'IFrame',
'application/xhtml+xml': 'IFrame'
}
export default {
data () {
return {
term: '',
results: [],
nothingFound: false,
loading: false
}
},
watch: {
term () {
this.term = this.term.trim()
this.handleSearchTerm()
}
},
methods: {
typeToIconName (type) {
let iconName = typeToIconName[type.toLowerCase()]
if (!iconName) {
iconName = 'broken image'
}
return iconName
},
handleItemClick () {},
handleItemDragStart (event, result) {
let resourceCell = {
uuid: null,
type: result.body.type,
x: 1,
y: 1,
width: 1,
height: 1,
content: result.body.source,
sourceUuid: result.body.sourceUuid
}
event.dataTransfer.setData('text/plain', JSON.stringify(resourceCell))
},
handleSearchTerm () {
const _this = this
if (this.term.length > 0) {
let res = {
body: {
source: this.term,
purpose: 'linking',
type: 'Undefined'
}
}
let results = []
// A URL
if (/^[\s]*http[s]?:\/\/.+/.test(this.term)) {
let sourceUrl = url.parse(this.term)
let currentUrl = url.parse(window.location.href)
let type = 'Unknown'
if (sourceUrl.host === currentUrl.host) {
type = 'Internal-Link'
let internalPath = sourceUrl.path
if (internalPath) {
// TODO: fix internal links to only point to public displays?
}
res.body.source = internalPath
}
else {
// TODO: how to deal with redirects here? Short URLs? …
type = this.getTypeFromSourceURL(sourceUrl)
}
if (!type) {
type = 'IFrame'
// TODO: check if change from superagent to axios plugin is breaking
_this.$axios.get(`${process.env.API_HOST}/proxy?url=${encodeURIComponent(this.term)}`)
.then(resp => {
if (resp.status === 301) { // prem redirect
if (resp.headers['location']) _this.term = resp.headers['location']
}
else {
res.body.type = _this.mimeTypeToType(resp.headers['content-type']) // TODO: global mime-type to annotation type lookup
results.push(res)
this.results = results
}
})
.catch(() => {
results.push(res)
})
}
else {
res.body.type = type
results.push(res)
}
}
// TAGGING
else if (/^[\s]*#.+/.test(this.term)) {
const tag = this.term.replace(/^[\s]*#/, '').toLowerCase()
_this.$store.dispatch('annotations/find', { 'body.purpose': 'tagging' })
.then(tagAnnotations => {
console.log(tagAnnotations)
let targetsMatched = {}
tagAnnotations.filter(ta => {
return ta.body.value.toLowerCase().indexOf(tag) >= 0
}).map(ta => {
if (!targetsMatched[ta.target.id]) {
targetsMatched[ta.target.id] = ta
ta.body.type = ta.target.type || ta.body.type
ta.body.source = ta.target.id
ta.body.sourceUuid = ta.target.id
results.push(ta)
}
})
_this.results = results
})
}
// MULTI LINE
else if (/[\n\r]/.test(this.term) || this.term.length > 200) {
res.body.type = 'text'
results.push(res)
}
// ASSUME ITs A TITLE
else {
res.body.type = 'title'
results.push(res)
let body = ObjectUtil.merge({}, res.body)
body.type = 'text'
results.push({ body })
}
this.results = results
}
else {
this.results = []
}
},
getTypeFromSourceURL (sourceUrl) {
let type = hostToTypeMap[sourceUrl.hostname]
if (!type) {
}
if (!type) {
console.log('Unknown URL resource', sourceUrl.toString())
return null
}
return type
},
mimeTypeToType (mimeType) {
let type = mimeTypesToAnnotationTypeMap[mimeType]
if (!type) {
type = 'IFrame'
}
return type
}
}
}
</script>
<style scoped lang="stylus">
.q-list-header
padding 0
.q-input
padding-left 1em
padding-right 1em
.q-input:before
.q-input:after
display none
.q-input
padding-left 0
</style>
<template lang="pug">
q-list.vimeo-source-container
q-list-header
q-input(v-model="searchTerm")
q-item-separator
// loading, nothing here
template(v-if="loadingVideos")
q-item
q-item-side
q-spinner(style="margin-right: 1em")
q-item-main Loading videos for »{{lastSearchTerm}}«
q-item-separator
template(v-else-if="searchResults.length === 0")
q-item No Videos Found!
// videos, annotations
template(v-if="searchResults.length > 0")
template(v-for="(video, i) in searchResults")
template(v-if="i > 0")
q-item-separator
q-item(draggable="true", @dragstart.native="event => {handleVideoItemDragStart(event, video)}")
q-item-side
template(v-if="video.pictures[4]")
img(:src="video.pictures[4].link", style="width: 100%; max-width: 50px")
template(v-else)
q-icon(name="local movies", style="font-size: 1.8rem")
q-item-main
a(@click.prevent="event => {handleVideoItemClick(event, video)}") {{video.name.substring(0, 100)}}
</template>
<script>
const VIMEO_ACCESS_TOKEN = '8dbc7f72ddb834a4665dbb6989014699'
const apiBase = 'https://api.vimeo.com'
const apiSearchVideos = '/videos'
export default {
data () {
return {
searchTerm: '',
searchResults: [],
loadingVideos: false,
lastSearchTerm: ''
}
},
watch: {
searchTerm () {
if (!this.loadingVideos) {
this.loadVideos()
}
}
},
methods: {
loadVideos () {
const _this = this
if (this.searchTerm.length >= 3) {
this.loadingVideos = true
this.lastSearchTerm = this.searchTerm
// TODO: check if change from superagent to axios plugin is breaking
this.$axios
.get(apiBase + apiSearchVideos, {
params: {
query: this.searchTerm,
access_token: VIMEO_ACCESS_TOKEN
}
})
.then(results => {
_this.searchResults = results.data.data
_this.checkNewSearchTerm()
})
.catch(() => {
console.log('Failed to load Vimeo results for', _this.searchTerm)
_this.checkNewSearchTerm()
})
}
else if (this.searchTerm.length === 0) {
this.searchResults = []
this.lastSearchTerm = ''
}
},
checkNewSearchTerm () {
if (this.searchTerm !== this.lastSearchTerm) {
this.loadVideos()
}
else {
this.loadingVideos = false
}
},
handleVideoItemClick () {
},
handleVideoItemDragStart (event, video) {
let videoCell = {
uuid: null,
type: 'Video',
x: 1,
y: 1,
width: 1,
height: 1,
content: video.link
}
event.dataTransfer.setData('text/plain', JSON.stringify(videoCell))
}
}
}
</script>
<style scoped lang="stylus">
.q-list-header
padding-left 0
.q-input
padding-left 1em
padding-right 1em
.q-input:before
.q-input:after
display none
.q-input
padding-left 0
</style>
<template lang="pug">
q-list.youtube-source-container
q-list-header
q-input(v-model="searchTerm")
q-item-separator
// loading, nothing here
template(v-if="loadingVideos")
q-item
q-item-side
q-spinner(style="margin-right: 1em")
q-item-main Loading videos for »{{lastSearchTerm}}«
q-item-separator
template(v-else-if="searchResults.length === 0")
q-item No Videos Found!
// videos, annotations
template(v-if="searchResults.length > 0")
template(v-for="(video, i) in searchResults")
template(v-if="i > 0")
q-item-separator
q-item(draggable="true", @dragstart.native="event => {handleVideoItemDragStart(event, video)}")
q-item-side
template(v-if="video.snippet.thumbnails.default")
img(:src="video.snippet.thumbnails.default.url", style="width: 100%; max-width: 50px")
template(v-else)
q-icon(name="local movies", style="font-size: 1.8rem")
q-item-main
a(@click.prevent="event => {handleVideoItemClick(event, video)}") {{video.snippet.title.substring(0, 100)}}
</template>
<script>
const YOUTUBE_API_KEY = 'AIzaSyCMfeZXhTec0elm19N_2TTBHNZR2hpl-5Q'
const apiBase = 'https://www.googleapis.com'
const apiSearchVideos = '/youtube/v3/search'
export default {
data () {
return {
searchTerm: '',
searchResults: [],
loadingVideos: false,
lastSearchTerm: ''
}
},
watch: {
searchTerm () {
if (!this.loadingVideos) {
this.loadVideos()
}
}
},
methods: {
loadVideos () {
const _this = this
if (this.searchTerm.length >= 3) {
this.loadingVideos = true
this.lastSearchTerm = this.searchTerm
// TODO: check if change from superagent to axios plugin is breaking
this.$axios
.get(apiBase + apiSearchVideos, {
params: {
q: this.searchTerm,
part: 'snippet',
maxResults: 30,
key: YOUTUBE_API_KEY
}
})
.then(results => {
_this.searchResults = results.data.items
_this.checkNewSearchTerm()
})
.catch(() => {
console.log('Failed to load YouTube results for', _this.searchTerm)
_this.checkNewSearchTerm()
})
}
else if (this.searchTerm.length === 0) {
this.searchResults = []
this.lastSearchTerm = ''
}
},
checkNewSearchTerm () {
if (this.searchTerm !== this.lastSearchTerm) {
this.loadVideos()
}
else {
this.loadingVideos = false
}
},
handleVideoItemClick () {
},
handleVideoItemDragStart (event, video) {
let videoCell = {
uuid: null,
type: 'Video',
x: 1,
y: 1,
width: 1,
height: 1,
content: 'https://www.youtube.com/watch?v=' + video.id.videoId
}
event.dataTransfer.setData('text/plain', JSON.stringify(videoCell))
}
}
}
</script>
<style scoped lang="stylus">
.q-list-header
padding-left 0
.q-input
padding-left 1em
padding-right 1em
.q-input:before
.q-input:after
display none
.q-input
padding-left 0
</style>
...@@ -2,11 +2,8 @@ ...@@ -2,11 +2,8 @@
q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab") q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab")
q-tab(slot="title", name="tab-default-cells", default, icon="add") q-tab(slot="title", name="tab-default-cells", default, icon="add")
<!--q-tab(slot="title", name="tab-magic-box", icon="wb iridescent")-->
q-tab(slot="title", name="tab-piecemaker") Piecemaker q-tab(slot="title", name="tab-piecemaker") Piecemaker
q-tab(slot="title", name="tab-documents", v-if="userHasDocuments") Documents q-tab(slot="title", name="tab-documents", v-if="userHasDocuments") Documents
q-tab(slot="title", name="tab-vimeo") Vimeo
q-tab(slot="title", name="tab-youtube") YouTube
q-btn(slot="title", icon="close", q-btn(slot="title", icon="close",
small, flat, round, class="fixed", style="right: 2px; margin-top: 3px", small, flat, round, class="fixed", style="right: 2px; margin-top: 3px",
@click="event => {$store.commit('mosys/hideSources')}") @click="event => {$store.commit('mosys/hideSources')}")
...@@ -17,31 +14,19 @@ ...@@ -17,31 +14,19 @@
template(v-else) template(v-else)
grid-editor-default-source grid-editor-default-source
<!--q-tab-pane(name="tab-magic-box")-->
<!--grid-editor-magic-source-->
q-tab-pane(name="tab-piecemaker") q-tab-pane(name="tab-piecemaker")
grid-editor-source-piece-maker grid-editor-source-piece-maker
q-tab-pane(name="tab-documents", v-if="userHasDocuments") q-tab-pane(name="tab-documents", v-if="userHasDocuments")
grid-editor-source-documents grid-editor-source-documents
q-tab-pane(name="tab-vimeo")
grid-editor-source-vimeo
q-tab-pane(name="tab-youtube")
grid-editor-source-you-tube
</template> </template>
<script> <script>
import CellEditor from './CellEditor' import CellEditor from './CellEditor'
import GridEditorDefaultSource from './GridEditorDefaultSource' import GridEditorDefaultSource from './GridEditorDefaultSource'
import GridEditorMagicSource from './GridEditorMagicSource'
import GridEditorSourceDocuments from './GridEditorSourceDocuments' import GridEditorSourceDocuments from './GridEditorSourceDocuments'
import GridEditorSourcePieceMaker from './GridEditorSourcePieceMaker' import GridEditorSourcePieceMaker from './GridEditorSourcePieceMaker'
import GridEditorSourceVimeo from './GridEditorSourceVimeo'
import GridEditorSourceYouTube from './GridEditorSourceYouTube'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { userHasFeature } from 'mbjs-quasar/src/lib' import { userHasFeature } from 'mbjs-quasar/src/lib'
...@@ -50,11 +35,8 @@ ...@@ -50,11 +35,8 @@
components: { components: {
CellEditor, CellEditor,
GridEditorDefaultSource, GridEditorDefaultSource,
GridEditorMagicSource,
GridEditorSourceDocuments, GridEditorSourceDocuments,
GridEditorSourcePieceMaker, GridEditorSourcePieceMaker
GridEditorSourceVimeo,
GridEditorSourceYouTube
}, },
data () { data () {
return { return {
......
<template lang="pug">
div(:class="{'display-preview': preview, 'display-full': display}")
template(v-if="display")
strong 'Recording Cell'
template(v-else)
strong 'Recording Cell'
</template>
<script>
export default {
props: ['cell', 'display', 'preview'],
data () {