Initial commit

src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: "App",
+};
+</script>
+
+<style>
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  padding: 0;
+}
+</style>

src/components/Category.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="category">
+    <p>{{ category.categoryName }}</p>
+    <div class="category-items">
+      <Preview
+        v-for="video in $props.category.videos"
+        :id="video"
+        :key="video"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Preview from "@/components/Preview.vue";
+
+export default {
+  name: "Category",
+  components: {
+    Preview,
+  },
+  props: {
+    category: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+.category {
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  flex-wrap: nowrap;
+  background-color: #fafafc;
+  padding: 10px;
+  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+.category > p {
+  font-size: 20px;
+  margin: 0;
+  margin-bottom: 5px;
+}
+.category-items {
+  display: flex;
+  flex-direction: row;
+  overflow-x: scroll;
+}
+
+/* Custom scrollbar */
+.category-items::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.category-items::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 10px;
+}
+.category-items::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+}
+
+.category-items > :not(:first-child) {
+  margin-left: 15px;
+}
+</style>

src/components/Loader.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="loader">
+    <span class="loader"></span>
+  </div>
+</template>
+
+<style scoped>
+.loader {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+
+.loader:before,
+.loader:after {
+  content: "";
+  border-radius: 50%;
+  position: absolute;
+  inset: 0;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
+}
+.loader:after {
+  box-shadow: 0 2px 0 #ff3d00 inset;
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/Navbar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="navbar">
+    <router-link to="/">Home</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Navbar",
+};
+</script>
+
+<style scoped>
+.navbar {
+  height: 50px;
+  display: flex;
+  justify-content: left;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  background-color: #fafafc;
+  box-shadow: 0 1px 6px 0 #888;
+}
+</style>

src/components/Player.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="player"></div>
+</template>
+
+<script>
+import Clappr from "@clappr/player";
+import axios from "axios";
+
+export default {
+  name: "Player",
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      player: null,
+    };
+  },
+  methods: {
+    createPlayer() {
+      this.player = new Clappr.Player({
+        source: axios.defaults.baseURL + "/" + this.id + "/index.m3u8",
+        parentId: "#player",
+        autoPlay: true,
+        height: "100%",
+        width: "100%",
+        hideMediaControlDelay: 1000,
+      });
+    },
+  },
+  mounted() {
+    this.createPlayer();
+  },
+};
+</script>
+
+<style>
+#player > [data-player] {
+  padding-bottom: 56.25%;
+  height: auto !important;
+}
+#player > .fullscreen[data-player] {
+  padding-bottom: 0;
+  height: 100% !important;
+}
+</style>

src/components/Preview.vue

@@ -0,0 +1,84 @@
+<template>
+  <router-link :to="'/watch?v=' + this.id" class="preview">
+    <img
+      v-if="videoInfo.thumbnail"
+      :src="this.thumbnailUrl"
+      width="300"
+      height="169"
+    />
+    <img
+      v-if="!videoInfo.thumbnail"
+      src="@/assets/empty-thumbnail.jpg"
+      width="300"
+      height="169"
+    />
+    <p class="title">{{ videoInfo.title }}</p>
+    <div class="video-details">
+      <p class="video-uploader">Creator: {{ videoInfo.uploadedBy }}</p>
+      <p class="video-date">{{ videoDate }}</p>
+    </div>
+  </router-link>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "Preview",
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      videoInfo: {
+        thumbnail: false,
+      },
+      videoDate: null,
+      thumbnailUrl: axios.defaults.baseURL + "/" + this.id + "/thumbnail.jpg",
+    };
+  },
+  created() {
+    this.getVideoInfo();
+  },
+  methods: {
+    getVideoInfo() {
+      axios.get("/" + this.id + "/meta.json").then((response) => {
+        this.videoInfo = response.data;
+        this.videoDate = new Date(this.videoInfo.uploadedAt).toLocaleDateString(
+          undefined,
+          { year: "numeric", month: "long", day: "numeric" }
+        );
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.preview {
+  all: unset;
+  display: flex;
+  width: 300px;
+  height: 240px;
+  flex-direction: column;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+p {
+  margin: 0;
+  margin-top: 5px;
+  text-align: left;
+  font-size: 16px;
+}
+.video-details {
+  display: flex;
+  justify-content: space-between;
+}
+.video-details > p {
+  font-size: 12px;
+}
+</style>

src/main.js

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import axios from "axios";
+
+axios.defaults.baseURL = "https://cdn.bluemedia.dev/video";
+
+createApp(App).use(router).mount("#app");

src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+import Home from "../views/Home.vue";
+import Watch from "../views/Watch.vue";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: Home,
+  },
+  {
+    path: "/watch",
+    name: "watch",
+    component: Watch,
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

src/views/Home.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="home">
+    <Loader v-if="$data.loading" />
+    <div v-if="!$data.loading" class="categories">
+      <Category
+        v-for="category in $data.categories"
+        :category="category"
+        :key="category.categoryId"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Loader from "@/components/Loader.vue";
+import Category from "@/components/Category.vue";
+import axios from "axios";
+
+export default {
+  name: "Home",
+  components: {
+    Loader,
+    Category,
+  },
+  data() {
+    return {
+      categories: [],
+      loading: true,
+    };
+  },
+  created() {
+    this.getCategories();
+  },
+  methods: {
+    getCategories() {
+      axios
+        .get("/index.json")
+        .then((response) => {
+          this.categories = response.data;
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.home {
+  padding-left: 30px;
+  padding-right: 30px;
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+}
+.categories {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.categories > :not(:first-child) {
+  margin-top: 20px;
+}
+</style>

src/views/Watch.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="watch">
+    <Loader v-if="loading" />
+    <Player class="player" :id="this.$route.query.v" v-if="!loading" />
+    <div class="video-info">
+      <div class="video-info-title">
+        <h1>{{ video.title }}</h1>
+      </div>
+      <div class="video-info-description">
+        <p>{{ video.description }}</p>
+      </div>
+      <div class="video-info-additional">
+        <p>{{ "Creator: " + video.uploadedBy }}</p>
+        <p>{{ "Uploaded at: " + videoDateString }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Loader from "@/components/Loader.vue";
+import Player from "@/components/Player.vue";
+import axios from "axios";
+
+export default {
+  name: "Watch",
+  components: {
+    Loader,
+    Player,
+  },
+  data() {
+    return {
+      video: {
+        title: "",
+        description: "",
+      },
+      loading: true,
+    };
+  },
+  computed: {
+    videoDateString() {
+      return new Date(this.video.uploadedAt).toLocaleDateString(undefined, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    },
+  },
+  created() {
+    if (!this.$route.query.v || this.$route.query.v === "") {
+      this.$router.push("/");
+    }
+    axios
+      .get("/" + this.$route.query.v + "/meta.json")
+      .then((response) => {
+        this.video = response.data;
+        this.loading = false;
+      })
+      .catch(() => {
+        this.$router.push("/");
+        console.log("Video not found");
+      });
+  },
+};
+</script>
+
+<style scoped>
+.watch {
+  max-width: 1400px;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+}
+
+@media (min-width: 1024px) {
+  .watch {
+    width: 70%;
+    margin: 0 auto;
+    padding-top: 30px;
+  }
+}
+
+@media (max-width: 450px) {
+  .video-info {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+  .video-info-title {
+    font-size: 12px;
+  }
+  .video-info-additional,
+  .video-info-description {
+    font-size: 12px;
+  }
+}
+
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  transform: translate(-50%, -50%);
+}
+.player {
+  width: 100%;
+}
+.video-info-additional {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+</style>