Allow empty index.json

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@clappr/player": "^0.4.6",
     "axios": "^0.24.0",
+    "bootstrap-icons-vue": "^1.8.1",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"

src/components/Empty.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="empty">
+    <BIconEyeSlashFill class="icon" />
+    <h1>No public videos available.</h1>
+  </div>
+</template>
+
+<script>
+import { BIconEyeSlashFill } from "bootstrap-icons-vue";
+
+export default {
+  name: "Empty",
+  components: {
+    BIconEyeSlashFill,
+  },
+};
+</script>
+
+<style scoped>
+.empty {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.icon {
+  font-size: 5rem;
+  margin-bottom: 20px;
+}
+</style>

src/views/Home.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="home">
     <Loader v-if="$data.loading" />
-    <div v-if="!$data.loading" class="categories">
+    <div v-if="!$data.loading && !$data.empty" class="categories">
       <Category
         v-for="category in $data.categories"
         :category="category"
         :key="category.categoryId"
       />
     </div>
+    <Empty v-if="$data.empty" />
   </div>
 </template>
 
 <script>
 import Loader from "@/components/Loader.vue";
 import Category from "@/components/Category.vue";
+import Empty from "@/components/Empty.vue";
 import axios from "axios";
 
 export default {
@@ -21,11 +23,13 @@ export default {
   components: {
     Loader,
     Category,
+    Empty,
   },
   data() {
     return {
       categories: [],
       loading: true,
+      empty: false,
     };
   },
   created() {
@@ -36,11 +40,20 @@ export default {
       axios
         .get("/index.json", { baseURL: "" })
         .then((response) => {
+          if (response.data.length > 0) {
             this.categories = response.data;
+          } else {
+            this.empty = true;
+          }
           this.loading = false;
         })
         .catch((error) => {
+          if (error.response.status === 404) {
+            this.empty = true;
+            this.loading = false;
+          } else {
             console.log(error);
+          }
         });
     },
   },

yarn.lock

@@ -2131,6 +2131,11 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
+bootstrap-icons-vue@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons-vue/-/bootstrap-icons-vue-1.8.1.tgz#ce4a0c1f6efe41dabcc1341f2cb191d307fbaf50"
+  integrity sha512-uItRULwQz0epETi9x/RBEqfjHmTAmkIIczpH1R6L9T6yyaaijk0826PzTWnWNm15tw66JT/8GNuXjB0HI5PHLw==
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"