add livestream to workview

Author: Xanonymous-GitHub

src/components/WorkView.vue

@@ -1,10 +1,16 @@
 <template>
   <div class="work-view my-3 my-sm-3 mx-sm-auto rounded-3 mx-3 shadow position-relative">
-    <router-link rel="noreferrer noopener" target='_blank' to="/form">
-      <button class="btn text-white position-absolute new-work-btn shadow fw-bolder fs-6 mx-2 my-2" type="button">+
-      </button>
-    </router-link>
-    <h1 class="py-3 py-sm-3 my-0">
+    <div class="position-absolute new-work-btn-area">
+      <router-link rel="noreferrer noopener" target='_blank' to="/form">
+        <button class="btn text-white position-relative shadow fw-bolder fs-6 mx-2 my-2" type="button">+
+        </button>
+      </router-link>
+      <p class="user-select-none live">
+        <span class="circle"/>
+        Live
+      </p>
+    </div>
+    <h1 class="py-4 py-sm-4 my-0">
       <svg class="d-svg" viewBox="0 0 1 1">
         <use xlink:href="#todo.svg"/>
       </svg>
@@ -14,7 +20,8 @@
     <div class="container py-3 px-3 mw-100">
       <CircleProgress v-if="processing" :msg="progressMsg"/>
       <div :class="{'wall__show':processing}" class="wall position-absolute"/>
-      <div :class="{'invisible':processing}" class="row mw-100 position-relative mx-auto justify-content-center">
+      <div :key="workViewKey" :class="{'invisible':processing}"
+           class="row mw-100 position-relative mx-auto justify-content-center">
         <WorkCard v-for="(work, k) in works" :key="k"
                   :subtitle="work.subtitle"
                   :thumbnail="work.thumbnail"
@@ -37,7 +44,7 @@
 import {defineComponent, inject, onMounted, reactive, toRefs, defineAsyncComponent, nextTick} from 'vue';
 import '@/scss/components/work-view.scss'
 import {dbType, Work} from "@/firebase/type";
-import {getCurrentWorks} from "@/firebase/getWork";
+import {getCurrentWorks, liveSubscribe} from "@/firebase/getWork";
 import '@/svg/todo.svg'
 import '@/svg/add.svg'
 
@@ -52,7 +59,8 @@ export default defineComponent({
     const data = reactive({
       processing: false,
       works: undefined as unknown as Array<Work>,
-      progressMsg: ''
+      progressMsg: '',
+      workViewKey: 0
     })
 
     const remove = async (uid: string) => {
@@ -72,22 +80,22 @@ export default defineComponent({
 
     const checkIfNeedToShowEmptyCard = () => {
       const emptyCard = document.getElementById('empty-card') as HTMLDivElement
-      if (data.works.length) {
-        emptyCard.classList.add('d-none')
-      } else {
-        emptyCard.classList.remove('d-none')
-      }
+      emptyCard.classList.toggle('d-none', !!data.works.length)
     }
 
     const displayWorks = async () => {
-      data.processing = true
       data.works = await getCurrentWorks(store)
-      checkIfNeedToShowEmptyCard()
-      data.processing = false
+      data.workViewKey++
+      await nextTick(() => {
+        checkIfNeedToShowEmptyCard()
+      })
     }
 
     onMounted(async () => {
+      data.processing = true
       await displayWorks()
+      liveSubscribe(store, displayWorks)
+      data.processing = false
     })
 
     return {

src/firebase/getWork.ts

@@ -6,3 +6,10 @@ export const getCurrentWorks = async (store: dbType): Promise<Array<Work>> => {
       Object.assign({id: work.id}, work.data())
     ) as unknown as Array<Work>
 }
+
+// eslint-disable-next-line
+export const liveSubscribe = (store: dbType, callback: (() => any)): void => {
+  store.collection('/works').onSnapshot(() => {
+    callback()
+  })
+}

src/firebase/type.ts

@@ -3,6 +3,7 @@ import firebase from "firebase";
 export type firebaseType = firebase.app.App
 export type dbType = firebase.firestore.Firestore
 export type time = firebase.firestore.Timestamp
+export type querySnapshot = firebase.firestore.QuerySnapshot<firebase.firestore.DocumentData>
 
 export interface WorkDocument {
   title: string;

src/scss/components/work-view.scss

@@ -6,14 +6,49 @@
   min-height: 60vh;
   width: 75vw;
 
-  .new-work-btn {
+  .new-work-btn-area {
     right: 0;
     background-color: #2c3e50;
     border-color: white;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
 
-    :hover {
+    .live {
+      .circle {
+        display: inline-block;
+        background: #f00;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        animation-name: live;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+
+        @keyframes live {
+          0% {
+            box-shadow: 0 0 0 .1px rgba(255, 0, 0, .9);
+          }
+          100% {
+            box-shadow: 0 0 0 7px rgba(255, 0, 0, 0);
+          }
+        }
+      }
+    }
+
+    a {
+      max-width: 100%;
+      display: inline-block;
+
+      &:hover button {
+        background-color: white;
+        color: black !important;
+      }
+    }
+
+    button:hover {
       background-color: white;
-      color: black;
+      color: black !important;
     }
   }