From fae853862ff36a78f5525a00563e551a68adc07e Mon Sep 17 00:00:00 2001
From: Dimitrie Stefanescu <didimitrie@gmail.com>
Date: Fri, 7 May 2021 21:55:00 +0100
Subject: [PATCH] feat(frontend): added basic previews to stream page

---
 packages/frontend/public/loadingImage.png     | Bin 0 -> 4259 bytes
 .../src/components/ListItemStream.vue         | 201 +++++++++---------
 packages/frontend/src/components/Renderer.vue |   4 +-
 packages/frontend/src/graphql/streams.gql     |   1 +
 packages/frontend/src/graphql/userById.gql    |   6 +-
 packages/frontend/src/router/index.js         |   4 +-
 packages/frontend/src/views/ProfileUser.vue   |   8 +-
 packages/frontend/src/views/Streams.vue       |  10 +-
 8 files changed, 119 insertions(+), 115 deletions(-)
 create mode 100644 packages/frontend/public/loadingImage.png

diff --git a/packages/frontend/public/loadingImage.png b/packages/frontend/public/loadingImage.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c65cf7b6b01bee57ca8af24ade1cd2df6fdd610
GIT binary patch
literal 4259
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

literal 0
HcmV?d00001

diff --git a/packages/frontend/src/components/ListItemStream.vue b/packages/frontend/src/components/ListItemStream.vue
index bccce5a14..b324d1d35 100644
--- a/packages/frontend/src/components/ListItemStream.vue
+++ b/packages/frontend/src/components/ListItemStream.vue
@@ -1,82 +1,78 @@
 <template>
-  <v-card class="pa-5 " style="transition: all 0.2s" >
-    <v-row>
-      <v-col cols="12" sm="8" class="align-self-center">
-        <p>Hello</p>
-      </v-col>
-      <v-col cols="12" sm="8" class="align-self-center">
-        <div class="subtitle-1 stream-link">
-          <router-link :to="'/streams/' + stream.id">
-            {{ stream.name }}
-          </router-link>
-        </div>
-        <div class="caption mb-2 mt-1 text-truncate">
+  <v-hover v-slot="{ hover }">
+    <v-card
+      :to="'/streams/' + stream.id"
+      color=""
+      :elevation="hover ? 5 : 1"
+      style="transition: all 0.2s ease-in-out"
+    >
+      <v-img
+        ref="cover"
+        :src="currentPreviewImg"
+        height="150px"
+        gradient="to bottom left, rgba(100,115,201,.10), rgba(25,32,72,0)"
+        class="align-end"
+      >
+      </v-img>
+        <v-card-title>{{ stream.name }}</v-card-title>
+
+      <v-card-text>
+        <span class="caption mb-2 font-italic">
+          Updated
+          <timeago :datetime="stream.updatedAt"></timeago>
+        </span>
+        <v-chip small outlined class="ml-3">
+          <v-icon small left>mdi-account-key-outline</v-icon>
+          {{ stream.role.split(':')[1] }}
+        </v-chip>
+        <v-btn
+          v-tooltip="
+            stream.branches.totalCount + ' branch' + (stream.branches.totalCount === 1 ? '' : 'es')
+          "
+          plain
+          color="primary"
+          text
+          class="px-0 ml-3"
+          small
+          :to="'/streams/' + stream.id + '/branches'"
+        >
+          <v-icon small class="mr-2 float-left">mdi-source-branch</v-icon>
+          {{ stream.branches.totalCount }}
+        </v-btn>
+
+        <v-btn
+          v-tooltip="
+            stream.commits.totalCount + ' commit' + (stream.commits.totalCount === 1 ? '' : 's')
+          "
+          plain
+          color="primary"
+          text
+          class="px-0"
+          small
+          :to="'/streams/' + stream.id + '/branches/main/commits'"
+        >
+          <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
+          {{ stream.commits.totalCount }}
+        </v-btn>
+<!--         <div class="mt-3 caption text-truncate">
           {{ stream.description }}
