bachir/muntadas-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

displaying vimeos

Browse Source
This commit is contained in:
bachir
2020-10-13 10:53:45 +02:00
parent 424e60111b
commit 1406230445
6 changed files with 210 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+1 -1
View File
@@ -51,7 +51,7 @@ section[role="main-content"]{
>.wrapper{
position: relative;
margin:5% 10%;
margin:5% 20%;
padding:1em;
overflow-y: hidden;
background-color: #fff;
src/api/vimeo-axios.js
+32
View File
@@ -0,0 +1,32 @@
import axios from 'axios'
// TODO: make this one as settings (or find an other solution)
// https://dev.to/sanfra1407/how-to-use-env-file-in-javascript-applications-with-webpack-18df
// switch (app_env) {
// case 'dev':
// let path = `http://${window.location.hostname}:8984`
// break;
// case 'prod':
// let path = `http://${window.location.hostname}/api`
// break;
// }
// let path = 'http://dev.api.gdp.fr'
// let path = 'http://localhost:8984'
// const
// let path = 'http://' + window.location.hostname + (window.env === 'prod' ? '/api' : ':8984')
// contact@anarchive.net
// anarchive_9
// b2dbd10a42860e5540fa9f211f39e160
export const VIMEO = axios.create({
// withCredentials: true,
baseURL: 'https://vimeo.com/api/oembed.json',
crossorigin: true,
headers: {
'Accept': 'application/json'
// 'Authorization': `bearer b2dbd10a42860e5540fa9f211f39e160`,
// 'Access-Control-Allow-Origin': '*'
// 'Access-Control-Allow-Credentials':
}
})
src/components/Content.vue
+1
View File
@@ -16,6 +16,7 @@
<div v-if="data.Text" class="text">
{{ data.Text }}
</div>
<div v-if="data.Vimeo" class="vimeo" v-html="data.Vimeo.html"/>
<ul v-if="data.Media && data.Media.length">
<li v-for="(item, index) in data.Media" :key="index">
<img :src="'https://api.anarchive-muntadas.figli.io'+item.url" alt="">
src/components/objects/ContentBlock.vue
+110 -102
View File
@@ -44,6 +44,9 @@
import { mapInstanceState, mapInstanceMutations } from '@urbn/vuex-helpers'
// import { mapState, mapGetters } from 'vuex'
// import { VIMEO } from 'api/vimeo-axios'
// import qs from 'querystring'
import * as THREE from 'three'
import mixins from 'components/mixins'
@@ -86,6 +89,7 @@ export default {
// label_position: { x: 5, y: 5, z: 6 },
// label_canvas: null,
// label_size: null,
preview_img_url: null,
img_canvas: null,
img_size: { x: 0, y: 0 },
img_position: { x: 0, y: 0, z: 0 },
@@ -138,113 +142,118 @@ export default {
}
},
created () {
this.size.x = this.projWall.winW * this.contents_size_factor
this.size.y = this.projWall.winY * this.contents_size_factor
// console.log('ContentBlock created', this.data)
// let txtcolor = '#000000'
// switch (this.type) {
// case 'visible':
// txtcolor = '#0000ff'
// break
// case 'context':
// txtcolor = '#ff0000'
// break
// case 'process':
// txtcolor = '#00ff00'
// break
// default:
// }
// this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
//
// this.size.x = this.label_size.x + 0.2
// this.size.y = this.label_size.y + 0.2
// let y = 0
// let top = this.projPos.y + this.projSize.y / 2
// let floor = this.projPos.y - this.projSize.y / 2
// switch (this.type) {
// case 'visible':
// y = top * Math.random()
// break
// case 'context':
// y = floor / 3 * Math.random()
// break
// case 'process':
// y = floor / 3 + floor / 3 * Math.random()
// break
// case 'concept':
// y = (floor / 3) * 2 + floor / 3 * Math.random()
// break
// }
// this.position.y = y
let face = Math.random()
// // USES 4 FACES
// if (face < 0.25) {
// // gauche
// this.face = 'left'
// this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
// this.rotation.y = 90
// } else if (face >= 0.25 && face < 0.5) {
// // fond
// this.face = 'back'
// this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
// this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
// } else if (face >= 0.5 && face < 0.75) {
// // droite
// this.face = 'right'
// this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
// this.rotation.y = -90
// } else {
// // face
// this.face = 'front'
// this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
// this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
// this.rotation.y = 180
// }
// // USES 2 FACES
if (face < 0.5) {
// gauche
this.face = 'left'
this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
this.rotation.y = 90
} else {
// droite
this.face = 'right'
this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
this.rotation.y = -90
if (this.data.Vimeo) {
this.preview_img_url = this.data.Vimeo.thumbnail_url_with_play_button
} else if (this.data.Media && this.data.Media.length) {
this.preview_img_url = `https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`
}
// With GRID
// this.face = 'left'
// this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
// this.rotation.y = 90
if (typeof this.gridContentPlaced[this.type] === 'undefined' ||
typeof this.gridContentPlaced[this.type][this.id] === 'undefined') {
// First shift grid place (will transfer it from free places to occupied places)
this.shiftGrid({ type: this.type, id: this.id })
}
// Then get the right place for the current content
let pos = this.gridContentPlaced[this.type][this.id]
console.log('pos', pos)
this.position.z = this.projPos.z - this.projSize.z / 2 + pos.z
this.position.y = this.projPos.y - this.projSize.y / 2 + pos.y
if (this.preview_img_url) {
this.size.x = this.projWall.winW * this.contents_size_factor
this.size.y = this.projWall.winY * this.contents_size_factor
// console.log('ContentBlock created', this.data)
// let txtcolor = '#000000'
// switch (this.type) {
// case 'visible':
// txtcolor = '#0000ff'
// break
// case 'context':
// txtcolor = '#ff0000'
// break
// case 'process':
// txtcolor = '#00ff00'
// break
// default:
// }
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
// this.label_position.z = this.position.z + this.size.z / 2 + 0.01
// this.label_canvas = this.createLabelCanvas(this.data.Name.replace(/ /g, '\n').toUpperCase(), 60, 150, txtcolor)
//
// this.size.x = this.label_size.x + 0.2
// this.size.y = this.label_size.y + 0.2
// let y = 0
// let top = this.projPos.y + this.projSize.y / 2
// let floor = this.projPos.y - this.projSize.y / 2
// switch (this.type) {
// case 'visible':
// y = top * Math.random()
// break
// case 'context':
// y = floor / 3 * Math.random()
// break
// case 'process':
// y = floor / 3 + floor / 3 * Math.random()
// break
// case 'concept':
// y = (floor / 3) * 2 + floor / 3 * Math.random()
// break
// }
// this.position.y = y
let face = Math.random()
// // USES 4 FACES
// if (face < 0.25) {
// // gauche
// this.face = 'left'
// this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
// this.rotation.y = 90
// } else if (face >= 0.25 && face < 0.5) {
// // fond
// this.face = 'back'
// this.position.z = this.projPos.z - this.projSize.z / 2 + 0.1
// this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
// } else if (face >= 0.5 && face < 0.75) {
// // droite
// this.face = 'right'
// this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
// this.rotation.y = -90
// } else {
// // face
// this.face = 'front'
// this.position.z = this.projPos.z + this.projSize.z / 2 - 0.1
// this.position.x = this.projPos.x - this.projSize.x / 2 + this.size.x / 2 + Math.random() * (this.projSize.x - this.size.x / 2)
// this.rotation.y = 180
// }
// // USES 2 FACES
if (face < 0.5) {
// gauche
this.face = 'left'
this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
this.rotation.y = 90
} else {
// droite
this.face = 'right'
this.position.x = this.projPos.x + this.projSize.x / 2 - 0.1
// this.position.z = this.projPos.z - this.projSize.z / 2 + this.size.x / 2 + Math.random() * (this.projSize.z - this.size.x / 2)
this.rotation.y = -90
}
// With GRID
// this.face = 'left'
// this.position.x = this.projPos.x - this.projSize.x / 2 + 0.1
// this.rotation.y = 90
if (typeof this.gridContentPlaced[this.type] === 'undefined' ||
typeof this.gridContentPlaced[this.type][this.id] === 'undefined') {
// First shift grid place (will transfer it from free places to occupied places)
this.shiftGrid({ type: this.type, id: this.id })
}
// Then get the right place for the current content
let pos = this.gridContentPlaced[this.type][this.id]
console.log('pos', pos)
this.position.z = this.projPos.z - this.projSize.z / 2 + pos.z
this.position.y = this.projPos.y - this.projSize.y / 2 + pos.y
// this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 0.1
// this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 0.1
// this.label_position.z = this.position.z + this.size.z / 2 + 0.01
// console.log()
if (this.data.Media && this.data.Media.length) {
// console.log(this.data.Media[0].url)
// create image object with a promise (async img loading)
this.createImgCanvas(`https://api.anarchive-muntadas.figli.io${this.data.Media[0].url}`)
this.createImgCanvas(this.preview_img_url)
.then(({ img, canvas }) => {
// console.log('THEN img loaded ok', this, img, canvas)
let f = this.size.x / canvas.width
@@ -282,7 +291,6 @@ export default {
console.warn('CATCH img load ERROR')
})
}
// this.img_position = { ...this.position }
// this.img_position.y -= this.size.y
},
src/components/objects/Project.vue
+2 -2
View File
@@ -179,7 +179,7 @@ export default {
},
methods: {
...mapInstanceActions(getModuleName, {
loadContents: 'loadContents'
getContents: 'getContents'
}),
...mapInstanceMutations(getModuleName, {
setActiveLevel: 'setActiveLevel'
@@ -187,7 +187,7 @@ export default {
open () {
if (!this.isOpened) {
this.isOpened = true
this.loadContents()
this.getContents()
}
},
onClickLevel (level, e) {
src/store/modules/project.js
+64 -10
View File
@@ -5,6 +5,8 @@
// import { REST } from 'api/rest-axios'
import { GRAPHQL } from 'api/graphql-axios'
import Query from 'graphql-query-builder'
import { VIMEO } from 'api/vimeo-axios'
import qs from 'querystring'
import * as THREE from 'three'
import { ThreeBSP } from 'three-js-csg-es6'
@@ -41,7 +43,7 @@ export default {
paddingZ: 0
},
contents: {},
contents_size_factor: 2, // factor to get the contents (grid) size proportional to windows
contents_size_factor: 1, // factor to get the contents (grid) size proportional to windows
contentTypes: ['visible', 'context', 'process', 'concept'],
grid: { visible: [], context: [], process: [], concept: [] },
gridContentPlaced: {},
@@ -351,6 +353,24 @@ export default {
// repMesh.position = { ...state.position, ...{ y: 0 } }
// commit('setRep3dObj', levelsMesh)
},
getContents ({ dispatch, commit, state }) {
return new Promise((resolve, reject) => {
// get the list of corpuses (aka authors)
dispatch('loadContents')
.then(({ data: { data: { project } = null } }) => {
console.log('graphql contents', project)
dispatch('computeContents', project)
.then((contents) => {
console.log('computed contents', contents)
commit('setContents', project)
})
})
.catch((error) => {
console.warn('Issue with getContents', error)
Promise.reject(error)
})
})
},
loadContents ({ dispatch, commit, state }) {
console.log('loadContents')
let contentsQuery = new Query('project', { id: state.id })
@@ -360,7 +380,7 @@ export default {
contentsQuery.find([visiblesQuery])
console.log('contentsQuery', `${contentsQuery}`)
GRAPHQL.post('', { query: `query {
return GRAPHQL.post('', { query: `query {
project(id: "${state.id}") {
visibles(where: { Published: "true" }){
id
@@ -408,15 +428,49 @@ export default {
}
}
}` })
.then(({ data: { data: { project } = null } }) => {
console.log('graphql contents', project)
commit('setContents', project)
// dispatch('computeProjects', projects)
})
.catch((error) => {
console.warn('Issue with getProjects', error)
Promise.reject(error)
},
computeContents ({ dispatch, commit, state }, contents) {
console.log('computeContents')
return Promise.all(Object.keys(contents).map(function (key) {
return Promise.all(contents[key].map(function (content) {
if (content.Vimeo) {
console.log('Vimeo', content.Vimeo)
// GET https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/286898202&width=480&height=360
let params = {
url: content.Vimeo,
width: 1280,
height: 720,
responsive: true
}
let q = qs.stringify(params)
return VIMEO.get('?' + q, {})
.then(({ data }) => {
console.log('Vimeo data', data)
content.Vimeo = data// thumbnail_url_with_play_button
return content
})
.catch((error) => {
console.warn('Issue with vimeo', error)
})
} else {
return content
}
})).then((cts) => {
// return an object with the right key (visible, etc, ...)
console.log(`${key} cts`, cts)
let o = {}
o[key] = cts
return o
})
})).then((a) => {
// return an object with the right keys (visible, etc, ...)
console.log('a', a)
let o = {}
for (var i = 0; i < a.length; i++) {
o = { ...o, ...a[i] }
}
return o
})
}
// getGridPos ({ state, commit }) {
// let p = state.grid[0]