#129 Migrate Stores to TypeScript

client/components/list/VideoEntry.vue

@@ -70,7 +70,6 @@
 <script>
 import 'tippy.js/dist/tippy.css';
 import InfoIcon from 'vue-material-design-icons/Information';
-import SavedPosition from '@/store/videoProgress';
 import Commons from '@/plugins/commons.js';
 
 export default {
@@ -87,11 +86,15 @@ export default {
   }),
   computed: {
     videoProgressPercentage() {
-      return (SavedPosition.getSavedPosition(this.video.videoId) / this.video.lengthSeconds) * 100;
+      return (
+        (this.$accessor.videoProgress.getSavedPositionForId(this.video.videoId) /
+          this.video.lengthSeconds) *
+        100
+      );
     },
     videoProgressTooltip() {
       const watchTime = this.$formatting.getTimestampFromSeconds(
-        SavedPosition.getSavedPosition(this.video.videoId)
+        this.$accessor.videoProgress.getSavedPositionForId(this.video.videoId)
       );
       const totalTime = this.$formatting.getTimestampFromSeconds(this.video.lengthSeconds);
       return `${watchTime} of ${totalTime}`;

client/components/videoplayer/VideoPlayer.vue

@@ -232,7 +232,6 @@ import FullscreenExitIcon from 'vue-material-design-icons/FullscreenExit';
 import OpenInPlayerIcon from 'vue-material-design-icons/OpenInNew';
 import CloseIcon from 'vue-material-design-icons/Close';
 import Spinner from '@/components/Spinner';
-import SavedPosition from '@/store/videoProgress';
 // import VideoEndscreen from '@/components/videoplayer/VideoEndscreen'
 import VolumeControl from '@/components/videoplayer/VolumeControl';
 // import QualitySelection from '@/components/videoplayer/QualitySelection'
@@ -412,7 +411,9 @@ export default {
     },
     onVideoCanplay() {
       if (this.$refs.video && this.videoElement.firstTimeBuffering) {
-        this.$refs.video.currentTime = SavedPosition.getSavedPosition(this.video.videoId);
+        this.$refs.video.currentTime = this.$accessor.videoProgress.getSavedPositionForId(
+          this.video.videoId
+        );
         this.videoElement.firstTimeBuffering = false;
         if (this.autoplay) {
           this.$refs.video.play();
@@ -613,7 +614,11 @@ export default {
     saveVideoPosition() {
       const video = this.$refs.video;
       if (video !== undefined) {
-        SavedPosition.setSavedPosition(video.currentTime, this.video.videoId);
+        this.$accessor.videoProgress.addVideoProgress({
+          videoId: this.video.videoId,
+          value: video.currentTime
+        });
+        // return this.$localforage.setItem(`savedVideoPositionId${videoId}`, value)
       }
     },
     showPlayerOverlay(noTimeout) {

client/index.d.ts

@@ -0,0 +1,13 @@
+import { accessorType } from '~/store';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $accessor: typeof accessorType;
+  }
+}
+
+declare module '@nuxt/types' {
+  interface NuxtAppOptions {
+    $accessor: typeof accessorType;
+  }
+}

client/plugins/formatting.ts

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $formatting(message: string): void;
+  }
+}
+
+Vue.prototype.$formatting = {
+  getTimestampFromSeconds: seconds => {
+    const hours = Math.floor(seconds / 3600);
+    seconds -= hours * 3600;
+    const minutes = Math.floor(seconds / 60);
+    const timestampMinutes = toDoubleDigit(minutes);
+    seconds -= minutes * 60;
+    const timestampSeconds = toDoubleDigit(Math.floor(seconds));
+    if (hours >= 1) {
+      const timestampHours = toDoubleDigit(Math.floor(hours));
+      return `${timestampHours}:${timestampMinutes}:${timestampSeconds}`;
+    } else {
+      return `${timestampMinutes}:${timestampSeconds}`;
+    }
+
+    function toDoubleDigit(i) {
+      if (i >= 0 && i < 10) {
+        i = '0' + i;
+      }
+      return i;
+    }
+  }
+};

client/store/captcha.ts

@@ -0,0 +1,35 @@
+import { getterTree, mutationTree, actionTree } from 'nuxt-typed-vuex';
+
+export const state = () => ({
+  token: '' as string,
+  solution: '' as string,
+  image: '' as string
+});
+
+export const getters = getterTree(state, {
+  image: state => state.image
+});
+
+export const mutations = mutationTree(state, {
+  setToken(state, token) {
+    state.token = token;
+  },
+  setImage(state, image) {
+    state.image = image;
+  }
+});
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    getCaptcha({ commit }) {
+      this.$axios
+        .get(this.app.$accessor.environment.env + 'auth/captcha')
+        .then(response => {
+          commit('setToken', response.data.token);
+          commit('setImage', response.data.captchaImage);
+        })
+        .catch(err => console.error(err));
+    }
+  }
+);

client/store/environment.ts

@@ -0,0 +1,34 @@
+import { getterTree, mutationTree } from 'nuxt-typed-vuex';
+
+export const state = () => ({
+  env: {} as {
+    apiUrl: string;
+    vapidKey: string;
+    nodeEnv: string;
+    host: string;
+    port: string | number;
+    baseUrl: string;
+  }
+});
+
+export const getters = getterTree(state, {
+  apiUrl(state) {
+    return state.env.apiUrl;
+  }
+});
+
+export const mutations = mutationTree(state, {
+  setEnv(
+    state,
+    env: {
+      apiUrl: string;
+      vapidKey: string;
+      nodeEnv: string;
+      host: string;
+      port: string | number;
+      baseUrl: string;
+    }
+  ) {
+    state.env = env;
+  }
+});

client/store/index.ts

@@ -0,0 +1,52 @@
+import { getAccessorType, actionTree } from 'nuxt-typed-vuex';
+import * as captcha from '~/store/captcha';
+import * as environment from '~/store/environment';
+import * as instances from '~/store/instances';
+import * as messages from '~/store/messages';
+import * as miniplayer from '~/store/miniplayer';
+import * as settings from '~/store/settings';
+import * as user from '~/store/user';
+import * as videoPlayer from '~/store/videoPlayer';
+import * as videoProgress from '~/store/videoProgress';
+
+export const state = () => ({});
+
+export type RootState = ReturnType<typeof state>;
+
+export const actions = actionTree(
+  { state },
+  {
+    nuxtServerInit({ dispatch, getters }) {
+      if (process.server) {
+        this.app.$accessor.environment.setEnv({
+          apiUrl: process.env.VIEWTUBE_API_URL,
+          vapidKey: process.env.VIEWTUBE_PUBLIC_VAPID,
+          nodeEnv: process.env.NODE_ENV,
+          host: process.env.HOST || 'localhost',
+          port: process.env.PORT || 8066,
+          baseUrl: process.env.BASE_URL || 'http://localhost:8066'
+        });
+        dispatch('user/getUser');
+        if (getters['instances/instances'].length === 0) {
+          dispatch('instances/fetchInstances');
+        }
+      }
+    }
+  }
+);
+
+export const accessorType = getAccessorType({
+  actions,
+  state,
+  modules: {
+    captcha,
+    environment,
+    instances,
+    messages,
+    miniplayer,
+    settings,
+    user,
+    videoPlayer,
+    videoProgress
+  }
+});