feat(wip): back button API

NUXT/layouts/default.vue

@@ -93,20 +93,19 @@ export default {
   },
 
   mounted() {
+    this.$vuetube.resetBackActions();
     //---   Back Button Listener   ---//
     this.backHandler = CapacitorApp.addListener(
       "backButton",
-      ({ canGoBack }) => {
+      this.$vuetube.back
-        //---   Back Closes Search   ---//
+    );
-        if (this.search) {
-          this.search = false;
 
-          //---   Back Goes Back   ---//
+    this.$vuetube.addBackAction(
-        } else if (!canGoBack) {
+      () => {
-          CapacitorApp.exitApp();
+        this.search = false;
-        } else {
+      },
-          window.history.back();
+      () => {
-        }
+        return this.search;
       }
     );
 

NUXT/pages/watch.vue

@@ -209,7 +209,7 @@ import VidLoadRenderer from "~/components/vidLoadRenderer.vue";
 import { getCpn } from "~/plugins/utils";
 import SlimVideoDescriptionRenderer from "~/components/UtilRenderers/slimVideoDescriptionRenderer.vue";
 import ItemSectionRenderer from "~/components/SectionRenderers/itemSectionRenderer.vue";
-import legacyPlayer from "~/components/Player/legacy.vue"
+import legacyPlayer from "~/components/Player/legacy.vue";
 import vuetubePlayer from "~/components/Player/index.vue";
 import ShelfRenderer from "~/components/SectionRenderers/shelfRenderer.vue";
 import mainCommentRenderer from "~/components/Comments/mainCommentRenderer.vue";
@@ -260,22 +260,10 @@ export default {
   mounted() {
     this.mountedInit();
 
+    this.$vuetube.resetBackActions();
     this.backHandler = CapacitorApp.addListener(
       "backButton",
-      ({ canGoBack }) => {
+      this.$vuetube.back
-        //---   Back Closes Search   ---//
-        if (this.showComments) {
-          this.showComments = false;
-
-          //---   Back Goes Back   ---//
-        } else if (!canGoBack) {
-          this.$router.replace(
-            `/${localStorage.getItem("startPage") || "home"}`
-          );
-        } else {
-          window.history.back();
-        }
-      }
     );
   },
 

NUXT/plugins/classes/backHander.js

@@ -0,0 +1,26 @@
+import { App as CapacitorApp } from "@capacitor/app";
+export default class backHandler {
+    constructor() {
+        this.backStack = []
+    }
+
+    back({ canGoBack }) {
+        if (this.backStack.length > 0) {
+            let lastResult = false
+            while (!lastResult && this.backStack.length > 0) {
+                const backAction = this.backStack.pop()
+                lastResult = backAction()
+            }
+            if (lastResult) return
+        }
+        if (!canGoBack) {
+            CapacitorApp.exitApp();
+        } else {
+            window.history.back();
+        }
+    }
+
+    addAction(callback) {
+        this.backStack.push(callback)
+    }
+}

NUXT/plugins/vuetube.js

@@ -6,6 +6,7 @@ import constants from "./constants";
 import { hexToRgb, rgbToHex, parseEmoji } from "./utils";
 import { Haptics, ImpactStyle } from "@capacitor/haptics";
 import Vue from "vue";
+import backHandler from "./classes/backHander";
 
 Vue.directive("emoji", {
   inserted: function (el) {
@@ -14,6 +15,8 @@ Vue.directive("emoji", {
   },
 });
 
+let backActions = new backHandler();
+
 const module = {
   //---   Get GitHub Commits   ---//
   commits: new Promise((resolve, reject) => {
@@ -109,6 +112,25 @@ const module = {
   rgbToHex(r, g, b) {
     return rgbToHex(r, g, b);
   },
+
+  resetBackActions() {
+    backActions = new backHandler();
+  },
+
+  addBackAction(callback, condition = true) {
+    backActions.addAction(() => {
+      if (condition) {
+        callback();
+        return true
+      } else {
+        return false
+      }
+    });
+  },
+
+  back(listenerFunc) {
+    backActions.back(listenerFunc);
+  }
 };
 
 //---   Start   ---//