displaying vimeos

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]