-        </div>
-
-        <div>
-          <span class="caption mb-2 font-italic">
-            Updated
-            <timeago :datetime="stream.updatedAt"></timeago>
-          </span>
-          <v-chip small outlined class="ml-3">
-            <v-icon small left>mdi-account-key-outline</v-icon>
-            {{ role }}
-          </v-chip>
-          <v-btn
-            v-tooltip="
-              stream.branches.totalCount +
-              ' branch' +
-              (stream.branches.totalCount === 1 ? '' : 'es')
-            "
-            plain
-            color="primary"
-            text
-            class="px-0 ml-3"
-            small
-            :to="'/streams/' + stream.id + '/branches'"
-          >
-            <v-icon small class="mr-2 float-left">mdi-source-branch</v-icon>
-            {{ stream.branches.totalCount }}
-          </v-btn>
-
-          <v-btn
-            v-tooltip="
-              stream.commits.totalCount + ' commit' + (stream.commits.totalCount === 1 ? '' : 's')
-            "
-            plain
-            color="primary"
-            text
-            class="px-0"
-            small
-            :to="'/streams/' + stream.id + '/branches/main/commits'"
-          >
-            <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
-            {{ stream.commits.totalCount }}
-          </v-btn>
-        </div>
-        <!-- <v-icon v-if="stream.isPublic" v-tooltip="`Link sharing on`" small>mdi-link</v-icon>
-        <v-icon v-else v-tooltip="`Link sharing off`" small>mdi-shield-lock</v-icon> -->
-      </v-col>
-      <v-col cols="12" sm="4" class="text-sm-center text-md-right align-self-center">
-        <div>
-          <user-avatar
-            v-for="user in collaboratorsSlice"
-            :id="user.id"
-            :key="user.id"
-            :avatar="user.avatar"
-            :size="30"
-            :name="user.name"
-          />
-          <div v-if="stream.collaborators.length > collaboratorsSlice.length" class="d-inline">
-            <v-avatar class="ma-1 grey--text text--darken-2" color="grey lighten-3" size="30">
-              <b>+{{ stream.collaborators.length - collaboratorsSlice.length }}</b>
-            </v-avatar>
-          </div>
-        </div>
-      </v-col>
-    </v-row>
-  </v-card>
+        </div> -->
+      </v-card-text>
+      <v-card-text class="pt-0">
+        <user-avatar
+          v-for="user in stream.collaborators.slice(0, 4)"
+          :id="user.id"
+          :key="user.id"
+          :avatar="user.avatar"
+          :size="30"
+          :name="user.name"
+        />
+        <v-avatar v-if="stream.collaborators.length > 4" size="30" color="primary">
+          <span class="white--text">+{{ stream.collaborators.length - 4 }}</span>
+        </v-avatar>
+      </v-card-text>
+    </v-card>
+  </v-hover>
 </template>
 <script>
 import UserAvatar from '../components/UserAvatar'
@@ -91,33 +87,32 @@ export default {
       }
     }
   },
