displaying vimeos
This commit is contained in:
@@ -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
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user