displaying vimeos

assets/css/app.scss

@@ -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

@@ -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

@@ -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

@@ -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:
-    // }
+    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}`
+    }
 
-    // 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
+    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:
+      // }
 
-    // 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
+      // 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 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
-    // }
+      // 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
 
-    // // 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
-    }
+      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
+      // }
 
-    // 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
+      // // 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
+      // 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

@@ -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

@@ -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]