-  computed: {
-    collaboratorsSlice() {
-      let limit = 18
-      switch (this.$vuetify.breakpoint.name) {
-        case 'xs':
-          limit = 10
-          break
-        case 'sm':
-          limit = 9
-          break
-        case 'md':
-          limit = 8
-          break
-        case 'lg':
-          limit = 12
-          break
-        case 'xl':
-          limit = 18
-          break
+  data() {
+    return {
+      previewImgUrls: [],
+      currentPreviewImg: '/loadingImage.png'
+    }
+  },
+  mounted() {
+    this.getPreviewImages().then().catch()
+  },
+  methods: {
+    async getPreviewImages() {
+      if (this.stream.commits.items.length === 0) return
+      // let angles = [-2, -1, 0, 1, 2]
+      let angles = [0]
+      for (let ang of angles) {
+        let previewUrl = `/preview/${this.stream.id}/objects/${this.stream.commits.items[0].referencedObject}/${ang}`
+        const res = await fetch(previewUrl, {
+          headers: localStorage.getItem('AuthToken')
+            ? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` }
+            : {}
+        })
+        const blob = await res.blob()
+        const imgUrl = URL.createObjectURL(blob)
+        this.previewImgUrls.push(imgUrl)
+        if (ang === 0) this.currentPreviewImg = imgUrl
       }
-
-      if (this.stream.collaborators.length > limit)
-        return this.stream.collaborators.slice(0, limit - 1)
-      return this.stream.collaborators
-    },
-    role() {
-      return this.stream.role.replace('stream:', '')
     }
   }
 }
diff --git a/packages/frontend/src/components/Renderer.vue b/packages/frontend/src/components/Renderer.vue
index 063bd4662..bda1ce97c 100644
--- a/packages/frontend/src/components/Renderer.vue
+++ b/packages/frontend/src/components/Renderer.vue
@@ -270,7 +270,9 @@ export default {
     async getPreviewImage(angle) {
       angle = angle || 0
       let previewUrl = this.objectUrl.replace('streams', 'preview') + '/' + angle
-      const res = await fetch(previewUrl)
+      const res = await fetch(previewUrl, {
+        headers: localStorage.getItem('AuthToken') ? { Authorization: `Bearer ${localStorage.getItem('AuthToken')}` } : {}
+      })
       const blob = await res.blob()
       const imgUrl = URL.createObjectURL(blob)
       if (this.$refs.cover) this.$refs.cover.style.backgroundImage = `url('${imgUrl}')`
diff --git a/packages/frontend/src/graphql/streams.gql b/packages/frontend/src/graphql/streams.gql
index 285a54b79..6f4d4051d 100644
--- a/packages/frontend/src/graphql/streams.gql
+++ b/packages/frontend/src/graphql/streams.gql
@@ -26,6 +26,7 @@ query Streams($cursor: String) {
           authorId
           authorName
           authorAvatar
+          referencedObject
         }
       }
       branches {
diff --git a/packages/frontend/src/graphql/userById.gql b/packages/frontend/src/graphql/userById.gql
index c5360088a..25469c766 100644
--- a/packages/frontend/src/graphql/userById.gql
+++ b/packages/frontend/src/graphql/userById.gql
@@ -20,8 +20,12 @@ query User($id: String!) {
           name
           avatar
         }
-        commits {
+        commits(limit: 1) {
           totalCount
+          items{
+            id
+            referencedObject
+          }
         }
         branches {
           totalCount
diff --git a/packages/frontend/src/router/index.js b/packages/frontend/src/router/index.js
index 095cf996e..5130b2eec 100644
--- a/packages/frontend/src/router/index.js
+++ b/packages/frontend/src/router/index.js
@@ -77,7 +77,7 @@ const routes = [
       // },
       {
         path: 'streams/:streamId',
-        name: 'streams',
+        // name: 'streams',
         meta: {
           title: 'Stream | Speckle'
         },
@@ -214,7 +214,7 @@ router.beforeEach((to, from, next) => {
 })
 
 //TODO: include stream name in page title eg `My Cool Stream | Speckle`
-router.afterEach((to, from) => {
+router.afterEach((to) => {
   if (localStorage.getItem('shouldRedirectTo') === to.path)
     localStorage.removeItem('shouldRedirectTo')
 
diff --git a/packages/frontend/src/views/ProfileUser.vue b/packages/frontend/src/views/ProfileUser.vue
index e19162f71..1d6be19e7 100644
--- a/packages/frontend/src/views/ProfileUser.vue
+++ b/packages/frontend/src/views/ProfileUser.vue
@@ -9,7 +9,7 @@
       <v-col cols="12" sm="12" md="4" lg="3" xl="2">
         <user-info-card :user="user"></user-info-card>
       </v-col>
-      <v-col cols="12" sm="12" md="8" lg="9" xl="8" class="pt-10">
+      <v-col cols="12" sm="12" md="8" lg="9" xl="10" class="pt-10">
         <v-card class="mb-3 elevation-0">
           <v-card-title>
             {{ user.name }} and you share {{ user.streams.totalCount }}
@@ -18,9 +18,11 @@
             {{ user.commits.totalCount === 1 ? 'commit' : 'commits' }}.
           </v-card-title>
         </v-card>
-        <div v-for="(stream, i) in user.streams.items" :key="i">
+        <v-row>
+        <v-col cols="12" sm="12" md="6" lg="6" xl="4"  v-for="(stream, i) in user.streams.items" :key="i">
           <list-item-stream :stream="stream"></list-item-stream>
-        </div>
+        </v-col >
+        </v-row>
       </v-col>
     </v-row>
   </v-container>
diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue
index f83f2f212..38fbf10c3 100644
--- a/packages/frontend/src/views/Streams.vue
+++ b/packages/frontend/src/views/Streams.vue
@@ -13,9 +13,9 @@
             <stream-new-dialog :open="newStreamDialog" />
           </v-dialog>
         </v-card>
-        <div v-if="$apollo.loading" class="mx-5 mt-5">
+        <div v-if="$apollo.loading" class="pa-3 mx-5 mt-5">
           <v-skeleton-loader
-            type="list-item-avatar, list-item-three-line, list-item-avatar,list-item-three-line"
+            type="list-item-three-line"
           ></v-skeleton-loader>
         </div>
         <v-card
@@ -84,7 +84,7 @@
             :message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
           />
         </div>
-        <v-card v-if="user && user.streams.totalCount > 0" class="mt-5 mx-4" flat>
+        <v-card v-if="user && user.streams.totalCount > 0" class="my-5" flat>
           <v-card-text class="body-1">
             <span>
               You have
@@ -98,8 +98,8 @@
           </v-card-text>
         </v-card>
         <v-card elevation="0" color="transparent">
-          <div v-if="$apollo.loading" class="mx-5">
-            <v-skeleton-loader type="card, article, article"></v-skeleton-loader>
+          <div v-if="$apollo.loading" class="my-5">
+            <v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
           </div>
         </v-card>
         <v-row v-if="streams && streams.items">