From fa5bbbd267230e85d92e1b69d8254ef01fd05839 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Fri, 27 Mar 2026 00:41:48 +0530
Subject: [PATCH] Migrate code to composition api.

---
 src/App.vue                             |  213 ++-
 src/components/AddToGroupModal.vue      |   88 +-
 src/components/ChannelItem.vue          |   61 +-
 src/components/ChannelPage.vue          |  321 ++---
 src/components/ClipsPage.vue            |   29 +-
 src/components/CollapsableText.vue      |   44 +-
 src/components/CommentItem.vue          |   77 +-
 src/components/ConfirmModal.vue         |   50 +-
 src/components/CreateGroupModal.vue     |   37 +-
 src/components/CreatePlaylistModal.vue  |   71 +-
 src/components/CustomInstanceModal.vue  |   85 +-
 src/components/ErrorHandler.vue         |   25 +-
 src/components/ExportHistoryModal.vue   |  197 ++-
 src/components/FeedPage.vue             |  204 +--
 src/components/FooterComponent.vue      |   37 +-
 src/components/HistoryPage.vue          |  188 ++-
 src/components/ImportHistoryModal.vue   |  126 +-
 src/components/ImportPage.vue           |  221 +--
 src/components/LoadingIndicatorPage.vue |   14 +-
 src/components/LoginPage.vue            |   74 +-
 src/components/ModalComponent.vue       |   46 +-
 src/components/NavBar.vue               |  210 +--
 src/components/PlaylistAddModal.vue     |  131 +-
 src/components/PlaylistPage.vue         |  296 ++--
 src/components/PlaylistVideos.vue       |   86 +-
 src/components/PlaylistsPage.vue        |  316 ++---
 src/components/PreferencesPage.vue      |  618 ++++-----
 src/components/QrCode.vue               |   44 +-
 src/components/RegisterPage.vue         |  100 +-
 src/components/SearchResults.vue        |  222 +--
 src/components/SearchSuggestions.vue    |  126 +-
 src/components/ShareModal.vue           |  209 ++-
 src/components/SubscriptionsPage.vue    |  278 ++--
 src/components/ToastComponent.vue       |   15 +-
 src/components/TrendingPage.vue         |   82 +-
 src/components/VideoItem.vue            |  183 ++-
 src/components/VideoPlayer.vue          | 1629 ++++++++++++-----------
 src/components/VideoRedirect.vue        |   26 +-
 src/components/VideoThumbnail.vue       |   34 +-
 src/components/WatchOnButton.vue        |   26 +-
 src/components/WatchVideo.vue           |  825 ++++++------
 src/composables/useApi.js               |   36 +
 src/composables/useChannelGroups.js     |   36 +
 src/composables/useCustomInstances.js   |   14 +
 src/composables/useFormatting.js        |   68 +
 src/composables/useMisc.js              |   39 +
 src/composables/usePlaylists.js         |  252 ++++
 src/composables/usePreferences.js       |   65 +
 src/composables/useSubscriptions.js     |  137 ++
 src/main.js                             |  613 ---------
 50 files changed, 4506 insertions(+), 4418 deletions(-)
 create mode 100644 src/composables/useApi.js
 create mode 100644 src/composables/useChannelGroups.js
 create mode 100644 src/composables/useCustomInstances.js
 create mode 100644 src/composables/useFormatting.js
 create mode 100644 src/composables/useMisc.js
 create mode 100644 src/composables/usePlaylists.js
 create mode 100644 src/composables/usePreferences.js
 create mode 100644 src/composables/useSubscriptions.js

diff --git a/src/App.vue b/src/App.vue
index e3319c1d..a8b75a75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,127 +13,120 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import NavBar from "./components/NavBar.vue";
 import FooterComponent from "./components/FooterComponent.vue";
+import { getPreferenceString } from "@/composables/usePreferences.js";
+import { getDefaultLanguage, TimeAgo, TimeAgoConfig } from "@/composables/useFormatting.js";
+import { fetchSubscriptions } from "@/composables/useSubscriptions.js";
+import { getChannelGroups, createOrUpdateChannelGroup } from "@/composables/useChannelGroups.js";
 
 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
-export default {
-    components: {
-        NavBar,
-        FooterComponent,
-    },
-    data() {
-        return {
-            theme: "dark",
-        };
-    },
-    mounted() {
-        this.setTheme();
-        darkModePreference.addEventListener("change", () => {
-            this.setTheme();
-        });
+const theme = ref("dark");
 
-        if ("indexedDB" in window) {
-            const request = indexedDB.open("piped-db", 6);
-            request.onupgradeneeded = ev => {
-                const db = request.result;
-                console.log("Upgrading object store.");
-                if (!db.objectStoreNames.contains("watch_history")) {
-                    const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
-                    store.createIndex("video_id_idx", "videoId", { unique: true });
-                    store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
-                }
-                if (ev.oldVersion < 2) {
-                    const store = request.transaction.objectStore("watch_history");
-                    store.createIndex("watchedAt", "watchedAt", { unique: false });
-                }
-                if (!db.objectStoreNames.contains("playlist_bookmarks")) {
-                    const store = db.createObjectStore("playlist_bookmarks", { keyPath: "playlistId" });
-                    store.createIndex("playlist_id_idx", "playlistId", { unique: true });
-                    store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
-                }
-                if (!db.objectStoreNames.contains("channel_groups")) {
-                    const store = db.createObjectStore("channel_groups", { keyPath: "groupName" });
-                    store.createIndex("groupName", "groupName", { unique: true });
-                }
-                if (!db.objectStoreNames.contains("playlists")) {
-                    const playlistStore = db.createObjectStore("playlists", { keyPath: "playlistId" });
-                    playlistStore.createIndex("playlistId", "playlistId", { unique: true });
-                    const playlistVideosStore = db.createObjectStore("playlist_videos", { keyPath: "videoId" });
-                    playlistVideosStore.createIndex("videoId", "videoId", { unique: true });
-                }
-                // migration to fix an invalid previous length of channel ids: 11 -> 24
-                (async () => {
-                    if (ev.oldVersion < 6) {
-                        const subscriptions = await this.fetchSubscriptions();
-                        const channelGroups = await this.getChannelGroups();
-                        for (let group of channelGroups) {
-                            for (let i = 0; i < group.channels.length; i++) {
-                                const tooShortChannelId = group.channels[i];
-                                const foundChannel = subscriptions.find(
-                                    channel => channel.url.substr(-11) == tooShortChannelId,
-                                );
-                                if (foundChannel) group.channels[i] = foundChannel.url.substr(-24);
-                            }
-                            this.createOrUpdateChannelGroup(group);
+function setTheme() {
+    let themePref = getPreferenceString("theme", "dark");
+    const themes = {
+        dark: "dark",
+        light: "light",
+        auto: darkModePreference.matches ? "dark" : "light",
+    };
+
+    theme.value = themes[themePref];
+
+    changeTitleBarColor();
+
+    const root = document.querySelector(":root");
+    theme.value === "dark" ? root.classList.add("dark") : root.classList.remove("dark");
+}
+
+function changeTitleBarColor() {
+    const currentColor = { dark: "#0F0F0F", light: "#FFF" };
+    const themeColor = document.querySelector("meta[name='theme-color']");
+    themeColor.setAttribute("content", currentColor[theme.value]);
+}
+
+onMounted(() => {
+    setTheme();
+    darkModePreference.addEventListener("change", () => {
+        setTheme();
+    });
+
+    if ("indexedDB" in window) {
+        const request = indexedDB.open("piped-db", 6);
+        request.onupgradeneeded = ev => {
+            const db = request.result;
+            console.log("Upgrading object store.");
+            if (!db.objectStoreNames.contains("watch_history")) {
+                const store = db.createObjectStore("watch_history", { keyPath: "videoId" });
+                store.createIndex("video_id_idx", "videoId", { unique: true });
+                store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
+            }
+            if (ev.oldVersion < 2) {
+                const store = request.transaction.objectStore("watch_history");
+                store.createIndex("watchedAt", "watchedAt", { unique: false });
+            }
+            if (!db.objectStoreNames.contains("playlist_bookmarks")) {
+                const store = db.createObjectStore("playlist_bookmarks", { keyPath: "playlistId" });
+                store.createIndex("playlist_id_idx", "playlistId", { unique: true });
+                store.createIndex("id_idx", "id", { unique: true, autoIncrement: true });
+            }
+            if (!db.objectStoreNames.contains("channel_groups")) {
+                const store = db.createObjectStore("channel_groups", { keyPath: "groupName" });
+                store.createIndex("groupName", "groupName", { unique: true });
+            }
+            if (!db.objectStoreNames.contains("playlists")) {
+                const playlistStore = db.createObjectStore("playlists", { keyPath: "playlistId" });
+                playlistStore.createIndex("playlistId", "playlistId", { unique: true });
+                const playlistVideosStore = db.createObjectStore("playlist_videos", { keyPath: "videoId" });
+                playlistVideosStore.createIndex("videoId", "videoId", { unique: true });
+            }
+            // migration to fix an invalid previous length of channel ids: 11 -> 24
+            (async () => {
+                if (ev.oldVersion < 6) {
+                    const subscriptions = await fetchSubscriptions();
+                    const channelGroups = await getChannelGroups();
+                    for (let group of channelGroups) {
+                        for (let i = 0; i < group.channels.length; i++) {
+                            const tooShortChannelId = group.channels[i];
+                            const foundChannel = subscriptions.find(
+                                channel => channel.url.substr(-11) == tooShortChannelId,
+                            );
+                            if (foundChannel) group.channels[i] = foundChannel.url.substr(-24);
                         }
+                        createOrUpdateChannelGroup(group);
                     }
-                })();
-            };
-            request.onsuccess = e => {
-                window.db = e.target.result;
-            };
-        } else console.log("This browser doesn't support IndexedDB");
-
-        const App = this;
-
-        (async function () {
-            const defaultLang = await App.defaultLanguage;
-            const locale = App.getPreferenceString("hl", defaultLang);
-            if (locale !== App.TimeAgoConfig.locale) {
-                const localeTime = await import(`../node_modules/javascript-time-ago/locale/${locale}.json`)
-                    .catch(() => null)
-                    .then(module => module?.default);
-                if (localeTime) {
-                    App.TimeAgo.addLocale(localeTime);
-                    App.TimeAgoConfig.locale = locale;
                 }
+            })();
+        };
+        request.onsuccess = e => {
+            window.db = e.target.result;
+        };
+    } else console.log("This browser doesn't support IndexedDB");
+
+    (async function () {
+        const defaultLang = await getDefaultLanguage();
+        const locale = getPreferenceString("hl", defaultLang);
+        if (locale !== TimeAgoConfig.locale) {
+            const localeTime = await import(`../node_modules/javascript-time-ago/locale/${locale}.json`)
+                .catch(() => null)
+                .then(module => module?.default);
+            if (localeTime) {
+                TimeAgo.addLocale(localeTime);
+                TimeAgoConfig.locale = locale;
             }
-            if (window.i18n.global.locale.value !== locale) {
-                if (!window.i18n.global.availableLocales.includes(locale)) {
-                    const messages = await import(`./locales/${locale}.json`).then(module => module.default);
-                    window.i18n.global.setLocaleMessage(locale, messages);
-                }
-                window.i18n.global.locale.value = locale;
+        }
+        if (window.i18n.global.locale.value !== locale) {
+            if (!window.i18n.global.availableLocales.includes(locale)) {
+                const messages = await import(`./locales/${locale}.json`).then(module => module.default);
+                window.i18n.global.setLocaleMessage(locale, messages);
             }
-        })();
-    },
-    methods: {
-        setTheme() {
-            let themePref = this.getPreferenceString("theme", "dark"); // dark, light or auto
-            const themes = {
-                dark: "dark",
-                light: "light",
-                auto: darkModePreference.matches ? "dark" : "light",
-            };
-
-            this.theme = themes[themePref];
-
-            this.changeTitleBarColor();
-
-            // Used for the scrollbar
-            const root = document.querySelector(":root");
-            this.theme === "dark" ? root.classList.add("dark") : root.classList.remove("dark");
-        },
-        changeTitleBarColor() {
-            const currentColor = { dark: "#0F0F0F", light: "#FFF" };
-            const themeColor = document.querySelector("meta[name='theme-color']");
-            themeColor.setAttribute("content", currentColor[this.theme]);
-        },
-    },
-};
+            window.i18n.global.locale.value = locale;
+        }
+    })();
+});
 </script>
 
 <style>
diff --git a/src/components/AddToGroupModal.vue b/src/components/AddToGroupModal.vue
index 0e55fcea..ccef74c2 100644
--- a/src/components/AddToGroupModal.vue
+++ b/src/components/AddToGroupModal.vue
@@ -25,56 +25,52 @@
         @close="showCreateGroupModal = false"
     />
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import ModalComponent from "./ModalComponent.vue";
 import CreateGroupModal from "./CreateGroupModal.vue";
+import { getChannelGroups, createOrUpdateChannelGroup } from "@/composables/useChannelGroups.js";
 
-export default {
-    components: {
-        ModalComponent,
-        CreateGroupModal,
+const props = defineProps({
+    channelId: {
+        type: String,
+        required: true,
     },
-    props: {
-        channelId: {
-            type: String,
-            required: true,
-        },
-    },
-    emits: ["close"],
-    data() {
-        return {
-            showCreateGroupModal: false,
-            channelGroups: [],
-        };
-    },
-    mounted() {
-        this.loadChannelGroups();
-    },
-    methods: {
-        async loadChannelGroups() {
-            const groups = await this.getChannelGroups();
-            this.channelGroups.push(...groups);
-        },
-        onCheckedChange(index, group) {
-            if (group.channels.includes(this.channelId)) {
-                group.channels.splice(index, 1);
-            } else {
-                group.channels.push(this.channelId);
-            }
-            this.createOrUpdateChannelGroup(group);
-        },
-        onCreateGroup(newGroupName) {
-            if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
+});
 
-            const newGroup = {
-                groupName: newGroupName,
-                channels: [],
-            };
-            this.channelGroups.push(newGroup);
-            this.createOrUpdateChannelGroup(newGroup);
+defineEmits(["close"]);
 
-            this.showCreateGroupModal = false;
-        },
-    },
-};
+const showCreateGroupModal = ref(false);
+const channelGroups = ref([]);
+
+async function loadChannelGroups() {
+    const groups = await getChannelGroups();
+    channelGroups.value.push(...groups);
+}
+
+onMounted(() => {
+    loadChannelGroups();
+});
+
+function onCheckedChange(index, group) {
+    if (group.channels.includes(props.channelId)) {
+        group.channels.splice(index, 1);
+    } else {
+        group.channels.push(props.channelId);
+    }
+    createOrUpdateChannelGroup(group);
+}
+
+function onCreateGroup(newGroupName) {
+    if (!newGroupName || channelGroups.value.some(group => group.groupName == newGroupName)) return;
+
+    const newGroup = {
+        groupName: newGroupName,
+        channels: [],
+    };
+    channelGroups.value.push(newGroup);
+    createOrUpdateChannelGroup(newGroup);
+
+    showCreateGroupModal.value = false;
+}
 </script>
diff --git a/src/components/ChannelItem.vue b/src/components/ChannelItem.vue
index d48e5f4f..e0d1f705 100644
--- a/src/components/ChannelItem.vue
+++ b/src/components/ChannelItem.vue
@@ -36,37 +36,34 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        item: {
-            type: Object,
-            required: true,
-        },
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { fetchSubscriptionStatus, toggleSubscriptionState } from "@/composables/useSubscriptions.js";
+import { numberFormat } from "@/composables/useFormatting.js";
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true,
     },
-    data() {
-        return {
-            subscribed: null,
-        };
-    },
-    computed: {
-        channelId(_this) {
-            return _this.item.url.substr(-24);
-        },
-    },
-    mounted() {
-        this.updateSubscribedStatus();
-    },
-    methods: {
-        async updateSubscribedStatus() {
-            this.subscribed = await this.fetchSubscriptionStatus(this.channelId);
-            console.log(this.subscribed);
-        },
-        subscribeHandler() {
-            this.toggleSubscriptionState(this.channelId, this.subscribed).then(success => {
-                if (success) this.subscribed = !this.subscribed;
-            });
-        },
-    },
-};
+});
+
+const subscribed = ref(null);
+
+const channelId = computed(() => props.item.url.substr(-24));
+
+async function updateSubscribedStatus() {
+    subscribed.value = await fetchSubscriptionStatus(channelId.value);
+    console.log(subscribed.value);
+}
+
+function subscribeHandler() {
+    toggleSubscriptionState(channelId.value, subscribed.value).then(success => {
+        if (success) subscribed.value = !subscribed.value;
+    });
+}
+
+onMounted(() => {
+    updateSubscribedStatus();
+});
 </script>
diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index d42965ac..931a18e1 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -86,175 +86,186 @@
     </LoadingIndicatorPage>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onActivated, onDeactivated, onUnmounted } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import ErrorHandler from "./ErrorHandler.vue";
 import ContentItem from "./ContentItem.vue";
 import WatchOnButton from "./WatchOnButton.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import CollapsableText from "./CollapsableText.vue";
 import AddToGroupModal from "./AddToGroupModal.vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { numberFormat } from "@/composables/useFormatting.js";
+import {
+    fetchSubscriptionStatus,
+    toggleSubscriptionState,
+    fetchDeArrowContent,
+} from "@/composables/useSubscriptions.js";
+import { updateWatched } from "@/composables/useMisc.js";
 
-export default {
-    components: {
-        ErrorHandler,
-        ContentItem,
-        WatchOnButton,
-        LoadingIndicatorPage,
-        CollapsableText,
-        AddToGroupModal,
-    },
-    data() {
-        return {
-            channel: null,
-            subscribed: false,
-            tabs: [],
-            selectedTab: 0,
-            contentItems: [],
-            showGroupModal: false,
-        };
-    },
-    mounted() {
-        this.getChannelData();
-    },
-    activated() {
-        if (this.channel && !this.channel.error) document.title = this.channel.name + " - Piped";
-        window.addEventListener("scroll", this.handleScroll);
-        if (this.channel && !this.channel.error) this.updateWatched(this.channel.relatedStreams);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        async fetchSubscribedStatus() {
-            if (!this.channel.id) return;
+const route = useRoute();
+const { t } = useI18n();
 
-            this.subscribed = await this.fetchSubscriptionStatus(this.channel.id);
-        },
-        async fetchChannel() {
-            const url = this.$route.path.includes("@")
-                ? this.apiUrl() + "/@/" + this.$route.params.channelId
-                : this.apiUrl() + "/" + this.$route.params.path + "/" + this.$route.params.channelId;
-            return await this.fetchJson(url);
-        },
-        async getChannelData() {
-            this.fetchChannel()
-                .then(data => (this.channel = data))
-                .then(() => {
-                    if (!this.channel.error) {
-                        document.title = this.channel.name + " - Piped";
-                        this.contentItems = this.channel.relatedStreams;
-                        this.fetchSubscribedStatus();
-                        this.updateWatched(this.channel.relatedStreams);
-                        this.fetchDeArrowContent(this.channel.relatedStreams);
-                        this.tabs.push({
-                            translatedName: this.$t("video.videos"),
-                        });
-                        const tabQuery = this.$route.query.tab;
-                        for (let i = 0; i < this.channel.tabs.length; i++) {
-                            let tab = this.channel.tabs[i];
-                            tab.translatedName = this.getTranslatedTabName(tab.name);
-                            this.tabs.push(tab);
-                            if (tab.name === tabQuery) this.loadTab(i + 1);
-                        }
-                    }
+const channel = ref(null);
+const subscribed = ref(false);
+const tabs = ref([]);
+const selectedTab = ref(0);
+const contentItems = ref([]);
+const showGroupModal = ref(false);
+let loading = false;
+
+async function fetchSubscribedStatus() {
+    if (!channel.value.id) return;
+    subscribed.value = await fetchSubscriptionStatus(channel.value.id);
+}
+
+async function fetchChannel() {
+    const url = route.path.includes("@")
+        ? apiUrl() + "/@/" + route.params.channelId
+        : apiUrl() + "/" + route.params.path + "/" + route.params.channelId;
+    return await fetchJson(url);
+}
+
+async function getChannelData() {
+    fetchChannel()
+        .then(data => (channel.value = data))
+        .then(() => {
+            if (!channel.value.error) {
+                document.title = channel.value.name + " - Piped";
+                contentItems.value = channel.value.relatedStreams;
+                fetchSubscribedStatus();
+                updateWatched(channel.value.relatedStreams);
+                fetchDeArrowContent(channel.value.relatedStreams);
+                tabs.value.push({
+                    translatedName: t("video.videos"),
                 });
-        },
-        handleScroll() {
-            if (
-                this.loading ||
-                !this.channel ||
-                !this.channel.nextpage ||
-                (this.selectedTab != 0 && !this.tabs[this.selectedTab].tabNextPage)
-            )
-                return;
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-                this.loading = true;
-                if (this.selectedTab == 0) {
-                    this.fetchChannelNextPage();
-                } else {
-                    this.fetchChannelTabNextPage();
+                const tabQuery = route.query.tab;
+                for (let i = 0; i < channel.value.tabs.length; i++) {
+                    let tab = channel.value.tabs[i];
+                    tab.translatedName = getTranslatedTabName(tab.name);
+                    tabs.value.push(tab);
+                    if (tab.name === tabQuery) loadTab(i + 1);
                 }
             }
-        },
-        fetchChannelNextPage() {
-            this.fetchJson(this.apiUrl() + "/nextpage/channel/" + this.channel.id, {
-                nextpage: this.channel.nextpage,
-            }).then(json => {
-                this.channel.nextpage = json.nextpage;
-                this.loading = false;
-                this.updateWatched(json.relatedStreams);
-                this.contentItems.push(...json.relatedStreams);
-                this.fetchDeArrowContent(json.relatedStreams);
-            });
-        },
-        fetchChannelTabNextPage() {
-            this.fetchJson(this.apiUrl() + "/channels/tabs", {
-                data: this.tabs[this.selectedTab].data,
-                nextpage: this.tabs[this.selectedTab].tabNextPage,
-            }).then(json => {
-                this.tabs[this.selectedTab].tabNextPage = json.nextpage;
-                this.loading = false;
-                this.contentItems.push(...json.content);
-                this.fetchDeArrowContent(json.content);
-                this.tabs[this.selectedTab].content = this.contentItems;
-            });
-        },
-        subscribeHandler() {
-            this.toggleSubscriptionState(this.channel.id, this.subscribed).then(success => {
-                if (success) this.subscribed = !this.subscribed;
-            });
-        },
-        getTranslatedTabName(tabName) {
-            let translatedTabName = tabName;
-            switch (tabName) {
-                case "livestreams":
-                    translatedTabName = this.$t("titles.livestreams");
-                    break;
-                case "playlists":
-                    translatedTabName = this.$t("titles.playlists");
-                    break;
-                case "albums":
-                    translatedTabName = this.$t("titles.albums");
-                    break;
-                case "shorts":
-                    translatedTabName = this.$t("video.shorts");
-                    break;
-                default:
-                    console.error(`Tab name "${tabName}" is not translated yet!`);
-                    break;
-            }
-            return translatedTabName;
-        },
-        loadTab(index) {
-            this.selectedTab = index;
+        });
+}
 
-            // update the tab query in the url path
-            const url = new URL(window.location);
-            url.searchParams.set("tab", this.tabs[index].name ?? "videos");
-            window.history.replaceState(window.history.state, "", url);
+function handleScroll() {
+    if (
+        loading ||
+        !channel.value ||
+        !channel.value.nextpage ||
+        (selectedTab.value != 0 && !tabs.value[selectedTab.value].tabNextPage)
+    )
+        return;
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        loading = true;
+        if (selectedTab.value == 0) {
+            fetchChannelNextPage();
+        } else {
+            fetchChannelTabNextPage();
+        }
+    }
+}
 
-            if (index == 0) {
-                this.contentItems = this.channel.relatedStreams;
-                return;
-            }
+function fetchChannelNextPage() {
+    fetchJson(apiUrl() + "/nextpage/channel/" + channel.value.id, {
+        nextpage: channel.value.nextpage,
+    }).then(json => {
+        channel.value.nextpage = json.nextpage;
+        loading = false;
+        updateWatched(json.relatedStreams);
+        contentItems.value.push(...json.relatedStreams);
+        fetchDeArrowContent(json.relatedStreams);
+    });
+}
 
-            if (this.tabs[index].content) {
-                this.contentItems = this.tabs[index].content;
-                return;
-            }
-            this.fetchJson(this.apiUrl() + "/channels/tabs", {
-                data: this.tabs[index].data,
-            }).then(tab => {
-                this.contentItems = this.tabs[index].content = tab.content;
-                this.fetchDeArrowContent(tab.content);
-                this.tabs[this.selectedTab].tabNextPage = tab.nextpage;
-            });
-        },
-    },
-};
+function fetchChannelTabNextPage() {
+    fetchJson(apiUrl() + "/channels/tabs", {
+        data: tabs.value[selectedTab.value].data,
+        nextpage: tabs.value[selectedTab.value].tabNextPage,
+    }).then(json => {
+        tabs.value[selectedTab.value].tabNextPage = json.nextpage;
+        loading = false;
+        contentItems.value.push(...json.content);
+        fetchDeArrowContent(json.content);
+        tabs.value[selectedTab.value].content = contentItems.value;
+    });
+}
+
+function subscribeHandler() {
+    toggleSubscriptionState(channel.value.id, subscribed.value).then(success => {
+        if (success) subscribed.value = !subscribed.value;
+    });
+}
+
+function getTranslatedTabName(tabName) {
+    let translatedTabName = tabName;
+    switch (tabName) {
+        case "livestreams":
+            translatedTabName = t("titles.livestreams");
+            break;
+        case "playlists":
+            translatedTabName = t("titles.playlists");
+            break;
+        case "albums":
+            translatedTabName = t("titles.albums");
+            break;
+        case "shorts":
+            translatedTabName = t("video.shorts");
+            break;
+        default:
+            console.error(`Tab name "${tabName}" is not translated yet!`);
+            break;
+    }
+    return translatedTabName;
+}
+
+function loadTab(index) {
+    selectedTab.value = index;
+
+    // update the tab query in the url path
+    const url = new URL(window.location);
+    url.searchParams.set("tab", tabs.value[index].name ?? "videos");
+    window.history.replaceState(window.history.state, "", url);
+
+    if (index == 0) {
+        contentItems.value = channel.value.relatedStreams;
+        return;
+    }
+
+    if (tabs.value[index].content) {
+        contentItems.value = tabs.value[index].content;
+        return;
+    }
+    fetchJson(apiUrl() + "/channels/tabs", {
+        data: tabs.value[index].data,
+    }).then(tab => {
+        contentItems.value = tabs.value[index].content = tab.content;
+        fetchDeArrowContent(tab.content);
+        tabs.value[selectedTab.value].tabNextPage = tab.nextpage;
+    });
+}
+
+onMounted(() => {
+    getChannelData();
+});
+
+onActivated(() => {
+    if (channel.value && !channel.value.error) document.title = channel.value.name + " - Piped";
+    window.addEventListener("scroll", handleScroll);
+    if (channel.value && !channel.value.error) updateWatched(channel.value.relatedStreams);
+});
+
+onDeactivated(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
 </script>
 
 <style>
diff --git a/src/components/ClipsPage.vue b/src/components/ClipsPage.vue
index c491f4bb..e0feec5a 100644
--- a/src/components/ClipsPage.vue
+++ b/src/components/ClipsPage.vue
@@ -2,15 +2,22 @@
     <ErrorHandler v-if="response && response.error" :message="response.message" :error="response.error" />
 </template>
 
-<script>
-export default {
-    activated() {
-        this.fetchJson(this.apiUrl() + "/clips/" + this.$route.params.clipId).then(response => {
-            this.response = response;
-            if (this.response.videoId) {
-                this.$router.push(`/watch?v=${this.response.videoId}`);
-            }
-        });
-    },
-};
+<script setup>
+import { ref, onActivated } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { fetchJson } from "@/composables/useApi.js";
+import { apiUrl } from "@/composables/useApi.js";
+
+const router = useRouter();
+const route = useRoute();
+const response = ref(null);
+
+onActivated(() => {
+    fetchJson(apiUrl() + "/clips/" + route.params.clipId).then(res => {
+        response.value = res;
+        if (response.value.videoId) {
+            router.push(`/watch?v=${response.value.videoId}`);
+        }
+    });
+});
 </script>
diff --git a/src/components/CollapsableText.vue b/src/components/CollapsableText.vue
index dc65b932..66d73220 100644
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -15,34 +15,30 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { purifyHTML, rewriteDescription } from "@/utils/HtmlUtils";
 
-export default {
-    props: {
-        text: {
-            type: String,
-            default: null,
-        },
-        visibleLimit: {
-            type: Number,
-            default: 100,
-        },
+const props = defineProps({
+    text: {
+        type: String,
+        default: null,
     },
-    data() {
-        return {
-            showFullText: false,
-        };
+    visibleLimit: {
+        type: Number,
+        default: 100,
     },
-    methods: {
-        fullText() {
-            return purifyHTML(rewriteDescription(this.text));
-        },
-        collapsedText() {
-            return purifyHTML(rewriteDescription(this.text.slice(0, this.visibleLimit)));
-        },
-    },
-};
+});
+
+const showFullText = ref(false);
+
+function fullText() {
+    return purifyHTML(rewriteDescription(props.text));
+}
+
+function collapsedText() {
+    return purifyHTML(rewriteDescription(props.text.slice(0, props.visibleLimit)));
+}
 </script>
 
 <style>
diff --git a/src/components/CommentItem.vue b/src/components/CommentItem.vue
index e635b964..c977ab70 100644
--- a/src/components/CommentItem.vue
+++ b/src/components/CommentItem.vue
@@ -67,48 +67,45 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import CollapsableText from "./CollapsableText.vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { numberFormat } from "@/composables/useFormatting.js";
 
-export default {
-    components: { CollapsableText },
-    props: {
-        comment: {
-            type: Object,
-            default: () => {
-                return {};
-            },
-        },
-        uploader: { type: String, default: null },
-        uploaderAvatarUrl: { type: String, default: null },
-        videoId: { type: String, default: null },
-    },
-    data() {
-        return {
-            loadingReplies: false,
-            showingReplies: false,
-            replies: [],
-            nextpage: null,
-        };
-    },
-    methods: {
-        async loadReplies() {
-            if (!this.showingReplies && this.loadingReplies) {
-                this.showingReplies = true;
-                return;
-            }
-            this.loadingReplies = true;
-            this.showingReplies = true;
-            this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.videoId, {
-                nextpage: this.nextpage || this.comment.repliesPage,
-            }).then(json => {
-                this.replies = this.replies.concat(json.comments);
-                this.nextpage = json.nextpage;
-            });
-        },
-        async hideReplies() {
-            this.showingReplies = false;
+const props = defineProps({
+    comment: {
+        type: Object,
+        default: () => {
+            return {};
         },
     },
-};
+    uploader: { type: String, default: null },
+    uploaderAvatarUrl: { type: String, default: null },
+    videoId: { type: String, default: null },
+});
+
+const loadingReplies = ref(false);
+const showingReplies = ref(false);
+const replies = ref([]);
+const nextpage = ref(null);
+
+async function loadReplies() {
+    if (!showingReplies.value && loadingReplies.value) {
+        showingReplies.value = true;
+        return;
+    }
+    loadingReplies.value = true;
+    showingReplies.value = true;
+    fetchJson(apiUrl() + "/nextpage/comments/" + props.videoId, {
+        nextpage: nextpage.value || props.comment.repliesPage,
+    }).then(json => {
+        replies.value = replies.value.concat(json.comments);
+        nextpage.value = json.nextpage;
+    });
+}
+
+async function hideReplies() {
+    showingReplies.value = false;
+}
 </script>
diff --git a/src/components/ConfirmModal.vue b/src/components/ConfirmModal.vue
index e98e8a57..55ad12c1 100644
--- a/src/components/ConfirmModal.vue
+++ b/src/components/ConfirmModal.vue
@@ -10,33 +10,31 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
+import { onMounted, onUnmounted } from "vue";
 import ModalComponent from "./ModalComponent.vue";
 
-export default {
-    components: {
-        ModalComponent,
+defineProps({
+    message: {
+        type: String,
+        required: true,
     },
-    props: {
-        message: {
-            type: String,
-            required: true,
-        },
-    },
-    emits: ["close", "confirm"],
-    mounted() {
-        window.addEventListener("keydown", this.handleKeyDown);
-    },
-    unmounted() {
-        window.removeEventListener("keydown", this.handleKeyDown);
-    },
-    methods: {
-        handleKeyDown(event) {
-            if (event.code === "Enter") {
-                this.$emit("confirm");
-                event.preventDefault();
-            }
-        },
-    },
-};
+});
+
+const emit = defineEmits(["close", "confirm"]);
+
+function handleKeyDown(event) {
+    if (event.code === "Enter") {
+        emit("confirm");
+        event.preventDefault();
+    }
+}
+
+onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
diff --git a/src/components/CreateGroupModal.vue b/src/components/CreateGroupModal.vue
index a53a73e5..e6c560b3 100644
--- a/src/components/CreateGroupModal.vue
+++ b/src/components/CreateGroupModal.vue
@@ -8,28 +8,23 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
 import ModalComponent from "./ModalComponent.vue";
+import { ref } from "vue";
 
-export default {
-    components: { ModalComponent },
-    props: {
-        onCreateGroup: {
-            required: true,
-            type: Function,
-        },
+const props = defineProps({
+    onCreateGroup: {
+        required: true,
+        type: Function,
     },
-    emits: ["close"],
-    data() {
-        return {
-            groupName: "",
-        };
-    },
-    methods: {
-        createGroup() {
-            this.onCreateGroup(this.groupName);
-            this.$emit("close");
-        },
-    },
-};
+});
+
+const emit = defineEmits(["close"]);
+
+const groupName = ref("");
+
+function createGroup() {
+    props.onCreateGroup(groupName.value);
+    emit("close");
+}
 </script>
diff --git a/src/components/CreatePlaylistModal.vue b/src/components/CreatePlaylistModal.vue
index 872176f0..42febe3b 100644
--- a/src/components/CreatePlaylistModal.vue
+++ b/src/components/CreatePlaylistModal.vue
@@ -11,44 +11,41 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
 import ModalComponent from "./ModalComponent.vue";
+import { createPlaylist } from "@/composables/usePlaylists.js";
 
-export default {
-    components: {
-        ModalComponent,
-    },
-    emits: ["created", "close"],
-    data() {
-        return {
-            playlistName: "",
-        };
-    },
-    mounted() {
-        this.$refs.input.focus();
-        window.addEventListener("keydown", this.handleKeyDown);
-    },
-    unmounted() {
-        window.removeEventListener("keydown", this.handleKeyDown);
-    },
-    methods: {
-        handleKeyDown(event) {
-            if (event.code === "Enter") {
-                this.onCreatePlaylist();
-                event.preventDefault();
-            }
-        },
-        onCreatePlaylist() {
-            if (!this.playlistName) return;
+const emit = defineEmits(["created", "close"]);
 
-            this.createPlaylist(this.playlistName).then(response => {
-                if (response.error) alert(response.error);
-                else {
-                    this.$emit("created", response.playlistId, this.playlistName);
-                    this.$emit("close");
-                }
-            });
-        },
-    },
-};
+const playlistName = ref("");
+const input = ref(null);
+
+function handleKeyDown(event) {
+    if (event.code === "Enter") {
+        onCreatePlaylist();
+        event.preventDefault();
+    }
+}
+
+function onCreatePlaylist() {
+    if (!playlistName.value) return;
+
+    createPlaylist(playlistName.value).then(response => {
+        if (response.error) alert(response.error);
+        else {
+            emit("created", response.playlistId, playlistName.value);
+            emit("close");
+        }
+    });
+}
+
+onMounted(() => {
+    input.value.focus();
+    window.addEventListener("keydown", handleKeyDown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
diff --git a/src/components/CustomInstanceModal.vue b/src/components/CustomInstanceModal.vue
index 8b5d9840..c14d3973 100644
--- a/src/components/CustomInstanceModal.vue
+++ b/src/components/CustomInstanceModal.vue
@@ -30,50 +30,51 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
 import ModalComponent from "./ModalComponent.vue";
-export default {
-    components: { ModalComponent },
-    emits: ["close"],
-    data() {
-        return {
-            customInstances: [],
-            name: "",
-            url: "",
-        };
-    },
-    mounted() {
-        this.customInstances = this.getCustomInstances();
-    },
-    methods: {
-        async addInstance() {
-            const newInstance = {
-                name: this.name,
-                api_url: this.url,
-            };
+import { getCustomInstances, addCustomInstance, removeCustomInstance } from "@/composables/useCustomInstances.js";
 
-            if (!newInstance.name || !newInstance.api_url) {
-                return;
-            }
-            if (!this.isValidInstanceUrl(newInstance.api_url)) {
-                alert(this.$t("actions.invalid_url"));
-                return;
-            }
+const { t } = useI18n();
 
-            this.addCustomInstance(newInstance);
-            this.name = "";
-            this.url = "";
-        },
-        removeInstance(instance, index) {
-            this.customInstances.splice(index, 1);
+defineEmits(["close"]);
 
-            this.removeCustomInstance(instance);
-        },
-        isValidInstanceUrl(str) {
-            var a = document.createElement("a");
-            a.href = str;
-            return a.host && a.host != window.location.host;
-        },
-    },
-};
+const customInstances = ref([]);
+const name = ref("");
+const url = ref("");
+
+onMounted(() => {
+    customInstances.value = getCustomInstances();
+});
+
+function isValidInstanceUrl(str) {
+    var a = document.createElement("a");
+    a.href = str;
+    return a.host && a.host != window.location.host;
+}
+
+async function addInstance() {
+    const newInstance = {
+        name: name.value,
+        api_url: url.value,
+    };
+
+    if (!newInstance.name || !newInstance.api_url) {
+        return;
+    }
+    if (!isValidInstanceUrl(newInstance.api_url)) {
+        alert(t("actions.invalid_url"));
+        return;
+    }
+
+    addCustomInstance(newInstance);
+    name.value = "";
+    url.value = "";
+}
+
+function removeInstance(instance, index) {
+    customInstances.value.splice(index, 1);
+    removeCustomInstance(instance);
+}
 </script>
diff --git a/src/components/ErrorHandler.vue b/src/components/ErrorHandler.vue
index 79ace637..9c718dc5 100644
--- a/src/components/ErrorHandler.vue
+++ b/src/components/ErrorHandler.vue
@@ -4,16 +4,17 @@
     <p ref="stacktrace" class="whitespace-pre-wrap" hidden v-text="error" />
 </template>
 
-<script>
-export default {
-    props: {
-        error: { type: String, default: null },
-        message: { type: String, default: null },
-    },
-    methods: {
-        toggleTrace() {
-            this.$refs.stacktrace.hidden = !this.$refs.stacktrace.hidden;
-        },
-    },
-};
+<script setup>
+import { ref } from "vue";
+
+defineProps({
+    error: { type: String, default: null },
+    message: { type: String, default: null },
+});
+
+const stacktrace = ref(null);
+
+function toggleTrace() {
+    stacktrace.value.hidden = !stacktrace.value.hidden;
+}
 </script>
diff --git a/src/components/ExportHistoryModal.vue b/src/components/ExportHistoryModal.vue
index b31e51ef..81f394bb 100644
--- a/src/components/ExportHistoryModal.vue
+++ b/src/components/ExportHistoryModal.vue
@@ -32,111 +32,100 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import ModalComponent from "./ModalComponent.vue";
+import { download } from "@/composables/useMisc.js";
 
-export default {
-    components: {
-        ModalComponent,
-    },
-    data() {
-        return {
-            exportOptions: ["playlist", "history"],
-            exportAs: "playlist",
-            fields: [
-                "videoId",
-                "title",
-                "uploaderName",
-                "uploaderUrl",
-                "duration",
-                "thumbnail",
-                "watchedAt",
-                "currentTime",
-            ],
-            selectedFields: [
-                "videoId",
-                "title",
-                "uploaderName",
-                "uploaderUrl",
-                "duration",
-                "thumbnail",
-                "watchedAt",
-                "currentTime",
-            ],
-        };
-    },
-    methods: {
-        async fetchAllVideos() {
-            if (window.db) {
-                var tx = window.db.transaction("watch_history", "readonly");
-                var store = tx.objectStore("watch_history");
-                const request = store.getAll();
-                return new Promise((resolve, reject) => {
-                    (request.onsuccess = e => {
-                        const videos = e.target.result;
-                        this.exportVideos = videos;
-                        resolve();
-                    }),
-                        (request.onerror = e => {
-                            reject(e);
-                        });
+const exportOptions = ["playlist", "history"];
+const exportAs = ref("playlist");
+const fields = ["videoId", "title", "uploaderName", "uploaderUrl", "duration", "thumbnail", "watchedAt", "currentTime"];
+const selectedFields = ref([
+    "videoId",
+    "title",
+    "uploaderName",
+    "uploaderUrl",
+    "duration",
+    "thumbnail",
+    "watchedAt",
+    "currentTime",
+]);
+
+let exportVideos = [];
+
+async function fetchAllVideos() {
+    if (window.db) {
+        var tx = window.db.transaction("watch_history", "readonly");
+        var store = tx.objectStore("watch_history");
+        const request = store.getAll();
+        return new Promise((resolve, reject) => {
+            (request.onsuccess = e => {
+                const videos = e.target.result;
+                exportVideos = videos;
+                resolve();
+            }),
+                (request.onerror = e => {
+                    reject(e);
                 });
-            }
-        },
-        handleExport() {
-            if (this.exportAs === "playlist") {
-                this.fetchAllVideos()
-                    .then(() => {
-                        this.exportAsPlaylist();
-                    })
-                    .catch(e => {
-                        console.error(e);
-                    });
-            } else if (this.exportAs === "history") {
-                this.fetchAllVideos()
-                    .then(() => {
-                        this.exportAsHistory();
-                    })
-                    .catch(e => {
-                        console.error(e);
-                    });
-            }
-        },
-        exportAsPlaylist() {
-            const dateStr = new Date().toISOString().split(".")[0];
-            let json = {
-                format: "Piped",
-                version: 1,
-                playlists: [
-                    {
-                        name: `Piped History ${dateStr}`,
-                        type: "history",
-                        visibility: "private",
-                        videos: this.exportVideos.map(video => "https://youtube.com" + video.url),
-                    },
-                ],
-            };
-            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
-        },
-        exportAsHistory() {
-            const dateStr = new Date().toISOString().split(".")[0];
-            let json = {
-                format: "Piped",
-                version: 1,
-                watchHistory: this.exportVideos.map(video => {
-                    let obj = {};
-                    this.selectedFields.forEach(field => {
-                        obj[field] = video[field];
-                    });
-                    return obj;
-                }),
-            };
-            this.download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
-        },
-        formatField(field) {
-            // camelCase to Title Case
-            return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
-        },
-    },
-};
+        });
+    }
+}
+
+function handleExport() {
+    if (exportAs.value === "playlist") {
+        fetchAllVideos()
+            .then(() => {
+                exportAsPlaylist();
+            })
+            .catch(e => {
+                console.error(e);
+            });
+    } else if (exportAs.value === "history") {
+        fetchAllVideos()
+            .then(() => {
+                exportAsHistory();
+            })
+            .catch(e => {
+                console.error(e);
+            });
+    }
+}
+
+function exportAsPlaylist() {
+    const dateStr = new Date().toISOString().split(".")[0];
+    let json = {
+        format: "Piped",
+        version: 1,
+        playlists: [
+            {
+                name: `Piped History ${dateStr}`,
+                type: "history",
+                visibility: "private",
+                videos: exportVideos.map(video => "https://youtube.com" + video.url),
+            },
+        ],
+    };
+    download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
+}
+
+function exportAsHistory() {
+    const dateStr = new Date().toISOString().split(".")[0];
+    let json = {
+        format: "Piped",
+        version: 1,
+        watchHistory: exportVideos.map(video => {
+            let obj = {};
+            selectedFields.value.forEach(field => {
+                obj[field] = video[field];
+            });
+            return obj;
+        }),
+    };
+    download(JSON.stringify(json), `piped_history_${dateStr}.json`, "application/json");
+}
+
+function formatField(field) {
+    // camelCase to Title Case
+    return field.replace(/([A-Z])/g, " $1").replace(/^./, str => str.toUpperCase());
+}
 </script>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 35c0888d..17857dff 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -53,115 +53,119 @@
     </LoadingIndicatorPage>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, onActivated, onDeactivated, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import VideoItem from "./VideoItem.vue";
 import SortingSelector from "./SortingSelector.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
+import { authApiUrl, getAuthToken, isAuthenticated } from "@/composables/useApi.js";
+import { getPreferenceBoolean, getPreferenceString, setPreference } from "@/composables/usePreferences.js";
+import { fetchFeed, getUnauthenticatedChannels, fetchDeArrowContent } from "@/composables/useSubscriptions.js";
+import { getChannelGroups } from "@/composables/useChannelGroups.js";
+import { updateWatched } from "@/composables/useMisc.js";
 
-export default {
-    components: {
-        VideoItem,
-        SortingSelector,
-        LoadingIndicatorPage,
-    },
-    data() {
-        return {
-            currentVideoCount: 0,
-            videoStep: 100,
-            videosStore: null,
-            videos: [],
-            availableFilters: ["all", "shorts", "videos"],
-            selectedFilter: "all",
-            selectedGroupName: "",
-            channelGroups: [],
-        };
-    },
-    computed: {
-        getRssUrl(_this) {
-            if (_this.authenticated) return _this.authApiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
-            else return _this.authApiUrl() + "/feed/unauthenticated/rss?channels=" + _this.getUnauthenticatedChannels();
-        },
-        filteredVideos(_this) {
-            const selectedGroup = _this.channelGroups.filter(group => group.groupName == _this.selectedGroupName);
+const { t } = useI18n();
 
-            const videos = this.getPreferenceBoolean("hideWatched", false)
-                ? this.videos.filter(video => !video.watched)
-                : this.videos;
+let currentVideoCount = 0;
+const videoStep = 100;
+let videosStore = null;
+const videos = ref([]);
+const availableFilters = ["all", "shorts", "videos"];
+const selectedFilter = ref("all");
+const selectedGroupName = ref("");
+const channelGroups = ref([]);
 
-            return _this.selectedGroupName == ""
-                ? videos
-                : videos.filter(video => selectedGroup[0].channels.includes(video.uploaderUrl.substr(-24)));
-        },
-    },
-    mounted() {
-        this.fetchFeed().then(resp => {
-            if (resp.error) {
-                alert(resp.error);
-                return;
-            }
+const getRssUrl = computed(() => {
+    if (isAuthenticated()) return authApiUrl() + "/feed/rss?authToken=" + getAuthToken();
+    else return authApiUrl() + "/feed/unauthenticated/rss?channels=" + getUnauthenticatedChannels();
+});
 
-            this.videosStore = resp;
-            this.loadMoreVideos();
-            this.updateWatched(this.videos);
-        });
+const filteredVideos = computed(() => {
+    const selectedGroup = channelGroups.value.filter(group => group.groupName == selectedGroupName.value);
 
-        this.selectedFilter = this.getPreferenceString("feedFilter") ?? "all";
+    const vids = getPreferenceBoolean("hideWatched", false)
+        ? videos.value.filter(video => !video.watched)
+        : videos.value;
 
-        if (!window.db) return;
+    return selectedGroupName.value == ""
+        ? vids
+        : vids.filter(video => selectedGroup[0].channels.includes(video.uploaderUrl.substr(-24)));
+});
 
-        this.loadChannelGroups();
-    },
-    activated() {
-        document.title = this.$t("titles.feed") + " - Piped";
-        if (this.videos.length > 0) this.updateWatched(this.videos);
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        async loadChannelGroups() {
-            const groups = await this.getChannelGroups();
-            this.channelGroups.push(...groups);
-        },
-        loadMoreVideos() {
-            if (!this.videosStore) return;
-            this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
-            if (this.videos.length != this.videosStore.length) {
-                this.fetchDeArrowContent(this.videosStore.slice(this.videos.length, this.currentVideoCount));
-                this.videos = this.videosStore.slice(0, this.currentVideoCount);
-            }
-        },
-        handleScroll() {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-                this.loadMoreVideos();
-            }
-        },
-        onUpdateWatched(urls = null) {
-            if (urls === null) {
-                if (this.videos.length > 0) this.updateWatched(this.videos);
-                return;
-            }
+function loadMoreVideos() {
+    if (!videosStore) return;
+    currentVideoCount = Math.min(currentVideoCount + videoStep, videosStore.length);
+    if (videos.value.length != videosStore.length) {
+        fetchDeArrowContent(videosStore.slice(videos.value.length, currentVideoCount));
+        videos.value = videosStore.slice(0, currentVideoCount);
+    }
+}
 
-            const subset = this.videos.filter(({ url }) => urls.includes(url));
-            if (subset.length > 0) this.updateWatched(subset);
-        },
-        shouldShowVideo(video) {
-            switch (this.selectedFilter.toLowerCase()) {
-                case "shorts":
-                    return video.isShort;
-                case "videos":
-                    return !video.isShort;
-                default:
-                    return true;
-            }
-        },
-        onFilterChange() {
-            this.setPreference("feedFilter", this.selectedFilter);
-        },
-    },
-};
+function handleScroll() {
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        loadMoreVideos();
+    }
+}
+
+function onUpdateWatched(urls = null) {
+    if (urls === null) {
+        if (videos.value.length > 0) updateWatched(videos.value);
+        return;
+    }
+
+    const subset = videos.value.filter(({ url }) => urls.includes(url));
+    if (subset.length > 0) updateWatched(subset);
+}
+
+function shouldShowVideo(video) {
+    switch (selectedFilter.value.toLowerCase()) {
+        case "shorts":
+            return video.isShort;
+        case "videos":
+            return !video.isShort;
+        default:
+            return true;
+    }
+}
+
+function onFilterChange() {
+    setPreference("feedFilter", selectedFilter.value);
+}
+
+onMounted(() => {
+    fetchFeed().then(resp => {
+        if (resp.error) {
+            alert(resp.error);
+            return;
+        }
+
+        videosStore = resp;
+        loadMoreVideos();
+        updateWatched(videos.value);
+    });
+
+    selectedFilter.value = getPreferenceString("feedFilter") ?? "all";
+
+    if (!window.db) return;
+
+    (async () => {
+        const groups = await getChannelGroups();
+        channelGroups.value.push(...groups);
+    })();
+});
+
+onActivated(() => {
+    document.title = t("titles.feed") + " - Piped";
+    if (videos.value.length > 0) updateWatched(videos.value);
+    window.addEventListener("scroll", handleScroll);
+});
+
+onDeactivated(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
 </script>
diff --git a/src/components/FooterComponent.vue b/src/components/FooterComponent.vue
index 5701a06d..b13d5abd 100644
--- a/src/components/FooterComponent.vue
+++ b/src/components/FooterComponent.vue
@@ -27,28 +27,21 @@
     </footer>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            donationHref: null,
-            statusPageHref: null,
-            privacyPolicyHref: null,
-        };
-    },
-    mounted() {
-        this.fetchConfig();
-    },
-    methods: {
-        async fetchConfig() {
-            this.fetchJson(this.apiUrl() + "/config").then(config => {
-                this.donationHref = config?.donationUrl;
-                this.statusPageHref = config?.statusPageUrl;
-                this.privacyPolicyHref = config?.privacyPolicyUrl;
-            });
-        },
-    },
-};
+<script setup>
+import { ref, onMounted } from "vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+
+const donationHref = ref(null);
+const statusPageHref = ref(null);
+const privacyPolicyHref = ref(null);
+
+onMounted(() => {
+    fetchJson(apiUrl() + "/config").then(config => {
+        donationHref.value = config?.donationUrl;
+        statusPageHref.value = config?.statusPageUrl;
+        privacyPolicyHref.value = config?.privacyPolicyUrl;
+    });
+});
 </script>
 
 <style>
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index c07b3a7d..96d2f9d5 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -42,107 +42,101 @@
     <ImportHistoryModal v-if="showImportModal" @close="showImportModal = false" />
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onActivated, onDeactivated } from "vue";
 import VideoItem from "./VideoItem.vue";
 import SortingSelector from "./SortingSelector.vue";
 import ExportHistoryModal from "./ExportHistoryModal.vue";
 import ImportHistoryModal from "./ImportHistoryModal.vue";
+import { getPreferenceBoolean, getPreferenceString, setPreference } from "@/composables/usePreferences.js";
 
-export default {
-    components: {
-        VideoItem,
-        SortingSelector,
-        ExportHistoryModal,
-        ImportHistoryModal,
-    },
-    data() {
-        return {
-            currentVideoCount: 0,
-            videoStep: 100,
-            videosStore: [],
-            videos: [],
-            autoDeleteHistory: false,
-            autoDeleteDelayHours: "24",
-            showExportModal: false,
-            showImportModal: false,
-        };
-    },
-    mounted() {
-        this.autoDeleteHistory = this.getPreferenceBoolean("autoDeleteWatchHistory", false);
-        this.autoDeleteDelayHours = this.getPreferenceString("autoDeleteWatchHistoryDelayHours", "24");
+let currentVideoCount = 0;
+const videoStep = 100;
+const videosStore = [];
+const videos = ref([]);
+const autoDeleteHistory = ref(false);
+const autoDeleteDelayHours = ref("24");
+const showExportModal = ref(false);
+const showImportModal = ref(false);
 
-        (async () => {
-            if (window.db && this.getPreferenceBoolean("watchHistory", false)) {
-                var tx = window.db.transaction("watch_history", "readwrite");
-                var store = tx.objectStore("watch_history");
-                const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
-                const cursorPromise = new Promise(resolve => {
-                    cursorRequest.onsuccess = e => {
-                        const cursor = e.target.result;
-                        if (cursor) {
-                            const video = cursor.value;
-                            if (!this.shouldRemoveVideo(video)) {
-                                this.videosStore.push({
-                                    url: "/watch?v=" + video.videoId,
-                                    title: video.title,
-                                    uploaderName: video.uploaderName,
-                                    uploaderUrl: video.uploaderUrl ?? "", // Router doesn't like undefined
-                                    duration: video.duration ?? 0, // Undefined duration shows "Live"
-                                    thumbnail: video.thumbnail,
-                                    watchedAt: video.watchedAt,
-                                    watched: true,
-                                    currentTime: video.currentTime,
-                                });
-                            } else {
-                                store.delete(video.videoId);
-                            }
-                            if (this.videosStore.length < 1000) cursor.continue();
-                            else resolve();
-                        } else resolve();
-                    };
-                });
-                await cursorPromise;
-            }
-        })().then(() => {
-            this.loadMoreVideos();
-        });
-    },
-    activated() {
-        document.title = "Watch History - Piped";
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        clearHistory() {
-            if (window.db) {
-                var tx = window.db.transaction("watch_history", "readwrite");
-                var store = tx.objectStore("watch_history");
-                store.clear();
-            }
-            this.videos = [];
-        },
-        onChange() {
-            this.setPreference("autoDeleteWatchHistory", this.autoDeleteHistory);
-            this.setPreference("autoDeleteWatchHistoryDelayHours", this.autoDeleteDelayHours);
-        },
-        shouldRemoveVideo(video) {
-            if (!this.autoDeleteHistory) return false;
-            // convert from hours to milliseconds
-            let maximumTimeDiff = Number(this.autoDeleteDelayHours) * 60 * 60 * 1000;
-            return Date.now() - video.watchedAt > maximumTimeDiff;
-        },
-        loadMoreVideos() {
-            this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
-            if (this.videos.length != this.videosStore.length)
-                this.videos = this.videosStore.slice(0, this.currentVideoCount);
-        },
-        handleScroll() {
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-                this.loadMoreVideos();
-            }
-        },
-    },
-};
+function shouldRemoveVideo(video) {
+    if (!autoDeleteHistory.value) return false;
+    let maximumTimeDiff = Number(autoDeleteDelayHours.value) * 60 * 60 * 1000;
+    return Date.now() - video.watchedAt > maximumTimeDiff;
+}
+
+function loadMoreVideos() {
+    currentVideoCount = Math.min(currentVideoCount + videoStep, videosStore.length);
+    if (videos.value.length != videosStore.length) videos.value = videosStore.slice(0, currentVideoCount);
+}
+
+function handleScroll() {
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        loadMoreVideos();
+    }
+}
+
+function clearHistory() {
+    if (window.db) {
+        var tx = window.db.transaction("watch_history", "readwrite");
+        var store = tx.objectStore("watch_history");
+        store.clear();
+    }
+    videos.value = [];
+}
+
+function onChange() {
+    setPreference("autoDeleteWatchHistory", autoDeleteHistory.value);
+    setPreference("autoDeleteWatchHistoryDelayHours", autoDeleteDelayHours.value);
+}
+
+onMounted(() => {
+    autoDeleteHistory.value = getPreferenceBoolean("autoDeleteWatchHistory", false);
+    autoDeleteDelayHours.value = getPreferenceString("autoDeleteWatchHistoryDelayHours", "24");
+
+    (async () => {
+        if (window.db && getPreferenceBoolean("watchHistory", false)) {
+            var tx = window.db.transaction("watch_history", "readwrite");
+            var store = tx.objectStore("watch_history");
+            const cursorRequest = store.index("watchedAt").openCursor(null, "prev");
+            const cursorPromise = new Promise(resolve => {
+                cursorRequest.onsuccess = e => {
+                    const cursor = e.target.result;
+                    if (cursor) {
+                        const video = cursor.value;
+                        if (!shouldRemoveVideo(video)) {
+                            videosStore.push({
+                                url: "/watch?v=" + video.videoId,
+                                title: video.title,
+                                uploaderName: video.uploaderName,
+                                uploaderUrl: video.uploaderUrl ?? "",
+                                duration: video.duration ?? 0,
+                                thumbnail: video.thumbnail,
+                                watchedAt: video.watchedAt,
+                                watched: true,
+                                currentTime: video.currentTime,
+                            });
+                        } else {
+                            store.delete(video.videoId);
+                        }
+                        if (videosStore.length < 1000) cursor.continue();
+                        else resolve();
+                    } else resolve();
+                };
+            });
+            await cursorPromise;
+        }
+    })().then(() => {
+        loadMoreVideos();
+    });
+});
+
+onActivated(() => {
+    document.title = "Watch History - Piped";
+    window.addEventListener("scroll", handleScroll);
+});
+
+onDeactivated(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
 </script>
diff --git a/src/components/ImportHistoryModal.vue b/src/components/ImportHistoryModal.vue
index 992a249b..a2abf21f 100644
--- a/src/components/ImportHistoryModal.vue
+++ b/src/components/ImportHistoryModal.vue
@@ -34,75 +34,67 @@
         </div>
     </ModalComponent>
 </template>
-<script>
+<script setup>
+import { ref, computed } from "vue";
 import ModalComponent from "./ModalComponent.vue";
 
-export default {
-    components: { ModalComponent },
-    data() {
-        return {
-            items: [],
-            override: false,
-            index: 0,
-            success: 0,
-            error: 0,
-            skipped: 0,
-        };
-    },
-    computed: {
-        itemsLength() {
-            return this.items.length;
-        },
-    },
-    methods: {
-        fileChange() {
-            const file = this.$refs.fileSelector.files[0];
-            file.text().then(text => {
-                this.items = [];
-                const json = JSON.parse(text);
-                const items = json.watchHistory.map(video => {
-                    return {
-                        ...video,
-                        watchedAt: video.watchedAt ?? 0,
-                        currentTime: video.currentTime ?? 0,
+const fileSelector = ref(null);
+const items = ref([]);
+const override = ref(false);
+const index = ref(0);
+const success = ref(0);
+const error = ref(0);
+const skipped = ref(0);
+
+const itemsLength = computed(() => items.value.length);
+
+function fileChange() {
+    const file = fileSelector.value.files[0];
+    file.text().then(text => {
+        items.value = [];
+        const json = JSON.parse(text);
+        const parsed = json.watchHistory.map(video => {
+            return {
+                ...video,
+                watchedAt: video.watchedAt ?? 0,
+                currentTime: video.currentTime ?? 0,
+            };
+        });
+        items.value = parsed.sort((a, b) => b.watchedAt - a.watchedAt);
+    });
+}
+
+function handleImport() {
+    if (window.db) {
+        var tx = window.db.transaction("watch_history", "readwrite");
+        var store = tx.objectStore("watch_history");
+        items.value.forEach(item => {
+            const dbItem = store.get(item.videoId);
+            dbItem.onsuccess = () => {
+                if (dbItem.result && dbItem.result.videoId === item.videoId) {
+                    if (!override.value) {
+                        index.value++;
+                        skipped.value++;
+                        return;
+                    }
+                }
+                try {
+                    const request = store.put(JSON.parse(JSON.stringify(item))); // prevent "Symbol could not be cloned." error
+                    request.onsuccess = () => {
+                        index.value++;
+                        success.value++;
                     };
-                });
-                this.items = items.sort((a, b) => b.watchedAt - a.watchedAt);
-            });
-        },
-        handleImport() {
-            if (window.db) {
-                var tx = window.db.transaction("watch_history", "readwrite");
-                var store = tx.objectStore("watch_history");
-                this.items.forEach(item => {
-                    const dbItem = store.get(item.videoId);
-                    dbItem.onsuccess = () => {
-                        if (dbItem.result && dbItem.result.videoId === item.videoId) {
-                            if (!this.override) {
-                                this.index++;
-                                this.skipped++;
-                                return;
-                            }
-                        }
-                        try {
-                            const request = store.put(JSON.parse(JSON.stringify(item))); // prevent "Symbol could not be cloned." error
-                            request.onsuccess = () => {
-                                this.index++;
-                                this.success++;
-                            };
-                            request.onerror = () => {
-                                this.index++;
-                                this.error++;
-                            };
-                        } catch (error) {
-                            console.error(error);
-                            this.index++;
-                            this.error++;
-                        }
+                    request.onerror = () => {
+                        index.value++;
+                        error.value++;
                     };
-                });
-            }
-        },
-    },
-};
+                } catch (err) {
+                    console.error(err);
+                    index.value++;
+                    error.value++;
+                }
+            };
+        });
+    }
+}
 </script>
diff --git a/src/components/ImportPage.vue b/src/components/ImportPage.vue
index da94fcc8..0b16f56d 100644
--- a/src/components/ImportPage.vue
+++ b/src/components/ImportPage.vue
@@ -57,120 +57,121 @@
     </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            subscriptions: [],
-            override: false,
-        };
-    },
-    computed: {
-        selectedSubscriptions() {
-            return this.subscriptions.length;
-        },
-    },
-    activated() {
-        document.title = "Import - Piped";
-    },
-    methods: {
-        fileChange() {
-            const file = this.$refs.fileSelector.files[0];
-            file.text().then(text => {
-                this.subscriptions = [];
+<script setup>
+import { ref, computed, onActivated } from "vue";
+import { useI18n } from "vue-i18n";
+import { fetchJson, authApiUrl, getAuthToken, isAuthenticated } from "@/composables/useApi.js";
+import { getLocalSubscriptions } from "@/composables/useSubscriptions.js";
 
-                // Invidious
-                if (text.indexOf("opml") != -1) {
-                    const parser = new DOMParser();
-                    const xmlDoc = parser.parseFromString(text, "text/xml");
-                    xmlDoc.querySelectorAll("outline[xmlUrl]").forEach(item => {
-                        const url = item.getAttribute("xmlUrl");
-                        const id = url.slice(-24);
-                        this.subscriptions.push(id);
-                    });
-                }
-                // NewPipe
-                else if (text.indexOf("subscriptions") != -1) {
-                    const json = JSON.parse(text);
-                    json.subscriptions
-                        // if service_id is undefined, chances are it's a freetube export
-                        .filter(item => item.service_id == 0 || item.service_id == undefined)
-                        .forEach(item => {
-                            const url = item.url;
-                            const id = url.slice(-24);
-                            this.subscriptions.push(id);
-                        });
-                }
-                // Invidious JSON
-                else if (text.indexOf("thin_mode") != -1) {
-                    const json = JSON.parse(text);
-                    this.subscriptions = json.subscriptions;
-                }
-                // FreeTube DB
-                else if (text.indexOf("allChannels") != -1) {
-                    const lines = text.split("\n");
-                    for (let line of lines) {
-                        if (line === "") continue;
-                        const json = JSON.parse(line);
-                        json.subscriptions.forEach(item => {
-                            this.subscriptions.push(item.id);
-                        });
-                    }
-                }
-                // Google Takeout JSON
-                else if (text.indexOf("contentDetails") != -1) {
-                    const json = JSON.parse(text);
-                    json.forEach(item => {
-                        const id = item.snippet.resourceId.channelId;
-                        this.subscriptions.push(id);
-                    });
-                }
+const { t } = useI18n();
 
-                // Google Takeout CSV
-                else if (file.name.length >= 5 && file.name.slice(-4).toLowerCase() == ".csv") {
-                    const lines = text.split("\n");
-                    for (let i = 1; i < lines.length; i++) {
-                        const line = lines[i];
-                        const id = line.slice(0, line.indexOf(","));
-                        if (id.length === 24) this.subscriptions.push(id);
-                    }
-                }
+const fileSelector = ref(null);
+const subscriptions = ref([]);
+const override = ref(false);
+
+const selectedSubscriptions = computed(() => subscriptions.value.length);
+
+onActivated(() => {
+    document.title = "Import - Piped";
+});
+
+function fileChange() {
+    const file = fileSelector.value.files[0];
+    file.text().then(text => {
+        subscriptions.value = [];
+
+        // Invidious
+        if (text.indexOf("opml") != -1) {
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(text, "text/xml");
+            xmlDoc.querySelectorAll("outline[xmlUrl]").forEach(item => {
+                const url = item.getAttribute("xmlUrl");
+                const id = url.slice(-24);
+                subscriptions.value.push(id);
             });
-        },
-        handleImport() {
-            if (this.authenticated) {
-                this.fetchJson(
-                    this.authApiUrl() + "/import",
-                    {
-                        override: this.override,
-                    },
-                    {
-                        method: "POST",
-                        headers: {
-                            Authorization: this.getAuthToken(),
-                        },
-                        body: JSON.stringify(this.subscriptions),
-                    },
-                ).then(json => {
-                    if (json.message === "ok") window.location = "/feed";
+        }
+        // NewPipe
+        else if (text.indexOf("subscriptions") != -1) {
+            const json = JSON.parse(text);
+            json.subscriptions
+                // if service_id is undefined, chances are it's a freetube export
+                .filter(item => item.service_id == 0 || item.service_id == undefined)
+                .forEach(item => {
+                    const url = item.url;
+                    const id = url.slice(-24);
+                    subscriptions.value.push(id);
+                });
+        }
+        // Invidious JSON
+        else if (text.indexOf("thin_mode") != -1) {
+            const json = JSON.parse(text);
+            subscriptions.value = json.subscriptions;
+        }
+        // FreeTube DB
+        else if (text.indexOf("allChannels") != -1) {
+            const lines = text.split("\n");
+            for (let line of lines) {
+                if (line === "") continue;
+                const json = JSON.parse(line);
+                json.subscriptions.forEach(item => {
+                    subscriptions.value.push(item.id);
                 });
-            } else {
-                this.importSubscriptionsLocally(this.subscriptions);
-                window.location = "/feed";
             }
-        },
-        importSubscriptionsLocally(newChannels) {
-            const subscriptions = this.override
-                ? [...new Set(newChannels)]
-                : [...new Set((this.getLocalSubscriptions() ?? []).concat(newChannels))];
-            // Sort for better cache hits
-            subscriptions.sort();
-            try {
-                localStorage.setItem("localSubscriptions", JSON.stringify(subscriptions));
-            } catch (e) {
-                alert(this.$t("info.local_storage"));
+        }
+        // Google Takeout JSON
+        else if (text.indexOf("contentDetails") != -1) {
+            const json = JSON.parse(text);
+            json.forEach(item => {
+                const id = item.snippet.resourceId.channelId;
+                subscriptions.value.push(id);
+            });
+        }
+
+        // Google Takeout CSV
+        else if (file.name.length >= 5 && file.name.slice(-4).toLowerCase() == ".csv") {
+            const lines = text.split("\n");
+            for (let i = 1; i < lines.length; i++) {
+                const line = lines[i];
+                const id = line.slice(0, line.indexOf(","));
+                if (id.length === 24) subscriptions.value.push(id);
             }
-        },
-    },
-};
+        }
+    });
+}
+
+function handleImport() {
+    if (isAuthenticated()) {
+        fetchJson(
+            authApiUrl() + "/import",
+            {
+                override: override.value,
+            },
+            {
+                method: "POST",
+                headers: {
+                    Authorization: getAuthToken(),
+                },
+                body: JSON.stringify(subscriptions.value),
+            },
+        ).then(json => {
+            if (json.message === "ok") window.location = "/feed";
+        });
+    } else {
+        importSubscriptionsLocally(subscriptions.value);
+        window.location = "/feed";
+    }
+}
+
+function importSubscriptionsLocally(newChannels) {
+    const subs = override.value
+        ? [...new Set(newChannels)]
+        : [...new Set((getLocalSubscriptions() ?? []).concat(newChannels))];
+    // Sort for better cache hits
+    subs.sort();
+    try {
+        localStorage.setItem("localSubscriptions", JSON.stringify(subs));
+    } catch (e) {
+        alert(t("info.local_storage"));
+    }
+}
 </script>
diff --git a/src/components/LoadingIndicatorPage.vue b/src/components/LoadingIndicatorPage.vue
index 70b40d76..65303cc8 100644
--- a/src/components/LoadingIndicatorPage.vue
+++ b/src/components/LoadingIndicatorPage.vue
@@ -7,15 +7,13 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        showContent: {
-            type: Boolean,
-            required: true,
-        },
+<script setup>
+defineProps({
+    showContent: {
+        type: Boolean,
+        required: true,
     },
-};
+});
 </script>
 
 <style>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
index 459c79b6..07fe78c1 100644
--- a/src/components/LoginPage.vue
+++ b/src/components/LoginPage.vue
@@ -35,39 +35,43 @@
     </div>
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-            username: null,
-            password: null,
-        };
-    },
-    mounted() {
-        //TODO: Add Server Side check
-        if (this.getAuthToken()) {
-            this.$router.push(import.meta.env.BASE_URL);
-        }
-    },
-    activated() {
-        document.title = this.$t("titles.login") + " - Piped";
-    },
-    methods: {
-        login() {
-            if (!this.username || !this.password) return;
-            this.fetchJson(this.authApiUrl() + "/login", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    username: this.username,
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (resp.token) {
-                    this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
-                    window.location = import.meta.env.BASE_URL; // done to bypass cache
-                } else alert(resp.error);
-            });
-        },
-    },
-};
+<script setup>
+import { ref, onMounted, onActivated } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { fetchJson, authApiUrl, getAuthToken, hashCode } from "@/composables/useApi.js";
+import { setPreference } from "@/composables/usePreferences.js";
+
+const router = useRouter();
+const { t } = useI18n();
+
+const username = ref(null);
+const password = ref(null);
+
+onMounted(() => {
+    //TODO: Add Server Side check
+    if (getAuthToken()) {
+        router.push(import.meta.env.BASE_URL);
+    }
+});
+
+onActivated(() => {
+    document.title = t("titles.login") + " - Piped";
+});
+
+function login() {
+    if (!username.value || !password.value) return;
+    fetchJson(authApiUrl() + "/login", null, {
+        method: "POST",
+        body: JSON.stringify({
+            username: username.value,
+            password: password.value,
+        }),
+    }).then(resp => {
+        if (resp.token) {
+            setPreference("authToken" + hashCode(authApiUrl()), resp.token);
+            window.location = import.meta.env.BASE_URL; // done to bypass cache
+        } else alert(resp.error);
+    });
+}
 </script>
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 2c64594e..3cf6d777 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -9,28 +9,30 @@
     </div>
 </template>
 
-<script>
-export default {
-    emits: ["close"],
-    mounted() {
-        window.addEventListener("keydown", this.handleKeyDown);
-    },
-    unmounted() {
-        window.removeEventListener("keydown", this.handleKeyDown);
-    },
-    methods: {
-        handleKeyDown(event) {
-            if (event.code === "Escape") {
-                this.$emit("close");
-            } else return;
-            event.preventDefault();
-        },
-        handleClick(event) {
-            if (event.target !== event.currentTarget) return;
-            this.$emit("close");
-        },
-    },
-};
+<script setup>
+import { onMounted, onUnmounted } from "vue";
+
+const emit = defineEmits(["close"]);
+
+function handleKeyDown(event) {
+    if (event.code === "Escape") {
+        emit("close");
+    } else return;
+    event.preventDefault();
+}
+
+function handleClick(event) {
+    if (event.target !== event.currentTarget) return;
+    emit("close");
+}
+
+onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
 
 <style scoped>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 1ee9c31f..2cce3371 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -119,107 +119,121 @@
     />
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import SearchSuggestions from "./SearchSuggestions.vue";
 import hotkeys from "hotkeys-js";
-export default {
-    components: {
-        SearchSuggestions,
+import { fetchJson, authApiUrl, getAuthToken } from "@/composables/useApi.js";
+import { getPreferenceBoolean, getPreferenceString } from "@/composables/usePreferences.js";
+import { getHomePage } from "@/composables/useMisc.js";
+
+const router = useRouter();
+const route = useRoute();
+
+const videoSearch = ref(null);
+const searchSuggestions = ref(null);
+
+const searchText = ref("");
+const suggestionsVisible = ref(false);
+const showTopNav = ref(false);
+const homePagePath = ref(import.meta.env.BASE_URL);
+const registrationDisabled = ref(false);
+
+const shouldShowLogin = computed(() => {
+    return getAuthToken() == null;
+});
+
+const shouldShowRegister = computed(() => {
+    return registrationDisabled.value == false ? shouldShowLogin.value : false;
+});
+
+const shouldShowHistory = computed(() => {
+    return getPreferenceBoolean("watchHistory", false);
+});
+
+const shouldShowTrending = computed(() => {
+    return getPreferenceString("homepage", "trending") != "trending";
+});
+
+const showSearchHistory = computed(() => {
+    return getPreferenceBoolean("searchHistory", false) && localStorage.getItem("search_history");
+});
+
+watch(
+    () => route.fullPath,
+    () => {
+        updateSearchTextFromURLSearchParams();
     },
-    data() {
-        return {
-            searchText: "",
-            suggestionsVisible: false,
-            showTopNav: false,
-            homePagePath: import.meta.env.BASE_URL,
-            registrationDisabled: false,
-        };
-    },
-    computed: {
-        shouldShowLogin(_this) {
-            return _this.getAuthToken() == null;
-        },
-        shouldShowRegister(_this) {
-            return _this.registrationDisabled == false ? _this.shouldShowLogin : false;
-        },
-        shouldShowHistory(_this) {
-            return _this.getPreferenceBoolean("watchHistory", false);
-        },
-        shouldShowTrending(_this) {
-            return _this.getPreferenceString("homepage", "trending") != "trending";
-        },
-        showSearchHistory(_this) {
-            return _this.getPreferenceBoolean("searchHistory", false) && localStorage.getItem("search_history");
-        },
-    },
-    watch: {
-        $route() {
-            this.updateSearchTextFromURLSearchParams();
-        },
-    },
-    mounted() {
-        this.fetchAuthConfig();
-        this.updateSearchTextFromURLSearchParams();
-        this.focusOnSearchBar();
-        this.homePagePath = this.getHomePage(this);
-    },
-    methods: {
-        updateSearchTextFromURLSearchParams() {
-            const query = new URLSearchParams(window.location.search).get("search_query");
-            if (query) this.onSearchTextChange(query);
-        },
-        // focus on search bar when Ctrl+k is pressed
-        focusOnSearchBar() {
-            hotkeys("ctrl+k", event => {
-                event.preventDefault();
-                this.$refs.videoSearch.focus();
-            });
-        },
-        onKeyUp(e) {
-            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-                e.preventDefault();
-            }
-            this.$refs.searchSuggestions.onKeyUp(e);
-        },
-        onKeyPress(e) {
-            if (e.key === "Enter") {
-                this.submitSearch(e);
-            }
-        },
-        onInputFocus() {
-            if (this.showSearchHistory) this.$refs.searchSuggestions.refreshSuggestions();
-            this.suggestionsVisible = true;
-        },
-        onInputBlur() {
-            // the search suggestions will be hidden after some seconds
-            // otherwise anchor links won't work!
-            setTimeout(() => (this.suggestionsVisible = false), 200);
-        },
-        onSearchTextChange(searchText) {
-            this.searchText = searchText;
-        },
-        async fetchAuthConfig() {
-            this.fetchJson(this.authApiUrl() + "/config").then(config => {
-                this.registrationDisabled = config?.registrationDisabled === true;
-            });
-        },
-        onSearchClick(e) {
-            this.submitSearch(e);
-        },
-        submitSearch(e) {
-            e.target.blur();
-            if (this.searchText) {
-                this.$router.push({
-                    name: "SearchResults",
-                    query: { search_query: this.searchText },
-                });
-            } else {
-                this.$router.push("/");
-            }
-            return;
-        },
-    },
-};
+);
+
+function updateSearchTextFromURLSearchParams() {
+    const query = new URLSearchParams(window.location.search).get("search_query");
+    if (query) onSearchTextChange(query);
+}
+
+function focusOnSearchBar() {
+    hotkeys("ctrl+k", event => {
+        event.preventDefault();
+        videoSearch.value.focus();
+    });
+}
+
+function onKeyUp(e) {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+    }
+    searchSuggestions.value.onKeyUp(e);
+}
+
+function onKeyPress(e) {
+    if (e.key === "Enter") {
+        submitSearch(e);
+    }
+}
+
+function onInputFocus() {
+    if (showSearchHistory.value) searchSuggestions.value.refreshSuggestions();
+    suggestionsVisible.value = true;
+}
+
+function onInputBlur() {
+    setTimeout(() => (suggestionsVisible.value = false), 200);
+}
+
+function onSearchTextChange(text) {
+    searchText.value = text;
+}
+
+async function fetchAuthConfig() {
+    fetchJson(authApiUrl() + "/config").then(config => {
+        registrationDisabled.value = config?.registrationDisabled === true;
+    });
+}
+
+function onSearchClick(e) {
+    submitSearch(e);
+}
+
+function submitSearch(e) {
+    e.target.blur();
+    if (searchText.value) {
+        router.push({
+            name: "SearchResults",
+            query: { search_query: searchText.value },
+        });
+    } else {
+        router.push("/");
+    }
+    return;
+}
+
+onMounted(() => {
+    fetchAuthConfig();
+    updateSearchTextFromURLSearchParams();
+    focusOnSearchBar();
+    homePagePath.value = getHomePage();
+});
 </script>
 
 <style>
diff --git a/src/components/PlaylistAddModal.vue b/src/components/PlaylistAddModal.vue
index 09cc3432..ad44bfbb 100644
--- a/src/components/PlaylistAddModal.vue
+++ b/src/components/PlaylistAddModal.vue
@@ -26,73 +26,76 @@
     />
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { useI18n } from "vue-i18n";
 import ModalComponent from "./ModalComponent.vue";
 import CreatePlaylistModal from "./CreatePlaylistModal.vue";
+import { getPlaylists, addVideosToPlaylist } from "@/composables/usePlaylists.js";
+import { getPreferenceString, setPreference } from "@/composables/usePreferences.js";
+import { authApiUrl, hashCode } from "@/composables/useApi.js";
 
-export default {
-    components: {
-        ModalComponent,
-        CreatePlaylistModal,
-    },
-    props: {
-        videoInfo: {
-            type: Object,
-            required: true,
-        },
-        videoId: {
-            type: String,
-            required: true,
-        },
-    },
-    emits: ["close"],
-    data() {
-        return {
-            playlists: [],
-            selectedPlaylist: null,
-            processing: false,
-            showCreatePlaylistModal: false,
-        };
-    },
-    mounted() {
-        this.getPlaylists().then(json => {
-            this.playlists = json;
-        });
-        this.selectedPlaylist = this.getPreferenceString("selectedPlaylist" + this.hashCode(this.authApiUrl()));
-        window.addEventListener("keydown", this.handleKeyDown);
-        window.blur();
-    },
-    unmounted() {
-        window.removeEventListener("keydown", this.handleKeyDown);
-    },
-    methods: {
-        handleKeyDown(event) {
-            if (event.code === "Enter" && !this.showCreatePlaylistModal) {
-                this.handleClick(this.selectedPlaylist);
-                event.preventDefault();
-            }
-        },
-        handleClick(playlistId) {
-            if (!playlistId) {
-                alert(this.$t("actions.please_select_playlist"));
-                return;
-            }
+const { t } = useI18n();
 
-            if (this.processing) return;
-
-            this.$refs.addButton.disabled = true;
-            this.processing = true;
-
-            this.addVideosToPlaylist(playlistId, [this.videoId], [this.videoInfo]).then(json => {
-                this.setPreference("selectedPlaylist" + this.hashCode(this.authApiUrl()), playlistId);
-                this.$emit("close");
-                if (json.error) alert(json.error);
-            });
-        },
-        addCreatedPlaylist(playlistId, playlistName) {
-            this.playlists.push({ id: playlistId, name: playlistName });
-            this.selectedPlaylist = playlistId;
-        },
+const props = defineProps({
+    videoInfo: {
+        type: Object,
+        required: true,
     },
-};
+    videoId: {
+        type: String,
+        required: true,
+    },
+});
+
+const emit = defineEmits(["close"]);
+
+const addButton = ref(null);
+const playlists = ref([]);
+const selectedPlaylist = ref(null);
+const processing = ref(false);
+const showCreatePlaylistModal = ref(false);
+
+function handleKeyDown(event) {
+    if (event.code === "Enter" && !showCreatePlaylistModal.value) {
+        handleClick(selectedPlaylist.value);
+        event.preventDefault();
+    }
+}
+
+function handleClick(playlistId) {
+    if (!playlistId) {
+        alert(t("actions.please_select_playlist"));
+        return;
+    }
+
+    if (processing.value) return;
+
+    addButton.value.disabled = true;
+    processing.value = true;
+
+    addVideosToPlaylist(playlistId, [props.videoId], [props.videoInfo]).then(json => {
+        setPreference("selectedPlaylist" + hashCode(authApiUrl()), playlistId);
+        emit("close");
+        if (json.error) alert(json.error);
+    });
+}
+
+function addCreatedPlaylist(playlistId, playlistName) {
+    playlists.value.push({ id: playlistId, name: playlistName });
+    selectedPlaylist.value = playlistId;
+}
+
+onMounted(() => {
+    getPlaylists().then(json => {
+        playlists.value = json;
+    });
+    selectedPlaylist.value = getPreferenceString("selectedPlaylist" + hashCode(authApiUrl()));
+    window.addEventListener("keydown", handleKeyDown);
+    window.blur();
+});
+
+onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+});
 </script>
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index e3ff1f09..67226f14 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -54,158 +54,164 @@
     </LoadingIndicatorPage>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, onActivated, onDeactivated } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import ErrorHandler from "./ErrorHandler.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import CollapsableText from "./CollapsableText.vue";
 import VideoItem from "./VideoItem.vue";
 import WatchOnButton from "./WatchOnButton.vue";
+import { fetchJson, authApiUrl, getAuthToken, isAuthenticated } from "@/composables/useApi.js";
+import { getPlaylists } from "@/composables/usePlaylists.js";
+import { getPlaylist } from "@/composables/usePlaylists.js";
+import { updateWatched, download } from "@/composables/useMisc.js";
+import { fetchDeArrowContent } from "@/composables/useSubscriptions.js";
+import { timeFormat } from "@/composables/useFormatting.js";
 
-export default {
-    components: {
-        ErrorHandler,
-        VideoItem,
-        WatchOnButton,
-        LoadingIndicatorPage,
-        CollapsableText,
-    },
-    data() {
-        return {
-            playlist: null,
-            totalDuration: 0,
-            admin: false,
-            isBookmarked: false,
-        };
-    },
-    computed: {
-        getRssUrl: _this => {
-            return _this.authApiUrl() + "/rss/playlists/" + _this.$route.query.list;
-        },
-        isPipedPlaylist: _this => {
-            // regex to determine whether it's a Piped plalylist
-            return /[\da-fA-F]{8}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{12}/.test(
-                _this.$route.query.list,
-            );
-        },
-    },
-    mounted() {
-        const playlistId = this.$route.query.list;
-        if (this.authenticated && playlistId?.length == 36)
-            this.getPlaylists().then(json => {
-                if (json.error) alert(json.error);
-                else if (json.some(playlist => playlist.id === playlistId)) this.admin = true;
-            });
-        else if (playlistId.startsWith("local")) this.admin = true;
-        this.isPlaylistBookmarked();
-    },
-    activated() {
-        this.getPlaylistData();
-        window.addEventListener("scroll", this.handleScroll);
-        if (this.playlist) this.updateTitle();
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        async getPlaylistData() {
-            this.getPlaylist(this.$route.query.list)
-                .then(data => (this.playlist = data))
-                .then(() => {
-                    this.updateTitle();
-                    this.updateTotalDuration();
-                    this.updateWatched(this.playlist.relatedStreams);
-                    this.fetchDeArrowContent(this.playlist.relatedStreams);
-                });
-        },
-        async updateTitle() {
-            document.title = this.playlist.name + " - Piped";
-        },
-        handleScroll() {
-            if (this.loading || !this.playlist || !this.playlist.nextpage) return;
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-                this.loading = true;
-                this.fetchJson(this.authApiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
-                    nextpage: this.playlist.nextpage,
-                }).then(json => {
-                    this.playlist.nextpage = json.nextpage;
-                    this.loading = false;
-                    this.playlist.relatedStreams.push(...json.relatedStreams);
-                    this.updateTotalDuration();
-                    this.fetchDeArrowContent(json.relatedStreams);
-                });
-            }
-        },
-        removeVideo(index) {
-            this.playlist.relatedStreams.splice(index, 1);
-        },
-        updateTotalDuration() {
-            this.totalDuration = this.playlist.relatedStreams.map(video => video.duration).reduce((a, b) => a + b);
-        },
-        async clonePlaylist() {
-            this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
-                method: "POST",
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-                body: JSON.stringify({
-                    playlistId: this.$route.query.list,
-                }),
-            }).then(resp => {
-                if (!resp.error) {
-                    alert(this.$t("actions.clone_playlist_success"));
-                } else alert(resp.error);
-            });
-        },
-        downloadPlaylistAsTxt() {
-            const data = this.playlist.relatedStreams
-                .map(video => {
-                    return "https://piped.video" + video.url;
-                })
-                .join("\n");
-            this.download(data, this.playlist.name + ".txt", "text/plain");
-        },
-        async bookmarkPlaylist() {
-            if (!this.playlist) return;
+const route = useRoute();
+const { t } = useI18n();
 
-            if (this.isBookmarked) {
-                this.removePlaylistBookmark();
-                return;
-            }
+const playlist = ref(null);
+const totalDuration = ref(0);
+const admin = ref(false);
+const isBookmarked = ref(false);
+let loading = false;
 
-            if (window.db) {
-                const playlistId = this.$route.query.list;
-                var tx = window.db.transaction("playlist_bookmarks", "readwrite");
-                var store = tx.objectStore("playlist_bookmarks");
-                store.put({
-                    playlistId: playlistId,
-                    name: this.playlist.name,
-                    uploader: this.playlist.uploader,
-                    uploaderUrl: this.playlist.uploaderUrl,
-                    thumbnail: this.playlist.thumbnailUrl,
-                    uploaderAvatar: this.playlist.uploaderAvatar,
-                    videos: this.playlist.videos,
-                });
-                this.isBookmarked = true;
-            }
+const getRssUrl = computed(() => {
+    return authApiUrl() + "/rss/playlists/" + route.query.list;
+});
+
+const isPipedPlaylist = computed(() => {
+    return /[\da-fA-F]{8}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{4}-[\da-fA-F]{12}/.test(route.query.list);
+});
+
+function updateTitle() {
+    document.title = playlist.value.name + " - Piped";
+}
+
+function updateTotalDuration() {
+    totalDuration.value = playlist.value.relatedStreams.map(video => video.duration).reduce((a, b) => a + b);
+}
+
+async function getPlaylistData() {
+    getPlaylist(route.query.list)
+        .then(data => (playlist.value = data))
+        .then(() => {
+            updateTitle();
+            updateTotalDuration();
+            updateWatched(playlist.value.relatedStreams);
+            fetchDeArrowContent(playlist.value.relatedStreams);
+        });
+}
+
+function handleScroll() {
+    if (loading || !playlist.value || !playlist.value.nextpage) return;
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        loading = true;
+        fetchJson(authApiUrl() + "/nextpage/playlists/" + route.query.list, {
+            nextpage: playlist.value.nextpage,
+        }).then(json => {
+            playlist.value.nextpage = json.nextpage;
+            loading = false;
+            playlist.value.relatedStreams.push(...json.relatedStreams);
+            updateTotalDuration();
+            fetchDeArrowContent(json.relatedStreams);
+        });
+    }
+}
+
+function removeVideo(index) {
+    playlist.value.relatedStreams.splice(index, 1);
+}
+
+async function clonePlaylist() {
+    fetchJson(authApiUrl() + "/import/playlist", null, {
+        method: "POST",
+        headers: {
+            Authorization: getAuthToken(),
         },
-        async removePlaylistBookmark() {
-            var tx = window.db.transaction("playlist_bookmarks", "readwrite");
-            var store = tx.objectStore("playlist_bookmarks");
-            store.delete(this.$route.query.list);
-            this.isBookmarked = false;
-        },
-        async isPlaylistBookmarked() {
-            // needed in order to change the is bookmarked var later
-            const App = this;
-            const playlistId = this.$route.query.list;
-            var tx = window.db.transaction("playlist_bookmarks", "readwrite");
-            var store = tx.objectStore("playlist_bookmarks");
-            var req = store.openCursor(playlistId);
-            req.onsuccess = function (e) {
-                var cursor = e.target.result;
-                App.isBookmarked = cursor ? true : false;
-            };
-        },
-    },
-};
+        body: JSON.stringify({
+            playlistId: route.query.list,
+        }),
+    }).then(resp => {
+        if (!resp.error) {
+            alert(t("actions.clone_playlist_success"));
+        } else alert(resp.error);
+    });
+}
+
+function downloadPlaylistAsTxt() {
+    const data = playlist.value.relatedStreams
+        .map(video => {
+            return "https://piped.video" + video.url;
+        })
+        .join("\n");
+    download(data, playlist.value.name + ".txt", "text/plain");
+}
+
+async function bookmarkPlaylist() {
+    if (!playlist.value) return;
+
+    if (isBookmarked.value) {
+        removePlaylistBookmark();
+        return;
+    }
+
+    if (window.db) {
+        const playlistId = route.query.list;
+        var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+        var store = tx.objectStore("playlist_bookmarks");
+        store.put({
+            playlistId: playlistId,
+            name: playlist.value.name,
+            uploader: playlist.value.uploader,
+            uploaderUrl: playlist.value.uploaderUrl,
+            thumbnail: playlist.value.thumbnailUrl,
+            uploaderAvatar: playlist.value.uploaderAvatar,
+            videos: playlist.value.videos,
+        });
+        isBookmarked.value = true;
+    }
+}
+
+async function removePlaylistBookmark() {
+    var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+    var store = tx.objectStore("playlist_bookmarks");
+    store.delete(route.query.list);
+    isBookmarked.value = false;
+}
+
+async function checkPlaylistBookmarked() {
+    const playlistId = route.query.list;
+    var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+    var store = tx.objectStore("playlist_bookmarks");
+    var req = store.openCursor(playlistId);
+    req.onsuccess = function (e) {
+        var cursor = e.target.result;
+        isBookmarked.value = cursor ? true : false;
+    };
+}
+
+onMounted(() => {
+    const playlistId = route.query.list;
+    if (isAuthenticated() && playlistId?.length == 36)
+        getPlaylists().then(json => {
+            if (json.error) alert(json.error);
+            else if (json.some(pl => pl.id === playlistId)) admin.value = true;
+        });
+    else if (playlistId.startsWith("local")) admin.value = true;
+    checkPlaylistBookmarked();
+});
+
+onActivated(() => {
+    getPlaylistData();
+    window.addEventListener("scroll", handleScroll);
+    if (playlist.value) updateTitle();
+});
+
+onDeactivated(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
 </script>
diff --git a/src/components/PlaylistVideos.vue b/src/components/PlaylistVideos.vue
index ab3ff38c..faf30d92 100644
--- a/src/components/PlaylistVideos.vue
+++ b/src/components/PlaylistVideos.vue
@@ -58,52 +58,52 @@
     </div>
 </template>
 
-<script>
-import { nextTick } from "vue";
+<script setup>
+import { ref, watch, onMounted, nextTick } from "vue";
 import VideoThumbnail from "./VideoThumbnail.vue";
-export default {
-    components: { VideoThumbnail },
-    props: {
-        playlist: {
-            type: Object,
-            required: true,
-        },
-        playlistId: {
-            type: String,
-            required: true,
-        },
-        selectedIndex: {
-            type: Number,
-            required: true,
-        },
-        preferListen: {
-            type: Boolean,
-            default: false,
-        },
+import { updateWatched } from "@/composables/useMisc.js";
+
+const props = defineProps({
+    playlist: {
+        type: Object,
+        required: true,
     },
-    watch: {
-        playlist: {
-            handler() {
-                if (this.selectedIndex - 1 < this.playlist.relatedStreams.length)
-                    nextTick(() => {
-                        this.updateScroll();
-                    });
-            },
-            deep: true,
-        },
+    playlistId: {
+        type: String,
+        required: true,
     },
-    mounted() {
-        this.updateScroll();
-        this.updateWatched(this.playlist.relatedStreams);
+    selectedIndex: {
+        type: Number,
+        required: true,
     },
-    methods: {
-        updateScroll() {
-            const elems = Array.from(this.$refs.scrollable.children).filter(elm => elm.matches("div"));
-            const index = this.selectedIndex - 1;
-            if (index < elems.length)
-                this.$refs.scrollable.scrollTop =
-                    elems[this.selectedIndex - 1].offsetTop - this.$refs.scrollable.offsetTop;
-        },
+    preferListen: {
+        type: Boolean,
+        default: false,
     },
-};
+});
+
+const scrollable = ref(null);
+
+watch(
+    () => props.playlist,
+    () => {
+        if (props.selectedIndex - 1 < props.playlist.relatedStreams.length)
+            nextTick(() => {
+                updateScroll();
+            });
+    },
+    { deep: true },
+);
+
+function updateScroll() {
+    const elems = Array.from(scrollable.value.children).filter(elm => elm.matches("div"));
+    const index = props.selectedIndex - 1;
+    if (index < elems.length)
+        scrollable.value.scrollTop = elems[props.selectedIndex - 1].offsetTop - scrollable.value.offsetTop;
+}
+
+onMounted(() => {
+    updateScroll();
+    updateWatched(props.playlist.relatedStreams);
+});
 </script>
diff --git a/src/components/PlaylistsPage.vue b/src/components/PlaylistsPage.vue
index 7254e97a..bdabe7a7 100644
--- a/src/components/PlaylistsPage.vue
+++ b/src/components/PlaylistsPage.vue
@@ -99,164 +99,174 @@
     />
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onActivated } from "vue";
+import { useI18n } from "vue-i18n";
 import ConfirmModal from "./ConfirmModal.vue";
 import ModalComponent from "./ModalComponent.vue";
 import CreatePlaylistModal from "./CreatePlaylistModal.vue";
+import {
+    getPlaylists,
+    getPlaylist,
+    createPlaylist,
+    deletePlaylist,
+    renamePlaylist,
+    changePlaylistDescription,
+    addVideosToPlaylist,
+} from "@/composables/usePlaylists.js";
+import { download } from "@/composables/useMisc.js";
 
-export default {
-    components: { ConfirmModal, ModalComponent, CreatePlaylistModal },
-    data() {
-        return {
-            playlists: [],
-            bookmarks: [],
-            playlistToDelete: null,
-            playlistToEdit: null,
-            newPlaylistName: "",
-            newPlaylistDescription: "",
-            showCreatePlaylistModal: false,
+const { t } = useI18n();
+
+const fileSelector = ref(null);
+const playlists = ref([]);
+const bookmarks = ref([]);
+const playlistToDelete = ref(null);
+const playlistToEdit = ref(null);
+const newPlaylistName = ref("");
+const newPlaylistDescription = ref("");
+const showCreatePlaylistModal = ref(false);
+
+function fetchPlaylistsList() {
+    getPlaylists().then(json => {
+        playlists.value = json;
+    });
+}
+
+function showPlaylistEditModal(playlist) {
+    newPlaylistName.value = playlist.name;
+    newPlaylistDescription.value = playlist.description;
+    playlistToEdit.value = playlist.id;
+}
+
+function editPlaylist(selectedPlaylist) {
+    const newName = newPlaylistName.value;
+    const newDescription = newPlaylistDescription.value;
+    if (newName != selectedPlaylist.name) {
+        renamePlaylist(selectedPlaylist.id, newName).then(json => {
+            if (json.error) alert(json.error);
+            else selectedPlaylist.name = newName;
+        });
+    }
+    if (newDescription != selectedPlaylist.description) {
+        changePlaylistDescription(selectedPlaylist.id, newDescription).then(json => {
+            if (json.error) alert(json.error);
+            else selectedPlaylist.description = newDescription;
+        });
+    }
+    playlistToEdit.value = null;
+}
+
+function onDeletePlaylist(id) {
+    deletePlaylist(id).then(json => {
+        if (json.error) alert(json.error);
+        else playlists.value = playlists.value.filter(playlist => playlist.id !== id);
+    });
+    playlistToDelete.value = null;
+}
+
+async function exportPlaylists() {
+    if (!playlists.value) return;
+    let json = {
+        format: "Piped",
+        version: 1,
+        playlists: [],
+    };
+    let tasks = playlists.value.map(playlist => fetchPlaylistJson(playlist.id));
+    json.playlists = await Promise.all(tasks);
+    download(JSON.stringify(json), "playlists.json", "application/json");
+}
+
+async function fetchPlaylistJson(playlistId) {
+    let playlist = await getPlaylist(playlistId);
+    return {
+        name: playlist.name,
+        type: "playlist",
+        visibility: "private",
+        videos: playlist.relatedStreams.map(stream => "https://youtube.com" + stream.url),
+    };
+}
+
+async function importPlaylists() {
+    const files = fileSelector.value.files;
+    for (let file of files) {
+        await importPlaylistFile(file);
+    }
+    window.location.reload();
+}
+
+async function importPlaylistFile(file) {
+    let text = (await file.text()).trim();
+    let tasks = [];
+    if (file.name.slice(-4).toLowerCase() == ".csv") {
+        const lines = text.split("\n");
+
+        const playlistInfo = lines[1].split(",");
+        let videoListStartIndex = 0;
+        let playlistName = null;
+        if (playlistInfo.length > 2) {
+            playlistName = playlistInfo[4];
+            videoListStartIndex = 4;
+        }
+
+        const playlist = {
+            name: playlistName ?? file.name.replace(".csv", ""),
+            videos: lines
+                .slice(videoListStartIndex, lines.length)
+                .filter(line => line != "")
+                .slice(1)
+                .map(line => `https://youtube.com/watch?v=${line.split(",")[0]}`),
         };
-    },
-    mounted() {
-        this.fetchPlaylists();
-        this.loadPlaylistBookmarks();
-    },
-    activated() {
-        document.title = this.$t("titles.playlists") + " - Piped";
-    },
-    methods: {
-        fetchPlaylists() {
-            this.getPlaylists().then(json => {
-                this.playlists = json;
-            });
-        },
-        showPlaylistEditModal(playlist) {
-            this.newPlaylistName = playlist.name;
-            this.newPlaylistDescription = playlist.description;
-            this.playlistToEdit = playlist.id;
-        },
-        editPlaylist(selectedPlaylist) {
-            // save the new name and description since they could be overwritten during the http request
-            const newName = this.newPlaylistName;
-            const newDescription = this.newPlaylistDescription;
-            if (newName != selectedPlaylist.name) {
-                this.renamePlaylist(selectedPlaylist.id, newName).then(json => {
-                    if (json.error) alert(json.error);
-                    else selectedPlaylist.name = newName;
-                });
-            }
-            if (newDescription != selectedPlaylist.description) {
-                this.changePlaylistDescription(selectedPlaylist.id, newDescription).then(json => {
-                    if (json.error) alert(json.error);
-                    else selectedPlaylist.description = newDescription;
-                });
-            }
-            this.playlistToEdit = null;
-        },
-        onDeletePlaylist(id) {
-            this.deletePlaylist(id).then(json => {
-                if (json.error) alert(json.error);
-                else this.playlists = this.playlists.filter(playlist => playlist.id !== id);
-            });
-            this.playlistToDelete = null;
-        },
-        async exportPlaylists() {
-            if (!this.playlists) return;
-            let json = {
-                format: "Piped",
-                version: 1,
-                playlists: [],
-            };
-            let tasks = this.playlists.map(playlist => this.fetchPlaylistJson(playlist.id));
-            json.playlists = await Promise.all(tasks);
-            this.download(JSON.stringify(json), "playlists.json", "application/json");
-        },
-        async fetchPlaylistJson(playlistId) {
-            let playlist = await this.getPlaylist(playlistId);
-            return {
-                name: playlist.name,
-                // possible other types: history, watch later, ...
-                type: "playlist",
-                // as Invidious supports public and private playlists
-                visibility: "private",
-                // list of the videos, starting with "https://youtube.com" to clarify that those are YT videos
-                videos: playlist.relatedStreams.map(stream => "https://youtube.com" + stream.url),
-            };
-        },
-        async importPlaylists() {
-            const files = this.$refs.fileSelector.files;
-            for (let file of files) {
-                await this.importPlaylistFile(file);
-            }
-            window.location.reload();
-        },
-        async importPlaylistFile(file) {
-            let text = (await file.text()).trim();
-            let tasks = [];
-            // list of playlists exported from Piped
-            if (file.name.slice(-4).toLowerCase() == ".csv") {
-                const lines = text.split("\n");
+        tasks.push(createPlaylistWithVideos(playlist));
+    } else if (text.includes('"Piped"')) {
+        let parsedPlaylists = JSON.parse(text).playlists;
+        if (!parsedPlaylists.length) {
+            alert(t("actions.no_valid_playlists"));
+            return;
+        }
+        for (let playlist of parsedPlaylists) {
+            tasks.push(createPlaylistWithVideos(playlist));
+        }
+    } else {
+        alert(t("actions.no_valid_playlists"));
+        return;
+    }
+    await Promise.all(tasks);
+}
 
-                // old format: first two lines contain playlist info (e.g. name) in CSV format
-                // new format: no information about playlist like name, ...
-                // video list has two columns: videoId and date of addition
-                const playlistInfo = lines[1].split(",");
-                let videoListStartIndex = 0;
-                let playlistName = null;
-                if (playlistInfo.length > 2) {
-                    playlistName = playlistInfo[4];
-                    videoListStartIndex = 4;
-                }
+async function createPlaylistWithVideos(playlist) {
+    let newPlaylist = await createPlaylist(playlist.name);
+    let videoIds = playlist.videos.map(url => url.substr(-11));
+    await addVideosToPlaylist(newPlaylist.playlistId, videoIds);
+}
 
-                const playlist = {
-                    name: playlistName ?? file.name.replace(".csv", ""),
-                    videos: lines
-                        .slice(videoListStartIndex, lines.length)
-                        .filter(line => line != "")
-                        .slice(1)
-                        .map(line => `https://youtube.com/watch?v=${line.split(",")[0]}`),
-                };
-                tasks.push(this.createPlaylistWithVideos(playlist));
-            } else if (text.includes('"Piped"')) {
-                // CSV from Google Takeout
-                let playlists = JSON.parse(text).playlists;
-                if (!playlists.length) {
-                    alert(this.$t("actions.no_valid_playlists"));
-                    return;
-                }
-                for (let playlist of playlists) {
-                    tasks.push(this.createPlaylistWithVideos(playlist));
-                }
-            } else {
-                alert(this.$t("actions.no_valid_playlists"));
-                return;
-            }
-            await Promise.all(tasks);
-        },
-        async createPlaylistWithVideos(playlist) {
-            let newPlaylist = await this.createPlaylist(playlist.name);
-            let videoIds = playlist.videos.map(url => url.substr(-11));
-            await this.addVideosToPlaylist(newPlaylist.playlistId, videoIds);
-        },
-        async loadPlaylistBookmarks() {
-            if (!window.db) return;
-            var tx = window.db.transaction("playlist_bookmarks", "readonly");
-            var store = tx.objectStore("playlist_bookmarks");
-            const cursorRequest = store.openCursor();
-            cursorRequest.onsuccess = e => {
-                const cursor = e.target.result;
-                if (cursor) {
-                    this.bookmarks.push(cursor.value);
-                    cursor.continue();
-                }
-            };
-        },
-        async removeBookmark(index) {
-            var tx = window.db.transaction("playlist_bookmarks", "readwrite");
-            var store = tx.objectStore("playlist_bookmarks");
-            store.delete(this.bookmarks[index].playlistId);
-            this.bookmarks.splice(index, 1);
-        },
-    },
-};
+async function loadPlaylistBookmarks() {
+    if (!window.db) return;
+    var tx = window.db.transaction("playlist_bookmarks", "readonly");
+    var store = tx.objectStore("playlist_bookmarks");
+    const cursorRequest = store.openCursor();
+    cursorRequest.onsuccess = e => {
+        const cursor = e.target.result;
+        if (cursor) {
+            bookmarks.value.push(cursor.value);
+            cursor.continue();
+        }
+    };
+}
+
+async function removeBookmark(index) {
+    var tx = window.db.transaction("playlist_bookmarks", "readwrite");
+    var store = tx.objectStore("playlist_bookmarks");
+    store.delete(bookmarks.value[index].playlistId);
+    bookmarks.value.splice(index, 1);
+}
+
+onMounted(() => {
+    fetchPlaylistsList();
+    loadPlaylistBookmarks();
+});
+
+onActivated(() => {
+    document.title = t("titles.playlists") + " - Piped";
+});
 </script>
diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index eae7f63c..fa0d4fb5 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -388,7 +388,7 @@
     <button v-t="'actions.reset_preferences'" class="btn" @click="showConfirmResetPrefsDialog = true" />
     <button v-t="'actions.backup_preferences'" class="btn mx-4" @click="backupPreferences()" />
     <label v-t="'actions.restore_preferences'" for="fileSelector" class="btn" @click="restorePreferences()" />
-    <input id="fileSelector" ref="fileSelector" class="hidden" type="file" @change="restorePreferences()" />
+    <input id="fileSelector" ref="fileSelectorEl" class="hidden" type="file" @change="restorePreferences()" />
     <ConfirmModal
         v-if="showConfirmResetPrefsDialog"
         :message="$t('actions.confirm_reset_preferences')"
@@ -404,325 +404,341 @@
     />
 </template>
 
-<script>
-import CountryMap from "@/utils/CountryMaps/en.json";
+<script setup>
+import { ref, computed, onMounted, onActivated } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import CountryMapDefault from "@/utils/CountryMaps/en.json";
 import ConfirmModal from "./ConfirmModal.vue";
 import CustomInstanceModal from "./CustomInstanceModal.vue";
-export default {
-    components: {
-        ConfirmModal,
-        CustomInstanceModal,
-    },
-    data() {
-        return {
-            mobileChapterLayout: "Vertical",
-            selectedInstance: null,
-            authInstance: false,
-            selectedAuthInstance: null,
-            customInstances: [],
-            publicInstances: [],
-            sponsorBlock: true,
-            skipOptions: new Map([
-                ["sponsor", { value: "auto", label: "actions.skip_sponsors" }],
-                ["intro", { value: "no", label: "actions.skip_intro" }],
-                ["outro", { value: "no", label: "actions.skip_outro" }],
-                ["preview", { value: "no", label: "actions.skip_preview" }],
-                ["interaction", { value: "auto", label: "actions.skip_interaction" }],
-                ["selfpromo", { value: "auto", label: "actions.skip_self_promo" }],
-                ["music_offtopic", { value: "auto", label: "actions.skip_non_music" }],
-                ["poi_highlight", { value: "no", label: "actions.skip_highlight" }],
-                ["filler", { value: "no", label: "actions.skip_filler_tangent" }],
-            ]),
-            showMarkers: true,
-            minSegmentLength: 0,
-            dearrow: false,
-            selectedTheme: "dark",
-            autoPlayVideo: true,
-            autoDisplayCaptions: false,
-            autoPlayNextCountdown: 5,
-            listen: false,
-            resolutions: [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320],
-            preferHls: false,
-            defaultQuality: 0,
-            bufferingGoal: 10,
-            countryMap: CountryMap,
-            countrySelected: "US",
-            defaultHomepage: "trending",
-            minimizeComments: false,
-            minimizeDescription: true,
-            minimizeRecommendations: false,
-            minimizeChapters: false,
-            showWatchOnYouTube: false,
-            searchSuggestions: true,
-            watchHistory: false,
-            searchHistory: false,
-            hideWatched: false,
-            selectedLanguage: "en",
-            languages: [
-                { code: "ar", name: "Arabic" },
-                { code: "az", name: "Azərbaycan" },
-                { code: "bg", name: "Български" },
-                { code: "bn", name: "বাংলা" },
-                { code: "bs", name: "Bosanski" },
-                { code: "ca", name: "Català" },
-                { code: "cs", name: "Čeština" },
-                { code: "da", name: "Dansk" },
-                { code: "de", name: "Deutsch" },
-                { code: "el", name: "Ελληνικά" },
-                { code: "es", name: "Español" },
-                { code: "en", name: "English" },
-                { code: "eo", name: "Esperanto" },
-                { code: "et", name: "Eesti" },
-                { code: "fa", name: "فارسی" },
-                { code: "fi", name: "Suomi" },
-                { code: "fr", name: "Français" },
-                { code: "he", name: "עברית" },
-                { code: "hi", name: "हिंदी" },
-                { code: "id", name: "Indonesia" },
-                { code: "is", name: "Íslenska" },
-                { code: "kab", name: "Taqbaylit" },
-                { code: "hr", name: "Hrvatski" },
-                { code: "it", name: "Italiano" },
-                { code: "ja", name: "日本語" },
-                { code: "ko", name: "한국어" },
-                { code: "lt", name: "Lietuvių kalba" },
-                { code: "ml", name: "മലയാളം" },
-                { code: "nb_NO", name: "Norwegian Bokmål" },
-                { code: "nl", name: "Nederlands" },
-                { code: "oc", name: "Occitan" },
-                { code: "or", name: "ଓଡ଼ିଆ" },
-                { code: "pl", name: "Polski" },
-                { code: "pt", name: "Português" },
-                { code: "pt_PT", name: "Português (Portugal)" },
-                { code: "pt_BR", name: "Português (Brasil)" },
-                { code: "ro", name: "Română" },
-                { code: "ru", name: "Русский" },
-                { code: "si", name: "සිංහල" },
-                { code: "sl", name: "Slovenian" },
-                { code: "sr", name: "Српски" },
-                { code: "sv", name: "Svenska" },
-                { code: "ta", name: "தமிழ்" },
-                { code: "th", name: "ไทย" },
-                { code: "tr", name: "Türkçe" },
-                { code: "uk", name: "Українська" },
-                { code: "vi", name: "Tiếng Việt" },
-                { code: "zh_Hant", name: "繁體中文" },
-                { code: "zh_Hans", name: "简体中文" },
-            ],
-            enabledCodecs: ["vp9", "avc"],
-            disableLBRY: false,
-            proxyLBRY: false,
-            prefetchLimit: 2,
-            password: null,
-            showConfirmResetPrefsDialog: false,
-            showCustomInstancesModal: false,
-        };
-    },
-    computed: {
-        instances() {
-            return [...this.publicInstances, ...this.customInstances];
-        },
-    },
-    activated() {
-        document.title = this.$t("titles.preferences") + " - Piped";
-    },
-    async mounted() {
-        if (Object.keys(this.$route.query).length > 0) this.$router.replace({ query: {} });
+import {
+    testLocalStorage,
+    getPreferenceString,
+    getPreferenceBoolean,
+    getPreferenceNumber,
+    getPreferenceJSON,
+} from "@/composables/usePreferences";
+import { fetchJson, apiUrl, authApiUrl, getAuthToken, hashCode, isAuthenticated } from "@/composables/useApi";
+import { getCustomInstances } from "@/composables/useCustomInstances";
+import { download } from "@/composables/useMisc";
+import { getDefaultLanguage } from "@/composables/useFormatting";
 
-        this.fetchInstances();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 
-        if (this.testLocalStorage) {
-            this.selectedInstance = this.getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
-            this.authInstance = this.getPreferenceBoolean("authInstance", false);
-            this.selectedAuthInstance = this.getPreferenceString("auth_instance_url", this.selectedInstance);
+const fileSelectorEl = ref(null);
 
-            this.sponsorBlock = this.getPreferenceBoolean("sponsorblock", true);
-            var skipOptions, skipList;
-            if ((skipOptions = this.getPreferenceJSON("skipOptions")) !== undefined) {
-                Object.entries(skipOptions).forEach(([key, value]) => {
-                    var opt = this.skipOptions.get(key);
-                    if (opt !== undefined) opt.value = value;
-                    else console.log("Unknown sponsor type: " + key);
-                });
-            } else if ((skipList = this.getPreferenceString("selectedSkip")) !== undefined) {
-                skipList = skipList.split(",");
-                this.skipOptions.forEach(opt => (opt.value = "no"));
-                skipList.forEach(skip => {
-                    var opt = this.skipOptions.get(skip);
-                    if (opt !== undefined) opt.value = "auto";
-                    else console.log("Unknown sponsor type: " + skip);
-                });
-            }
+const mobileChapterLayout = ref("Vertical");
+const selectedInstance = ref(null);
+const authInstance = ref(false);
+const selectedAuthInstance = ref(null);
+const customInstances = ref([]);
+const publicInstances = ref([]);
+const sponsorBlock = ref(true);
+const skipOptions = ref(
+    new Map([
+        ["sponsor", { value: "auto", label: "actions.skip_sponsors" }],
+        ["intro", { value: "no", label: "actions.skip_intro" }],
+        ["outro", { value: "no", label: "actions.skip_outro" }],
+        ["preview", { value: "no", label: "actions.skip_preview" }],
+        ["interaction", { value: "auto", label: "actions.skip_interaction" }],
+        ["selfpromo", { value: "auto", label: "actions.skip_self_promo" }],
+        ["music_offtopic", { value: "auto", label: "actions.skip_non_music" }],
+        ["poi_highlight", { value: "no", label: "actions.skip_highlight" }],
+        ["filler", { value: "no", label: "actions.skip_filler_tangent" }],
+    ]),
+);
+const showMarkers = ref(true);
+const minSegmentLength = ref(0);
+const dearrow = ref(false);
+const selectedTheme = ref("dark");
+const autoPlayVideo = ref(true);
+const autoDisplayCaptions = ref(false);
+const autoPlayNextCountdown = ref(5);
+const listen = ref(false);
+const resolutions = [144, 240, 360, 480, 720, 1080, 1440, 2160, 4320];
+const preferHls = ref(false);
+const defaultQuality = ref(0);
+const bufferingGoal = ref(10);
+const countryMap = ref(CountryMapDefault);
+const countrySelected = ref("US");
+const defaultHomepage = ref("trending");
+const minimizeComments = ref(false);
+const minimizeDescription = ref(true);
+const minimizeRecommendations = ref(false);
+const minimizeChapters = ref(false);
+const showWatchOnYouTube = ref(false);
+const searchSuggestions = ref(true);
+const watchHistory = ref(false);
+const searchHistory = ref(false);
+const hideWatched = ref(false);
+const selectedLanguage = ref("en");
+const languages = [
+    { code: "ar", name: "Arabic" },
+    { code: "az", name: "Azərbaycan" },
+    { code: "bg", name: "Български" },
+    { code: "bn", name: "বাংলা" },
+    { code: "bs", name: "Bosanski" },
+    { code: "ca", name: "Català" },
+    { code: "cs", name: "Čeština" },
+    { code: "da", name: "Dansk" },
+    { code: "de", name: "Deutsch" },
+    { code: "el", name: "Ελληνικά" },
+    { code: "es", name: "Español" },
+    { code: "en", name: "English" },
+    { code: "eo", name: "Esperanto" },
+    { code: "et", name: "Eesti" },
+    { code: "fa", name: "فارسی" },
+    { code: "fi", name: "Suomi" },
+    { code: "fr", name: "Français" },
+    { code: "he", name: "עברית" },
+    { code: "hi", name: "हिंदी" },
+    { code: "id", name: "Indonesia" },
+    { code: "is", name: "Íslenska" },
+    { code: "kab", name: "Taqbaylit" },
+    { code: "hr", name: "Hrvatski" },
+    { code: "it", name: "Italiano" },
+    { code: "ja", name: "日本語" },
+    { code: "ko", name: "한국어" },
+    { code: "lt", name: "Lietuvių kalba" },
+    { code: "ml", name: "മലയാളം" },
+    { code: "nb_NO", name: "Norwegian Bokmål" },
+    { code: "nl", name: "Nederlands" },
+    { code: "oc", name: "Occitan" },
+    { code: "or", name: "ଓଡ଼ିଆ" },
+    { code: "pl", name: "Polski" },
+    { code: "pt", name: "Português" },
+    { code: "pt_PT", name: "Português (Portugal)" },
+    { code: "pt_BR", name: "Português (Brasil)" },
+    { code: "ro", name: "Română" },
+    { code: "ru", name: "Русский" },
+    { code: "si", name: "සිංහල" },
+    { code: "sl", name: "Slovenian" },
+    { code: "sr", name: "Српски" },
+    { code: "sv", name: "Svenska" },
+    { code: "ta", name: "தமிழ்" },
+    { code: "th", name: "ไทย" },
+    { code: "tr", name: "Türkçe" },
+    { code: "uk", name: "Українська" },
+    { code: "vi", name: "Tiếng Việt" },
+    { code: "zh_Hant", name: "繁體中文" },
+    { code: "zh_Hans", name: "简体中文" },
+];
+const enabledCodecs = ref(["vp9", "avc"]);
+const disableLBRY = ref(false);
+const proxyLBRY = ref(false);
+const prefetchLimit = ref(2);
+const password = ref(null);
+const showConfirmResetPrefsDialog = ref(false);
+const showCustomInstancesModal = ref(false);
 
-            this.showMarkers = this.getPreferenceBoolean("showMarkers", true);
-            this.minSegmentLength = Math.max(this.getPreferenceNumber("minSegmentLength", 0), 0);
-            this.dearrow = this.getPreferenceBoolean("dearrow", false);
-            this.selectedTheme = this.getPreferenceString("theme", "dark");
-            this.autoPlayVideo = this.getPreferenceBoolean("playerAutoPlay", true);
-            this.autoDisplayCaptions = this.getPreferenceBoolean("autoDisplayCaptions", false);
-            this.autoPlayNextCountdown = this.getPreferenceNumber("autoPlayNextCountdown", 5);
-            this.listen = this.getPreferenceBoolean("listen", false);
-            this.defaultQuality = Number(localStorage.getItem("quality"));
-            this.bufferingGoal = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
-            this.countrySelected = this.getPreferenceString("region", "US");
-            this.defaultHomepage = this.getPreferenceString("homepage", "trending");
-            this.minimizeComments = this.getPreferenceBoolean("minimizeComments", false);
-            this.minimizeDescription = this.getPreferenceBoolean("minimizeDescription", true);
-            this.minimizeRecommendations = this.getPreferenceBoolean("minimizeRecommendations", false);
-            this.minimizeChapters = this.getPreferenceBoolean("minimizeChapters", false);
-            this.showWatchOnYouTube = this.getPreferenceBoolean("showWatchOnYouTube", false);
-            this.searchSuggestions = this.getPreferenceBoolean("searchSuggestions", true);
-            this.watchHistory = this.getPreferenceBoolean("watchHistory", false);
-            this.searchHistory = this.getPreferenceBoolean("searchHistory", false);
-            this.selectedLanguage = this.getPreferenceString("hl", await this.defaultLanguage);
-            this.enabledCodecs = this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
-            this.disableLBRY = this.getPreferenceBoolean("disableLBRY", false);
-            this.proxyLBRY = this.getPreferenceBoolean("proxyLBRY", false);
-            this.prefetchLimit = this.getPreferenceNumber("prefetchLimit", 2);
-            this.hideWatched = this.getPreferenceBoolean("hideWatched", false);
-            this.mobileChapterLayout = this.getPreferenceString("mobileChapterLayout", "Vertical");
-            if (this.selectedLanguage != "en") {
-                try {
-                    this.CountryMap = await import(`../utils/CountryMaps/${this.selectedLanguage}.json`).then(
-                        val => val.default,
-                    );
-                } catch (e) {
-                    console.error("Countries not translated into " + this.selectedLanguage);
-                }
+const authenticated = computed(() => isAuthenticated());
+const instances = computed(() => [...publicInstances.value, ...customInstances.value]);
+
+onActivated(() => {
+    document.title = t("titles.preferences") + " - Piped";
+});
+
+onMounted(async () => {
+    if (Object.keys(route.query).length > 0) router.replace({ query: {} });
+
+    fetchInstances();
+
+    if (testLocalStorage()) {
+        selectedInstance.value = getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
+        authInstance.value = getPreferenceBoolean("authInstance", false);
+        selectedAuthInstance.value = getPreferenceString("auth_instance_url", selectedInstance.value);
+
+        sponsorBlock.value = getPreferenceBoolean("sponsorblock", true);
+        var savedSkipOptions, skipList;
+        if ((savedSkipOptions = getPreferenceJSON("skipOptions")) !== undefined) {
+            Object.entries(savedSkipOptions).forEach(([key, value]) => {
+                var opt = skipOptions.value.get(key);
+                if (opt !== undefined) opt.value = value;
+                else console.log("Unknown sponsor type: " + key);
+            });
+        } else if ((skipList = getPreferenceString("selectedSkip")) !== undefined) {
+            skipList = skipList.split(",");
+            skipOptions.value.forEach(opt => (opt.value = "no"));
+            skipList.forEach(skip => {
+                var opt = skipOptions.value.get(skip);
+                if (opt !== undefined) opt.value = "auto";
+                else console.log("Unknown sponsor type: " + skip);
+            });
+        }
+
+        showMarkers.value = getPreferenceBoolean("showMarkers", true);
+        minSegmentLength.value = Math.max(getPreferenceNumber("minSegmentLength", 0), 0);
+        dearrow.value = getPreferenceBoolean("dearrow", false);
+        selectedTheme.value = getPreferenceString("theme", "dark");
+        autoPlayVideo.value = getPreferenceBoolean("playerAutoPlay", true);
+        autoDisplayCaptions.value = getPreferenceBoolean("autoDisplayCaptions", false);
+        autoPlayNextCountdown.value = getPreferenceNumber("autoPlayNextCountdown", 5);
+        listen.value = getPreferenceBoolean("listen", false);
+        defaultQuality.value = Number(localStorage.getItem("quality"));
+        bufferingGoal.value = Math.max(Number(localStorage.getItem("bufferGoal")), 10);
+        countrySelected.value = getPreferenceString("region", "US");
+        defaultHomepage.value = getPreferenceString("homepage", "trending");
+        minimizeComments.value = getPreferenceBoolean("minimizeComments", false);
+        minimizeDescription.value = getPreferenceBoolean("minimizeDescription", true);
+        minimizeRecommendations.value = getPreferenceBoolean("minimizeRecommendations", false);
+        minimizeChapters.value = getPreferenceBoolean("minimizeChapters", false);
+        showWatchOnYouTube.value = getPreferenceBoolean("showWatchOnYouTube", false);
+        searchSuggestions.value = getPreferenceBoolean("searchSuggestions", true);
+        watchHistory.value = getPreferenceBoolean("watchHistory", false);
+        searchHistory.value = getPreferenceBoolean("searchHistory", false);
+        selectedLanguage.value = getPreferenceString("hl", await getDefaultLanguage());
+        enabledCodecs.value = getPreferenceString("enabledCodecs", "vp9,avc").split(",");
+        disableLBRY.value = getPreferenceBoolean("disableLBRY", false);
+        proxyLBRY.value = getPreferenceBoolean("proxyLBRY", false);
+        prefetchLimit.value = getPreferenceNumber("prefetchLimit", 2);
+        hideWatched.value = getPreferenceBoolean("hideWatched", false);
+        mobileChapterLayout.value = getPreferenceString("mobileChapterLayout", "Vertical");
+        if (selectedLanguage.value != "en") {
+            try {
+                countryMap.value = await import(`../utils/CountryMaps/${selectedLanguage.value}.json`).then(
+                    val => val.default,
+                );
+            } catch (e) {
+                console.error("Countries not translated into " + selectedLanguage.value);
             }
         }
-    },
-    methods: {
-        async onChange() {
-            if (this.testLocalStorage) {
-                var shouldReload = false;
+    }
+});
 
-                if (
-                    this.getPreferenceString("theme", "dark") !== this.selectedTheme ||
-                    this.getPreferenceBoolean("watchHistory", false) != this.watchHistory ||
-                    this.getPreferenceString("hl", await this.defaultLanguage) !== this.selectedLanguage ||
-                    this.getPreferenceString("enabledCodecs", "vp9,avc") !== this.enabledCodecs.join(",")
-                )
-                    shouldReload = true;
+async function onChange() {
+    if (testLocalStorage()) {
+        var shouldReload = false;
 
-                localStorage.setItem("instance", this.selectedInstance);
-                localStorage.setItem("authInstance", this.authInstance);
-                localStorage.setItem("auth_instance_url", this.selectedAuthInstance);
-                localStorage.setItem("sponsorblock", this.sponsorBlock);
+        if (
+            getPreferenceString("theme", "dark") !== selectedTheme.value ||
+            getPreferenceBoolean("watchHistory", false) != watchHistory.value ||
+            getPreferenceString("hl", await getDefaultLanguage()) !== selectedLanguage.value ||
+            getPreferenceString("enabledCodecs", "vp9,avc") !== enabledCodecs.value.join(",")
+        )
+            shouldReload = true;
 
-                var skipOptions = {};
-                this.skipOptions.forEach((v, k) => (skipOptions[k] = v.value));
-                localStorage.setItem("skipOptions", JSON.stringify(skipOptions));
+        localStorage.setItem("instance", selectedInstance.value);
+        localStorage.setItem("authInstance", authInstance.value);
+        localStorage.setItem("auth_instance_url", selectedAuthInstance.value);
+        localStorage.setItem("sponsorblock", sponsorBlock.value);
 
-                localStorage.setItem("showMarkers", this.showMarkers);
-                localStorage.setItem("minSegmentLength", this.minSegmentLength);
+        var savedSkipObj = {};
+        skipOptions.value.forEach((v, k) => (savedSkipObj[k] = v.value));
+        localStorage.setItem("skipOptions", JSON.stringify(savedSkipObj));
 
-                localStorage.setItem("dearrow", this.dearrow);
+        localStorage.setItem("showMarkers", showMarkers.value);
+        localStorage.setItem("minSegmentLength", minSegmentLength.value);
 
-                localStorage.setItem("theme", this.selectedTheme);
-                localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
-                localStorage.setItem("autoDisplayCaptions", this.autoDisplayCaptions);
-                localStorage.setItem("autoPlayNextCountdown", this.autoPlayNextCountdown);
-                localStorage.setItem("listen", this.listen);
-                localStorage.setItem("preferHls", this.preferHls);
-                localStorage.setItem("quality", this.defaultQuality);
-                localStorage.setItem("bufferGoal", this.bufferingGoal);
-                localStorage.setItem("region", this.countrySelected);
-                localStorage.setItem("homepage", this.defaultHomepage);
-                localStorage.setItem("minimizeComments", this.minimizeComments);
-                localStorage.setItem("minimizeDescription", this.minimizeDescription);
-                localStorage.setItem("minimizeRecommendations", this.minimizeRecommendations);
-                localStorage.setItem("minimizeChapters", this.minimizeChapters);
-                localStorage.setItem("showWatchOnYouTube", this.showWatchOnYouTube);
-                localStorage.setItem("searchSuggestions", this.searchSuggestions);
-                localStorage.setItem("watchHistory", this.watchHistory);
-                localStorage.setItem("searchHistory", this.searchHistory);
-                if (!this.searchHistory) localStorage.removeItem("search_history");
-                localStorage.setItem("hl", this.selectedLanguage);
-                localStorage.setItem("enabledCodecs", this.enabledCodecs.join(","));
-                localStorage.setItem("disableLBRY", this.disableLBRY);
-                localStorage.setItem("proxyLBRY", this.proxyLBRY);
-                localStorage.setItem("prefetchLimit", this.prefetchLimit);
-                localStorage.setItem("hideWatched", this.hideWatched);
-                localStorage.setItem("mobileChapterLayout", this.mobileChapterLayout);
+        localStorage.setItem("dearrow", dearrow.value);
 
-                if (shouldReload) window.location.reload();
-            }
-        },
-        async fetchInstances() {
-            this.customInstances = this.getCustomInstances();
+        localStorage.setItem("theme", selectedTheme.value);
+        localStorage.setItem("playerAutoPlay", autoPlayVideo.value);
+        localStorage.setItem("autoDisplayCaptions", autoDisplayCaptions.value);
+        localStorage.setItem("autoPlayNextCountdown", autoPlayNextCountdown.value);
+        localStorage.setItem("listen", listen.value);
+        localStorage.setItem("preferHls", preferHls.value);
+        localStorage.setItem("quality", defaultQuality.value);
+        localStorage.setItem("bufferGoal", bufferingGoal.value);
+        localStorage.setItem("region", countrySelected.value);
+        localStorage.setItem("homepage", defaultHomepage.value);
+        localStorage.setItem("minimizeComments", minimizeComments.value);
+        localStorage.setItem("minimizeDescription", minimizeDescription.value);
+        localStorage.setItem("minimizeRecommendations", minimizeRecommendations.value);
+        localStorage.setItem("minimizeChapters", minimizeChapters.value);
+        localStorage.setItem("showWatchOnYouTube", showWatchOnYouTube.value);
+        localStorage.setItem("searchSuggestions", searchSuggestions.value);
+        localStorage.setItem("watchHistory", watchHistory.value);
+        localStorage.setItem("searchHistory", searchHistory.value);
+        if (!searchHistory.value) localStorage.removeItem("search_history");
+        localStorage.setItem("hl", selectedLanguage.value);
+        localStorage.setItem("enabledCodecs", enabledCodecs.value.join(","));
+        localStorage.setItem("disableLBRY", disableLBRY.value);
+        localStorage.setItem("proxyLBRY", proxyLBRY.value);
+        localStorage.setItem("prefetchLimit", prefetchLimit.value);
+        localStorage.setItem("hideWatched", hideWatched.value);
+        localStorage.setItem("mobileChapterLayout", mobileChapterLayout.value);
 
-            this.fetchJson(import.meta.env.VITE_PIPED_INSTANCES).then(resp => {
-                this.publicInstances = resp;
-                if (!this.publicInstances.some(instance => instance.api_url == this.apiUrl()))
-                    this.publicInstances.push({
-                        name: "Selected Instance",
-                        api_url: this.apiUrl(),
-                        locations: "Unknown",
-                        cdn: false,
-                        uptime_30d: 100,
-                    });
+        if (shouldReload) window.location.reload();
+    }
+}
+
+async function fetchInstances() {
+    customInstances.value = getCustomInstances();
+
+    fetchJson(import.meta.env.VITE_PIPED_INSTANCES).then(resp => {
+        publicInstances.value = resp;
+        if (!publicInstances.value.some(instance => instance.api_url == apiUrl()))
+            publicInstances.value.push({
+                name: "Selected Instance",
+                api_url: apiUrl(),
+                locations: "Unknown",
+                cdn: false,
+                uptime_30d: 100,
             });
+    });
+}
+
+function sslScore(url) {
+    return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
+}
+
+async function deleteAccount() {
+    fetchJson(authApiUrl() + "/user/delete", null, {
+        method: "POST",
+        headers: {
+            Authorization: getAuthToken(),
         },
-        sslScore(url) {
-            return "https://www.ssllabs.com/ssltest/analyze.html?d=" + new URL(url).host + "&latest";
+        body: JSON.stringify({
+            password: password.value,
+        }),
+    }).then(resp => {
+        if (!resp.error) {
+            logout();
+        } else alert(resp.error);
+    });
+}
+
+function logout() {
+    localStorage.removeItem("authToken" + hashCode(authApiUrl()));
+    window.location = import.meta.env.BASE_URL;
+}
+
+function resetPreferences() {
+    showConfirmResetPrefsDialog.value = false;
+    localStorage.clear();
+    window.location = import.meta.env.BASE_URL;
+}
+
+async function invalidateSession() {
+    fetchJson(authApiUrl() + "/logout", null, {
+        method: "POST",
+        headers: {
+            Authorization: getAuthToken(),
         },
-        async deleteAccount() {
-            this.fetchJson(this.authApiUrl() + "/user/delete", null, {
-                method: "POST",
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-                body: JSON.stringify({
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (!resp.error) {
-                    this.logout();
-                } else alert(resp.error);
-            });
-        },
-        logout() {
-            // reset the auth token
-            localStorage.removeItem("authToken" + this.hashCode(this.authApiUrl()));
-            // redirect to trending page
-            window.location = import.meta.env.BASE_URL;
-        },
-        resetPreferences() {
-            this.showConfirmResetPrefsDialog = false;
-            // clear the local storage
-            localStorage.clear();
-            // redirect to the home page
-            window.location = import.meta.env.BASE_URL;
-        },
-        async invalidateSession() {
-            this.fetchJson(this.authApiUrl() + "/logout", null, {
-                method: "POST",
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-            }).then(resp => {
-                if (!resp.error) {
-                    this.logout();
-                } else alert(resp.error);
-            });
-        },
-        backupPreferences() {
-            const data = JSON.stringify(localStorage);
-            this.download(data, "preferences.json", "application/json");
-        },
-        restorePreferences() {
-            var file = this.$refs.fileSelector.files[0];
-            file.text().then(text => {
-                const data = JSON.parse(text);
-                Object.keys(data).forEach(function (key) {
-                    localStorage.setItem(key, data[key]);
-                });
-                window.location.reload();
-            });
-        },
-    },
-};
+    }).then(resp => {
+        if (!resp.error) {
+            logout();
+        } else alert(resp.error);
+    });
+}
+
+function backupPreferences() {
+    const data = JSON.stringify(localStorage);
+    download(data, "preferences.json", "application/json");
+}
+
+function restorePreferences() {
+    var file = fileSelectorEl.value.files[0];
+    file.text().then(text => {
+        const data = JSON.parse(text);
+        Object.keys(data).forEach(function (key) {
+            localStorage.setItem(key, data[key]);
+        });
+        window.location.reload();
+    });
+}
 </script>
 
 <style>
diff --git a/src/components/QrCode.vue b/src/components/QrCode.vue
index 8bb2c6d8..ec1edf7f 100644
--- a/src/components/QrCode.vue
+++ b/src/components/QrCode.vue
@@ -1,30 +1,28 @@
 <template>
     <canvas ref="qrCodeCanvas" class="mx-auto my-2" />
 </template>
-<script>
+<script setup>
+import { ref, watch, onMounted } from "vue";
 import QRCode from "qrcode";
 
-export default {
-    props: {
-        text: {
-            type: String,
-            required: true,
-        },
+const props = defineProps({
+    text: {
+        type: String,
+        required: true,
     },
-    watch: {
-        text() {
-            this.generateQrCode();
-        },
-    },
-    mounted() {
-        this.generateQrCode();
-    },
-    methods: {
-        generateQrCode() {
-            QRCode.toCanvas(this.$refs.qrCodeCanvas, this.text, error => {
-                if (error) console.error(error);
-            });
-        },
-    },
-};
+});
+
+const qrCodeCanvas = ref(null);
+
+function generateQrCode() {
+    QRCode.toCanvas(qrCodeCanvas.value, props.text, error => {
+        if (error) console.error(error);
+    });
+}
+
+watch(() => props.text, generateQrCode);
+
+onMounted(() => {
+    generateQrCode();
+});
 </script>
diff --git a/src/components/RegisterPage.vue b/src/components/RegisterPage.vue
index 52139d1b..83ecdcdc 100644
--- a/src/components/RegisterPage.vue
+++ b/src/components/RegisterPage.vue
@@ -62,56 +62,58 @@
     />
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onActivated } from "vue";
+import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 import { isEmail } from "../utils/Misc.js";
 import ConfirmModal from "./ConfirmModal.vue";
+import { fetchJson, authApiUrl, getAuthToken, hashCode } from "@/composables/useApi.js";
+import { setPreference } from "@/composables/usePreferences.js";
 
-export default {
-    components: { ConfirmModal },
-    data() {
-        return {
-            username: null,
-            password: null,
-            passwordConfirm: null,
-            showPassword: false,
-            showConfirmPassword: false,
-            showUnsecureRegisterDialog: false,
-            forceUnsecureRegister: false,
-        };
-    },
-    mounted() {
-        //TODO: Add Server Side check
-        if (this.getAuthToken()) {
-            this.$router.push(import.meta.env.BASE_URL);
-        }
-    },
-    activated() {
-        document.title = "Register - Piped";
-    },
-    methods: {
-        register() {
-            if (!this.username || !this.password) return;
-            if (this.password != this.passwordConfirm) {
-                alert(this.$t("login.passwords_incorrect"));
-                return;
-            }
-            if (isEmail(this.username) && !this.forceUnsecureRegister) {
-                this.showUnsecureRegisterDialog = true;
-                return;
-            }
-            this.fetchJson(this.authApiUrl() + "/register", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    username: this.username,
-                    password: this.password,
-                }),
-            }).then(resp => {
-                if (resp.token) {
-                    this.setPreference("authToken" + this.hashCode(this.authApiUrl()), resp.token);
-                    window.location = import.meta.env.BASE_URL; // done to bypass cache
-                } else alert(resp.error);
-            });
-        },
-    },
-};
+const router = useRouter();
+const { t } = useI18n();
+
+const username = ref(null);
+const password = ref(null);
+const passwordConfirm = ref(null);
+const showPassword = ref(false);
+const showConfirmPassword = ref(false);
+const showUnsecureRegisterDialog = ref(false);
+const forceUnsecureRegister = ref(false);
+
+onMounted(() => {
+    //TODO: Add Server Side check
+    if (getAuthToken()) {
+        router.push(import.meta.env.BASE_URL);
+    }
+});
+
+onActivated(() => {
+    document.title = "Register - Piped";
+});
+
+function register() {
+    if (!username.value || !password.value) return;
+    if (password.value != passwordConfirm.value) {
+        alert(t("login.passwords_incorrect"));
+        return;
+    }
+    if (isEmail(username.value) && !forceUnsecureRegister.value) {
+        showUnsecureRegisterDialog.value = true;
+        return;
+    }
+    fetchJson(authApiUrl() + "/register", null, {
+        method: "POST",
+        body: JSON.stringify({
+            username: username.value,
+            password: password.value,
+        }),
+    }).then(resp => {
+        if (resp.token) {
+            setPreference("authToken" + hashCode(authApiUrl()), resp.token);
+            window.location = import.meta.env.BASE_URL; // done to bypass cache
+        } else alert(resp.error);
+    });
+}
 </script>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 0cca8c94..9fbfdb1d 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -25,115 +25,123 @@
     </LoadingIndicatorPage>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onUpdated, onActivated, onDeactivated, onUnmounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import ContentItem from "./ContentItem.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { getPreferenceBoolean } from "@/composables/usePreferences.js";
+import { updateWatched } from "@/composables/useMisc.js";
 
-export default {
-    components: {
-        ContentItem,
-        LoadingIndicatorPage,
-    },
-    data() {
-        return {
-            results: null,
-            availableFilters: [
-                "all",
-                "videos",
-                "channels",
-                "playlists",
-                "music_songs",
-                "music_videos",
-                "music_albums",
-                "music_playlists",
-                "music_artists",
-            ],
-            selectedFilter: this.$route.query.filter ?? "all",
-        };
-    },
-    mounted() {
-        if (this.handleRedirect()) return;
-        this.updateResults();
-        this.saveQueryToHistory();
-    },
-    updated() {
-        if (this.$route.query.search_query !== undefined) {
-            document.title = this.$route.query.search_query + " - Piped";
-        }
-    },
-    activated() {
-        this.handleRedirect();
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
-    },
-    methods: {
-        async fetchResults() {
-            return await await this.fetchJson(this.apiUrl() + "/search", {
-                q: this.$route.query.search_query,
-                filter: this.$route.query.filter ?? "all",
-            });
+const route = useRoute();
+const router = useRouter();
+
+const results = ref(null);
+const availableFilters = [
+    "all",
+    "videos",
+    "channels",
+    "playlists",
+    "music_songs",
+    "music_videos",
+    "music_albums",
+    "music_playlists",
+    "music_artists",
+];
+const selectedFilter = ref(route.query.filter ?? "all");
+let loading = false;
+
+async function fetchResultsData() {
+    return await fetchJson(apiUrl() + "/search", {
+        q: route.query.search_query,
+        filter: route.query.filter ?? "all",
+    });
+}
+
+async function updateResults() {
+    document.title = route.query.search_query + " - Piped";
+    fetchResultsData().then(json => {
+        results.value = json;
+        updateWatched(results.value.items);
+    });
+}
+
+function updateFilter() {
+    router.replace({
+        query: {
+            search_query: route.query.search_query,
+            filter: selectedFilter.value,
         },
-        async updateResults() {
-            document.title = this.$route.query.search_query + " - Piped";
-            this.results = this.fetchResults().then(json => {
-                this.results = json;
-                this.updateWatched(this.results.items);
-            });
-        },
-        updateFilter() {
-            this.$router.replace({
-                query: {
-                    search_query: this.$route.query.search_query,
-                    filter: this.selectedFilter,
-                },
-            });
-        },
-        handleScroll() {
-            if (this.loading || !this.results || !this.results.nextpage) return;
-            if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
-                this.loading = true;
-                this.fetchJson(this.apiUrl() + "/nextpage/search", {
-                    nextpage: this.results.nextpage,
-                    q: this.$route.query.search_query,
-                    filter: this.$route.query.filter ?? "all",
-                }).then(json => {
-                    this.results.nextpage = json.nextpage;
-                    this.results.id = json.id;
-                    this.loading = false;
-                    json.items.map(stream => this.results.items.push(stream));
-                });
-            }
-        },
-        handleRedirect() {
-            const query = this.$route.query.search_query;
-            const url =
-                /(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm.exec(query)?.[1] ??
-                /(?:http(?:s)?:\/\/)?(?:www\.)?youtu\.be\/(?:watch\?v=)?([/a-zA-Z0-9_?=&-]*)/gm
-                    .exec(query)?.[1]
-                    .replace(/^/, "/watch?v=");
-            if (url) {
-                this.$router.push(url);
-                return true;
-            }
-        },
-        saveQueryToHistory() {
-            if (!this.getPreferenceBoolean("searchHistory", false)) return;
-            const query = this.$route.query.search_query;
-            if (!query) return;
-            const searchHistory = JSON.parse(localStorage.getItem("search_history")) ?? [];
-            if (searchHistory.includes(query)) {
-                const index = searchHistory.indexOf(query);
-                searchHistory.splice(index, 1);
-            }
-            searchHistory.unshift(query);
-            if (searchHistory.length > 10) searchHistory.shift();
-            localStorage.setItem("search_history", JSON.stringify(searchHistory));
-        },
-    },
-};
+    });
+}
+
+function handleScroll() {
+    if (loading || !results.value || !results.value.nextpage) return;
+    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
+        loading = true;
+        fetchJson(apiUrl() + "/nextpage/search", {
+            nextpage: results.value.nextpage,
+            q: route.query.search_query,
+            filter: route.query.filter ?? "all",
+        }).then(json => {
+            results.value.nextpage = json.nextpage;
+            results.value.id = json.id;
+            loading = false;
+            json.items.map(stream => results.value.items.push(stream));
+        });
+    }
+}
+
+function handleRedirect() {
+    const query = route.query.search_query;
+    const url =
+        /(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm.exec(query)?.[1] ??
+        /(?:http(?:s)?:\/\/)?(?:www\.)?youtu\.be\/(?:watch\?v=)?([/a-zA-Z0-9_?=&-]*)/gm
+            .exec(query)?.[1]
+            .replace(/^/, "/watch?v=");
+    if (url) {
+        router.push(url);
+        return true;
+    }
+}
+
+function saveQueryToHistory() {
+    if (!getPreferenceBoolean("searchHistory", false)) return;
+    const query = route.query.search_query;
+    if (!query) return;
+    const searchHistory = JSON.parse(localStorage.getItem("search_history")) ?? [];
+    if (searchHistory.includes(query)) {
+        const index = searchHistory.indexOf(query);
+        searchHistory.splice(index, 1);
+    }
+    searchHistory.unshift(query);
+    if (searchHistory.length > 10) searchHistory.shift();
+    localStorage.setItem("search_history", JSON.stringify(searchHistory));
+}
+
+onMounted(() => {
+    if (handleRedirect()) return;
+    updateResults();
+    saveQueryToHistory();
+});
+
+onUpdated(() => {
+    if (route.query.search_query !== undefined) {
+        document.title = route.query.search_query + " - Piped";
+    }
+});
+
+onActivated(() => {
+    handleRedirect();
+    window.addEventListener("scroll", handleScroll);
+});
+
+onDeactivated(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
 </script>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 8168d096..0b9bf195 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -18,67 +18,71 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        searchText: { type: String, default: "" },
-    },
-    emits: ["searchchange"],
-    data() {
-        return {
-            selected: 0,
-            searchSuggestions: [],
-        };
-    },
-    methods: {
-        onKeyUp(e) {
-            if (e.key === "ArrowUp") {
-                if (this.selected <= 0) {
-                    this.setSelected(this.searchSuggestions.length - 1);
-                } else {
-                    this.setSelected(this.selected - 1);
-                }
-                e.preventDefault();
-            } else if (e.key === "ArrowDown") {
-                if (this.selected >= this.searchSuggestions.length - 1) {
-                    this.setSelected(0);
-                } else {
-                    this.setSelected(this.selected + 1);
-                }
-                e.preventDefault();
-            } else {
-                this.refreshSuggestions();
-            }
-        },
-        async refreshSuggestions() {
-            if (!this.searchText) {
-                if (this.getPreferenceBoolean("searchHistory", false))
-                    this.searchSuggestions = JSON.parse(localStorage.getItem("search_history")) ?? [];
-            } else if (this.getPreferenceBoolean("searchSuggestions", true)) {
-                this.searchSuggestions =
-                    (
-                        await this.fetchJson(this.apiUrl() + "/opensearch/suggestions", {
-                            query: this.searchText,
-                        })
-                    )?.[1] ?? [];
-            } else {
-                this.searchSuggestions = [];
-                return;
-            }
-            this.searchSuggestions.unshift(this.searchText);
-            this.setSelected(0);
-        },
-        onMouseOver(i) {
-            if (i !== this.selected) {
-                this.selected = i;
-            }
-        },
-        setSelected(val) {
-            this.selected = val;
-            this.$emit("searchchange", this.searchSuggestions[this.selected]);
-        },
-    },
-};
+<script setup>
+import { ref } from "vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { getPreferenceBoolean } from "@/composables/usePreferences.js";
+
+const props = defineProps({
+    searchText: { type: String, default: "" },
+});
+
+const emit = defineEmits(["searchchange"]);
+
+const selected = ref(0);
+const searchSuggestions = ref([]);
+
+function onKeyUp(e) {
+    if (e.key === "ArrowUp") {
+        if (selected.value <= 0) {
+            setSelected(searchSuggestions.value.length - 1);
+        } else {
+            setSelected(selected.value - 1);
+        }
+        e.preventDefault();
+    } else if (e.key === "ArrowDown") {
+        if (selected.value >= searchSuggestions.value.length - 1) {
+            setSelected(0);
+        } else {
+            setSelected(selected.value + 1);
+        }
+        e.preventDefault();
+    } else {
+        refreshSuggestions();
+    }
+}
+
+async function refreshSuggestions() {
+    if (!props.searchText) {
+        if (getPreferenceBoolean("searchHistory", false))
+            searchSuggestions.value = JSON.parse(localStorage.getItem("search_history")) ?? [];
+    } else if (getPreferenceBoolean("searchSuggestions", true)) {
+        searchSuggestions.value =
+            (
+                await fetchJson(apiUrl() + "/opensearch/suggestions", {
+                    query: props.searchText,
+                })
+            )?.[1] ?? [];
+    } else {
+        searchSuggestions.value = [];
+        return;
+    }
+    searchSuggestions.value.unshift(props.searchText);
+    setSelected(0);
+}
+
+function onMouseOver(i) {
+    if (i !== selected.value) {
+        selected.value = i;
+    }
+}
+
+function setSelected(val) {
+    selected.value = val;
+    emit("searchchange", searchSuggestions.value[selected.value]);
+}
+
+defineExpose({ onKeyUp, refreshSuggestions });
 </script>
 
 <style>
diff --git a/src/components/ShareModal.vue b/src/components/ShareModal.vue
index e8b8f412..67b1e90d 100644
--- a/src/components/ShareModal.vue
+++ b/src/components/ShareModal.vue
@@ -32,112 +32,109 @@
 </template>
 
 <script setup>
-import { defineAsyncComponent } from "vue";
+import { ref, computed, onMounted, defineAsyncComponent } from "vue";
+import { useI18n } from "vue-i18n";
+import ModalComponent from "./ModalComponent.vue";
+import { getPreferenceBoolean, setPreference } from "@/composables/usePreferences.js";
 
 const QrCode = defineAsyncComponent(() => import("./QrCode.vue"));
-</script>
-
-<script>
-import ModalComponent from "./ModalComponent.vue";
-
-export default {
-    components: {
-        ModalComponent,
-    },
-    props: {
-        videoId: {
-            type: String,
-            required: true,
-        },
-        currentTime: {
-            type: Number,
-            required: true,
-        },
-        playlistId: {
-            type: String,
-            default: undefined,
-        },
-        playlistIndex: {
-            type: Number,
-            default: undefined,
-        },
-    },
-    data() {
-        return {
-            withTimeCode: true,
-            pipedLink: true,
-            withPlaylist: true,
-            timeStamp: null,
-            hasPlaylist: false,
-            showQrCode: false,
-            durations: [1, 60, 60 * 60, 60 * 60 * 24],
-        };
-    },
-    computed: {
-        generatedLink() {
-            const baseUrl = this.pipedLink
-                ? window.location.origin + "/watch?v=" + this.videoId
-                : "https://youtu.be/" + this.videoId;
-            const url = new URL(baseUrl);
-
-            if (this.withTimeCode && this.timeStamp)
-                url.searchParams.append("t", this.parseTimeStampToSeconds(this.timeStamp));
-
-            if (this.hasPlaylist && this.withPlaylist) {
-                url.searchParams.append("list", this.playlistId);
-                url.searchParams.append("index", this.playlistIndex);
-            }
-
-            return url.href;
-        },
-    },
-    mounted() {
-        this.timeStamp = this.parseSecondsToTimeStamp(this.currentTime ?? 0);
-        this.withTimeCode = this.getPreferenceBoolean("shareWithTimeCode", true);
-        this.pipedLink = this.getPreferenceBoolean("shareAsPipedLink", true);
-        this.withPlaylist = this.getPreferenceBoolean("shareWithPlaylist", true);
-        this.hasPlaylist = this.playlistId != undefined && !isNaN(this.playlistIndex);
-    },
-    methods: {
-        followLink() {
-            window.open(this.generatedLink, "_blank").focus();
-        },
-        async copyLink() {
-            await this.copyURL(this.generatedLink);
-        },
-        async copyURL(mytext) {
-            try {
-                await navigator.clipboard.writeText(mytext);
-                alert(this.$t("info.copied"));
-            } catch ($e) {
-                alert(this.$t("info.cannot_copy"));
-            }
-        },
-        parseTimeStampToSeconds(timestamp) {
-            const timeArray = timestamp.split(":").reverse();
-            let seconds = 0;
-            for (let i = 0; i < timeArray.length; i++) {
-                seconds += timeArray[i] * this.durations[i];
-            }
-            return seconds;
-        },
-        parseSecondsToTimeStamp(seconds) {
-            const timeArray = [];
-            const durationsReversed = this.durations.toReversed();
-            for (let i in durationsReversed) {
-                const currentValue = Math.floor(seconds / durationsReversed[i]);
-                if (currentValue > 0) {
-                    timeArray.push(currentValue.toString().padStart(2, "0"));
-                    seconds -= currentValue * durationsReversed[i];
-                }
-            }
-            return timeArray.join(":");
-        },
-        onChange() {
-            this.setPreference("shareWithTimeCode", this.withTimeCode, true);
-            this.setPreference("shareAsPipedLink", this.pipedLink, true);
-            this.setPreference("shareWithPlaylist", this.withPlaylist, true);
-        },
-    },
-};
+
+const { t } = useI18n();
+
+const props = defineProps({
+    videoId: {
+        type: String,
+        required: true,
+    },
+    currentTime: {
+        type: Number,
+        required: true,
+    },
+    playlistId: {
+        type: String,
+        default: undefined,
+    },
+    playlistIndex: {
+        type: Number,
+        default: undefined,
+    },
+});
+
+const durations = [1, 60, 60 * 60, 60 * 60 * 24];
+
+const withTimeCode = ref(true);
+const pipedLink = ref(true);
+const withPlaylist = ref(true);
+const timeStamp = ref(null);
+const hasPlaylist = ref(false);
+const showQrCode = ref(false);
+
+const generatedLink = computed(() => {
+    const baseUrl = pipedLink.value
+        ? window.location.origin + "/watch?v=" + props.videoId
+        : "https://youtu.be/" + props.videoId;
+    const url = new URL(baseUrl);
+
+    if (withTimeCode.value && timeStamp.value) url.searchParams.append("t", parseTimeStampToSeconds(timeStamp.value));
+
+    if (hasPlaylist.value && withPlaylist.value) {
+        url.searchParams.append("list", props.playlistId);
+        url.searchParams.append("index", props.playlistIndex);
+    }
+
+    return url.href;
+});
+
+onMounted(() => {
+    timeStamp.value = parseSecondsToTimeStamp(props.currentTime ?? 0);
+    withTimeCode.value = getPreferenceBoolean("shareWithTimeCode", true);
+    pipedLink.value = getPreferenceBoolean("shareAsPipedLink", true);
+    withPlaylist.value = getPreferenceBoolean("shareWithPlaylist", true);
+    hasPlaylist.value = props.playlistId != undefined && !isNaN(props.playlistIndex);
+});
+
+function followLink() {
+    window.open(generatedLink.value, "_blank").focus();
+}
+
+async function copyLink() {
+    await copyURL(generatedLink.value);
+}
+
+async function copyURL(mytext) {
+    try {
+        await navigator.clipboard.writeText(mytext);
+        alert(t("info.copied"));
+    } catch ($e) {
+        alert(t("info.cannot_copy"));
+    }
+}
+
+function parseTimeStampToSeconds(timestamp) {
+    const timeArray = timestamp.split(":").reverse();
+    let seconds = 0;
+    for (let i = 0; i < timeArray.length; i++) {
+        seconds += timeArray[i] * durations[i];
+    }
+    return seconds;
+}
+
+function parseSecondsToTimeStamp(seconds) {
+    const timeArray = [];
+    const durationsReversed = durations.toReversed();
+    for (let i in durationsReversed) {
+        const currentValue = Math.floor(seconds / durationsReversed[i]);
+        if (currentValue > 0) {
+            timeArray.push(currentValue.toString().padStart(2, "0"));
+            seconds -= currentValue * durationsReversed[i];
+        }
+    }
+    return timeArray.join(":");
+}
+
+function onChange() {
+    setPreference("shareWithTimeCode", withTimeCode.value, true);
+    setPreference("shareAsPipedLink", pipedLink.value, true);
+    setPreference("shareWithPlaylist", withPlaylist.value, true);
+}
 </script>
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 0fdce6bf..6b1ef3f1 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -121,156 +121,160 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, onActivated } from "vue";
 import ModalComponent from "./ModalComponent.vue";
 import CreateGroupModal from "./CreateGroupModal.vue";
 import ConfirmModal from "./ConfirmModal.vue";
+import { fetchJson, authApiUrl, getAuthToken, isAuthenticated } from "@/composables/useApi.js";
+import { fetchSubscriptions, handleLocalSubscriptions } from "@/composables/useSubscriptions.js";
+import { getChannelGroups, createOrUpdateChannelGroup, deleteChannelGroup } from "@/composables/useChannelGroups.js";
+import { download } from "@/composables/useMisc.js";
 
-export default {
-    components: { ModalComponent, CreateGroupModal, ConfirmModal },
-    data() {
-        return {
-            subscriptions: [],
-            selectedGroup: {
-                groupName: "",
-                channels: [],
+const fileSelector = ref(null);
+const subscriptions = ref([]);
+const selectedGroup = ref({
+    groupName: "",
+    channels: [],
+});
+const channelGroups = ref([]);
+const showCreateGroupModal = ref(false);
+const showEditGroupModal = ref(false);
+const editedGroupName = ref("");
+const groupToDelete = ref(null);
+
+const filteredSubscriptions = computed(() => {
+    return selectedGroup.value.groupName == ""
+        ? subscriptions.value
+        : subscriptions.value.filter(channel => selectedGroup.value.channels.includes(channel.url.substr(-24)));
+});
+
+function handleButton(subscription) {
+    const channelId = subscription.url.split("/")[2];
+    if (isAuthenticated()) {
+        fetchJson(authApiUrl() + (subscription.subscribed ? "/unsubscribe" : "/subscribe"), null, {
+            method: "POST",
+            body: JSON.stringify({
+                channelId: channelId,
+            }),
+            headers: {
+                Authorization: getAuthToken(),
+                "Content-Type": "application/json",
             },
-            channelGroups: [],
-            showCreateGroupModal: false,
-            showEditGroupModal: false,
-            editedGroupName: "",
-            groupToDelete: null,
-        };
-    },
-    computed: {
-        filteredSubscriptions(_this) {
-            return _this.selectedGroup.groupName == ""
-                ? _this.subscriptions
-                : _this.subscriptions.filter(channel => _this.selectedGroup.channels.includes(channel.url.substr(-24)));
-        },
-    },
-    mounted() {
-        this.fetchSubscriptions().then(json => {
-            if (json.error) {
-                alert(json.error);
-                return;
-            }
-
-            this.subscriptions = json;
-            this.subscriptions.forEach(subscription => (subscription.subscribed = true));
         });
+    } else {
+        handleLocalSubscriptions(channelId);
+    }
+    subscription.subscribed = !subscription.subscribed;
+}
 
-        this.channelGroups.push(this.selectedGroup);
-        if (!window.db) return;
+function exportHandler() {
+    const subs = [];
+    subscriptions.value.forEach(subscription => {
+        subs.push({
+            url: "https://www.youtube.com" + subscription.url,
+            name: subscription.name,
+            service_id: 0,
+        });
+    });
+    const json = JSON.stringify({
+        app_version: "",
+        app_version_int: 0,
+        subscriptions: subs,
+    });
+    download(json, "subscriptions.json", "application/json");
+}
 
-        this.loadChannelGroups();
-    },
-    activated() {
-        document.title = "Subscriptions - Piped";
-    },
-    methods: {
-        async loadChannelGroups() {
-            const groups = await this.getChannelGroups();
-            this.channelGroups.push(...groups);
-        },
-        handleButton(subscription) {
-            const channelId = subscription.url.split("/")[2];
-            if (this.authenticated) {
-                this.fetchJson(this.authApiUrl() + (subscription.subscribed ? "/unsubscribe" : "/subscribe"), null, {
-                    method: "POST",
-                    body: JSON.stringify({
-                        channelId: channelId,
-                    }),
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                        "Content-Type": "application/json",
-                    },
-                });
-            } else {
-                this.handleLocalSubscriptions(channelId);
-            }
-            subscription.subscribed = !subscription.subscribed;
-        },
-        exportHandler() {
-            const subscriptions = [];
-            this.subscriptions.forEach(subscription => {
-                subscriptions.push({
-                    url: "https://www.youtube.com" + subscription.url,
-                    name: subscription.name,
-                    service_id: 0,
-                });
-            });
-            const json = JSON.stringify({
-                app_version: "",
-                app_version_int: 0,
-                subscriptions: subscriptions,
-            });
-            this.download(json, "subscriptions.json", "application/json");
-        },
-        selectGroup(group) {
-            this.selectedGroup = group;
-            this.editedGroupName = group.groupName;
-        },
-        createGroup(newGroupName) {
-            if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
+function selectGroup(group) {
+    selectedGroup.value = group;
+    editedGroupName.value = group.groupName;
+}
 
-            const newGroup = {
-                groupName: newGroupName,
-                channels: [],
-            };
-            this.channelGroups.push(newGroup);
-            this.createOrUpdateChannelGroup(newGroup);
+function createGroup(newGroupName) {
+    if (!newGroupName || channelGroups.value.some(group => group.groupName == newGroupName)) return;
 
-            this.showCreateGroupModal = false;
-        },
-        editGroupName() {
-            const oldGroupName = this.selectedGroup.groupName;
-            const newGroupName = this.editedGroupName;
+    const newGroup = {
+        groupName: newGroupName,
+        channels: [],
+    };
+    channelGroups.value.push(newGroup);
+    createOrUpdateChannelGroup(newGroup);
 
-            // the group mustn't yet exist and the name can't be empty
-            if (!newGroupName || newGroupName == oldGroupName) return;
-            if (this.channelGroups.some(group => group.groupName == newGroupName)) return;
+    showCreateGroupModal.value = false;
+}
 
-            // create a new group with the same info and delete the old one
-            this.selectedGroup.groupName = newGroupName;
-            this.createOrUpdateChannelGroup(this.selectedGroup);
-            this.deleteChannelGroup(oldGroupName);
+function editGroupName() {
+    const oldGroupName = selectedGroup.value.groupName;
+    const newGroupName = editedGroupName.value;
 
-            this.showEditGroupModal = false;
-        },
-        deleteGroup(group) {
-            this.deleteChannelGroup(group);
-            this.channelGroups = this.channelGroups.filter(g => g.groupName != group);
-            this.selectedGroup = this.channelGroups[0] || {};
-            this.groupToDelete = null;
-        },
-        checkedChange(subscription) {
-            const channelId = subscription.url.substr(-24);
-            this.selectedGroup.channels = this.selectedGroup.channels.includes(channelId)
-                ? this.selectedGroup.channels.filter(channel => channel != channelId)
-                : this.selectedGroup.channels.concat(channelId);
-            this.createOrUpdateChannelGroup(this.selectedGroup);
-        },
-        async importGroupsHandler() {
-            const files = this.$refs.fileSelector.files;
-            for (let file of files) {
-                const groups = JSON.parse(await file.text()).groups;
-                for (let group of groups) {
-                    this.createOrUpdateChannelGroup(group);
-                    this.channelGroups.push(group);
-                }
-            }
-        },
-        exportGroupsHandler() {
-            const json = {
-                format: "Piped",
-                version: 1,
-                groups: this.channelGroups.slice(1),
-            };
-            this.download(JSON.stringify(json), "channel_groups.json", "application/json");
-        },
-    },
-};
+    if (!newGroupName || newGroupName == oldGroupName) return;
+    if (channelGroups.value.some(group => group.groupName == newGroupName)) return;
+
+    selectedGroup.value.groupName = newGroupName;
+    createOrUpdateChannelGroup(selectedGroup.value);
+    deleteChannelGroup(oldGroupName);
+
+    showEditGroupModal.value = false;
+}
+
+function deleteGroup(group) {
+    deleteChannelGroup(group);
+    channelGroups.value = channelGroups.value.filter(g => g.groupName != group);
+    selectedGroup.value = channelGroups.value[0] || {};
+    groupToDelete.value = null;
+}
+
+function checkedChange(subscription) {
+    const channelId = subscription.url.substr(-24);
+    selectedGroup.value.channels = selectedGroup.value.channels.includes(channelId)
+        ? selectedGroup.value.channels.filter(channel => channel != channelId)
+        : selectedGroup.value.channels.concat(channelId);
+    createOrUpdateChannelGroup(selectedGroup.value);
+}
+
+async function importGroupsHandler() {
+    const files = fileSelector.value.files;
+    for (let file of files) {
+        const groups = JSON.parse(await file.text()).groups;
+        for (let group of groups) {
+            createOrUpdateChannelGroup(group);
+            channelGroups.value.push(group);
+        }
+    }
+}
+
+function exportGroupsHandler() {
+    const json = {
+        format: "Piped",
+        version: 1,
+        groups: channelGroups.value.slice(1),
+    };
+    download(JSON.stringify(json), "channel_groups.json", "application/json");
+}
+
+onMounted(() => {
+    fetchSubscriptions().then(json => {
+        if (json.error) {
+            alert(json.error);
+            return;
+        }
+
+        subscriptions.value = json;
+        subscriptions.value.forEach(subscription => (subscription.subscribed = true));
+    });
+
+    channelGroups.value.push(selectedGroup.value);
+    if (!window.db) return;
+
+    (async () => {
+        const groups = await getChannelGroups();
+        channelGroups.value.push(...groups);
+    })();
+});
+
+onActivated(() => {
+    document.title = "Subscriptions - Piped";
+});
 </script>
 
 <style>
diff --git a/src/components/ToastComponent.vue b/src/components/ToastComponent.vue
index f4f88e71..fe6d8ffa 100644
--- a/src/components/ToastComponent.vue
+++ b/src/components/ToastComponent.vue
@@ -5,15 +5,12 @@
     </div>
 </template>
 
-<script>
-export default {
-    emits: ["dismissed"],
-    methods: {
-        dismiss() {
-            this.$emit("dismissed");
-        },
-    },
-};
+<script setup>
+const emit = defineEmits(["dismissed"]);
+
+function dismiss() {
+    emit("dismissed");
+}
 </script>
 
 <style>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 34d0bf22..d9725cea 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -8,49 +8,49 @@
     </LoadingIndicatorPage>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, onActivated } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import VideoItem from "./VideoItem.vue";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import { getPreferenceString } from "@/composables/usePreferences.js";
+import { updateWatched } from "@/composables/useMisc.js";
+import { fetchDeArrowContent } from "@/composables/useSubscriptions.js";
+import { getHomePage } from "@/composables/useMisc.js";
 
-export default {
-    components: {
-        VideoItem,
-        LoadingIndicatorPage,
-    },
-    data() {
-        return {
-            videos: [],
-        };
-    },
-    mounted() {
-        if (
-            this.$route.path == import.meta.env.BASE_URL &&
-            this.getPreferenceString("homepage", "trending") == "feed"
-        ) {
-            return;
-        }
-        let region = this.getPreferenceString("region", "US");
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 
-        this.fetchTrending(region).then(videos => {
-            this.videos = videos;
-            this.updateWatched(this.videos);
-            this.fetchDeArrowContent(this.videos);
-        });
-    },
-    activated() {
-        document.title = this.$t("titles.trending") + " - Piped";
-        if (this.videos.length > 0) this.updateWatched(this.videos);
-        if (this.$route.path == import.meta.env.BASE_URL) {
-            let homepage = this.getHomePage(this);
-            if (homepage !== undefined) this.$router.push(homepage);
-        }
-    },
-    methods: {
-        async fetchTrending(region) {
-            return await this.fetchJson(this.apiUrl() + "/trending", {
-                region: region || "US",
-            });
-        },
-    },
-};
+const videos = ref([]);
+
+async function fetchTrending(region) {
+    return await fetchJson(apiUrl() + "/trending", {
+        region: region || "US",
+    });
+}
+
+onMounted(() => {
+    if (route.path == import.meta.env.BASE_URL && getPreferenceString("homepage", "trending") == "feed") {
+        return;
+    }
+    let region = getPreferenceString("region", "US");
+
+    fetchTrending(region).then(vids => {
+        videos.value = vids;
+        updateWatched(videos.value);
+        fetchDeArrowContent(videos.value);
+    });
+});
+
+onActivated(() => {
+    document.title = t("titles.trending") + " - Piped";
+    if (videos.value.length > 0) updateWatched(videos.value);
+    if (route.path == import.meta.env.BASE_URL) {
+        let homepage = getHomePage();
+        if (homepage !== undefined) router.push(homepage);
+    }
+});
 </script>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 19d76a7d..b9477629 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -127,110 +127,107 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from "vue";
 import PlaylistAddModal from "./PlaylistAddModal.vue";
 import ShareModal from "./ShareModal.vue";
 import ConfirmModal from "./ConfirmModal.vue";
 import VideoThumbnail from "./VideoThumbnail.vue";
+import { numberFormat, timeAgo } from "@/composables/useFormatting.js";
+import { getPreferenceBoolean } from "@/composables/usePreferences.js";
+import { removeVideoFromPlaylist } from "@/composables/usePlaylists.js";
 
-export default {
-    components: { PlaylistAddModal, ConfirmModal, ShareModal, VideoThumbnail },
-    props: {
-        item: {
-            type: Object,
-            default: () => {
-                return {};
-            },
-        },
-        isFeed: {
-            type: Boolean,
-            default: false,
-        },
-        height: { type: String, default: "118" },
-        width: { type: String, default: "210" },
-        hideChannel: { type: Boolean, default: false },
-        index: { type: Number, default: -1 },
-        playlistId: { type: String, default: null },
-        preferListen: { type: Boolean, default: false },
-        admin: { type: Boolean, default: false },
-    },
-    emits: ["update:watched", "remove"],
-    data() {
-        return {
-            showPlaylistModal: false,
-            showShareModal: false,
-            showVideo: true,
-            showConfirmRemove: false,
-            showMarkOnWatched: false,
-        };
-    },
-    computed: {
-        title() {
-            return this.item.dearrow?.titles[0]?.title ?? this.item.title;
-        },
-        thumbnail() {
-            return this.item.dearrow?.thumbnails[0]?.thumbnail ?? this.item.thumbnail;
+const props = defineProps({
+    item: {
+        type: Object,
+        default: () => {
+            return {};
         },
     },
-    mounted() {
-        this.shouldShowVideo();
-        this.shouldShowMarkOnWatched();
+    isFeed: {
+        type: Boolean,
+        default: false,
     },
-    methods: {
-        removeVideo() {
-            this.$refs.removeButton.disabled = true;
-            this.removeVideoFromPlaylist(this.playlistId, this.index).then(json => {
-                if (json.error) alert(json.error);
-                else this.$emit("remove");
-            });
-        },
-        shouldShowVideo() {
-            if (!this.isFeed || !this.getPreferenceBoolean("hideWatched", false)) return;
+    height: { type: String, default: "118" },
+    width: { type: String, default: "210" },
+    hideChannel: { type: Boolean, default: false },
+    index: { type: Number, default: -1 },
+    playlistId: { type: String, default: null },
+    preferListen: { type: Boolean, default: false },
+    admin: { type: Boolean, default: false },
+});
 
-            const objectStore = window.db.transaction("watch_history", "readonly").objectStore("watch_history");
-            const request = objectStore.get(this.item.url.substr(-11));
-            request.onsuccess = event => {
-                const video = event.target.result;
-                if (video && (video.currentTime ?? 0) > video.duration * 0.9) {
-                    this.showVideo = false;
-                    return;
-                }
-            };
-        },
-        shouldShowMarkOnWatched() {
-            this.showMarkOnWatched = this.getPreferenceBoolean("watchHistory", false);
-        },
-        toggleWatched(videoId) {
-            if (window.db) {
-                var tx = window.db.transaction("watch_history", "readwrite");
-                var store = tx.objectStore("watch_history");
-                var instance = this;
-                var request = store.get(videoId);
-                request.onsuccess = function (event) {
-                    var video = event.target.result;
-                    if (video) {
-                        video.watchedAt = Date.now();
-                    } else {
-                        video = {
-                            videoId: videoId,
-                            title: instance.item.title,
-                            duration: instance.item.duration,
-                            thumbnail: instance.item.thumbnail,
-                            uploaderUrl: instance.item.uploaderUrl,
-                            uploaderName: instance.item.uploaderName,
-                            watchedAt: Date.now(),
-                        };
-                    }
-                    video.currentTime =
-                        instance.item.currentTime < instance.item.duration * 0.9 ? instance.item.duration : 0;
-                    store.put(video);
-                    instance.$emit("update:watched", [instance.item.url]);
-                    instance.shouldShowVideo();
+const emit = defineEmits(["update:watched", "remove"]);
+
+const removeButton = ref(null);
+const showPlaylistModal = ref(false);
+const showShareModal = ref(false);
+const showVideo = ref(true);
+const showConfirmRemove = ref(false);
+const showMarkOnWatched = ref(false);
+
+const title = computed(() => {
+    return props.item.dearrow?.titles[0]?.title ?? props.item.title;
+});
+
+function removeVideo() {
+    removeButton.value.disabled = true;
+    removeVideoFromPlaylist(props.playlistId, props.index).then(json => {
+        if (json.error) alert(json.error);
+        else emit("remove");
+    });
+}
+
+function shouldShowVideo() {
+    if (!props.isFeed || !getPreferenceBoolean("hideWatched", false)) return;
+
+    const objectStore = window.db.transaction("watch_history", "readonly").objectStore("watch_history");
+    const request = objectStore.get(props.item.url.substr(-11));
+    request.onsuccess = event => {
+        const video = event.target.result;
+        if (video && (video.currentTime ?? 0) > video.duration * 0.9) {
+            showVideo.value = false;
+            return;
+        }
+    };
+}
+
+function shouldShowMarkOnWatched() {
+    showMarkOnWatched.value = getPreferenceBoolean("watchHistory", false);
+}
+
+function toggleWatched(videoId) {
+    if (window.db) {
+        var tx = window.db.transaction("watch_history", "readwrite");
+        var store = tx.objectStore("watch_history");
+        var request = store.get(videoId);
+        request.onsuccess = function (event) {
+            var video = event.target.result;
+            if (video) {
+                video.watchedAt = Date.now();
+            } else {
+                video = {
+                    videoId: videoId,
+                    title: props.item.title,
+                    duration: props.item.duration,
+                    thumbnail: props.item.thumbnail,
+                    uploaderUrl: props.item.uploaderUrl,
+                    uploaderName: props.item.uploaderName,
+                    watchedAt: Date.now(),
                 };
             }
-        },
-    },
-};
+            video.currentTime = props.item.currentTime < props.item.duration * 0.9 ? props.item.duration : 0;
+            store.put(video);
+            emit("update:watched", [props.item.url]);
+            shouldShowVideo();
+        };
+    }
+}
+
+onMounted(() => {
+    shouldShowVideo();
+    shouldShowMarkOnWatched();
+});
 </script>
 
 <style>
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index 5b1a9faf..f69d307b 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -51,15 +51,15 @@
             class="text-l absolute left-1/2 top-1/2 flex flex-col transform items-center gap-6 rounded-8 bg-white/80 px-8 py-4 -translate-x-1/2 -translate-y-1/2 .dark:bg-dark-700/80"
         >
             <i class="i-fa6-solid:gauge-high h-25 w-25 p-5" />
-            <span v-text="$refs.videoEl.playbackRate" />
+            <span v-text="videoEl.playbackRate" />
         </div>
         <div
             v-if="showCurrentVolume"
             class="text-l absolute left-1/2 top-1/2 flex flex-col transform items-center gap-6 rounded-8 bg-white/80 px-8 py-4 -translate-x-1/2 -translate-y-1/2 .dark:bg-dark-700/80"
         >
-            <i v-if="$refs.videoEl.volume > 0" class="i-fa6-solid:volume-high h-25 w-25 p-5" />
+            <i v-if="videoEl.volume > 0" class="i-fa6-solid:volume-high h-25 w-25 p-5" />
             <i v-else class="i-fa6-solid:volume-xmark h-25 w-25 p-5" />
-            <span v-text="Math.round($refs.videoEl.volume * 100) / 100" />
+            <span v-text="Math.round(videoEl.volume * 100) / 100" />
         </div>
     </div>
 
@@ -78,839 +78,856 @@
     </ModalComponent>
 </template>
 
-<script>
+<script setup>
 import "shaka-player/dist/controls.css";
+import { ref, computed, onMounted, onActivated, onDeactivated, onUnmounted } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 import { parseTimeParam } from "@/utils/Misc";
 import ModalComponent from "./ModalComponent.vue";
+import {
+    getPreferenceBoolean,
+    getPreferenceNumber,
+    getPreferenceString,
+    setPreference,
+} from "@/composables/usePreferences.js";
+import { timeFormat } from "@/composables/useFormatting.js";
 
-const shaka = import("shaka-player/dist/shaka-player.ui.js");
-const hotkeys = import("hotkeys-js");
+const shakaImport = import("shaka-player/dist/shaka-player.ui.js");
+const hotkeysImport = import("hotkeys-js");
 
-export default {
-    components: { ModalComponent },
-    props: {
-        video: {
-            type: Object,
-            default: () => {
-                return {};
-            },
-        },
-        sponsors: {
-            type: Object,
-            default: () => {
-                return {};
-            },
-        },
-        selectedAutoPlay: Boolean,
-        selectedAutoLoop: Boolean,
-        isEmbed: Boolean,
-    },
-    emits: ["timeupdate", "ended", "navigateNext"],
-    data() {
-        return {
-            lastUpdate: new Date().getTime(),
-            initialSeekComplete: false,
-            destroying: false,
-            inSegment: false,
-            isHoveringTimebar: false,
-            showSpeedModal: false,
-            showCurrentSpeed: false,
-            hideCurrentSpeed: null,
-            showCurrentVolume: false,
-            hideCurrentVolume: null,
-            playbackSpeedInput: null,
-            currentTime: 0,
-            seekbarPadding: 2,
-            error: 0,
-        };
-    },
-    computed: {
-        shouldAutoPlay: _this => {
-            return _this.getPreferenceBoolean("playerAutoPlay", true) && !_this.isEmbed;
-        },
-        preferredVideoCodecs: _this => {
-            var preferredVideoCodecs = [];
-            const enabledCodecs = _this.getPreferenceString("enabledCodecs", "vp9,avc").split(",");
+const route = useRoute();
+const { t } = useI18n();
 
-            if (
-                _this.$refs.videoEl.canPlayType('video/mp4; codecs="av01.0.08M.08"') !== "" &&
-                enabledCodecs.includes("av1")
-            )
-                preferredVideoCodecs.push("av01");
-            if (_this.$refs.videoEl.canPlayType('video/webm; codecs="vp9"') !== "" && enabledCodecs.includes("vp9"))
-                preferredVideoCodecs.push("vp9");
-            if (
-                _this.$refs.videoEl.canPlayType('video/mp4; codecs="avc1.4d401f"') !== "" &&
-                enabledCodecs.includes("avc")
-            )
-                preferredVideoCodecs.push("avc1");
-
-            return preferredVideoCodecs;
+const props = defineProps({
+    video: {
+        type: Object,
+        default: () => {
+            return {};
         },
     },
-    mounted() {
-        if (!this.$shaka) this.shakaPromise = shaka.then(shaka => shaka.default).then(shaka => (this.$shaka = shaka));
-        if (!this.$hotkeys)
-            this.hotkeysPromise = hotkeys.then(mod => mod.default).then(hotkeys => (this.$hotkeys = hotkeys));
+    sponsors: {
+        type: Object,
+        default: () => {
+            return {};
+        },
     },
-    activated() {
-        this.destroying = false;
-        this.sponsors?.segments?.forEach(segment => (segment.skipped = false));
-        this.hotkeysPromise.then(() => {
-            var self = this;
-            this.$hotkeys(
-                "f,m,j,k,l,c,space,up,down,left,right,ctrl+left,ctrl+right,home,end,0,1,2,3,4,5,6,7,8,9,shift+n,shift+s,shift+,,shift+.,alt+p,return,.,,",
-                function (e, handler) {
-                    const videoEl = self.$refs.videoEl;
-                    switch (handler.key) {
-                        case "f":
-                            self.$ui.getControls().toggleFullScreen();
-                            e.preventDefault();
-                            break;
-                        case "m":
-                            videoEl.muted = !videoEl.muted;
-                            e.preventDefault();
-                            break;
-                        case "j":
-                            videoEl.currentTime = Math.max(videoEl.currentTime - 15, 0);
-                            e.preventDefault();
-                            break;
-                        case "l":
-                            videoEl.currentTime = videoEl.currentTime + 15;
-                            e.preventDefault();
-                            break;
-                        case "c":
-                            self.$player.setTextTrackVisibility(!self.$player.isTextTrackVisible());
-                            e.preventDefault();
-                            break;
-                        case "k":
-                        case "space":
-                            if (videoEl.paused) videoEl.play();
-                            else videoEl.pause();
-                            e.preventDefault();
-                            break;
-                        case "up":
-                            self.adjustPlaybackVolume(videoEl.volume + 0.05);
-                            e.preventDefault();
-                            break;
-                        case "down":
-                            self.adjustPlaybackVolume(videoEl.volume - 0.05);
-                            e.preventDefault();
-                            break;
-                        case "left":
-                            videoEl.currentTime = Math.max(videoEl.currentTime - 5, 0);
-                            e.preventDefault();
-                            break;
-                        case "right":
-                            videoEl.currentTime = videoEl.currentTime + 5;
-                            e.preventDefault();
-                            break;
-                        case "ctrl+left": {
-                            videoEl.currentTime = self.video.chapters.findLast(
-                                chapter => chapter.start < videoEl.currentTime,
-                            ).start;
-                            e.preventDefault();
-                            break;
-                        }
-                        case "ctrl+right": {
-                            videoEl.currentTime =
-                                self.video.chapters.find(chapter => chapter.start > videoEl.currentTime)?.start ||
-                                videoEl.duration;
-                            e.preventDefault();
-                            break;
-                        }
-                        case "home":
-                            videoEl.currentTime = 0;
-                            e.preventDefault();
-                            break;
-                        case "end":
-                            videoEl.currentTime = videoEl.duration;
-                            e.preventDefault();
-                            break;
-                        case "0":
-                            videoEl.currentTime = 0;
-                            e.preventDefault();
-                            break;
-                        case "1":
-                            videoEl.currentTime = videoEl.duration * 0.1;
-                            e.preventDefault();
-                            break;
-                        case "2":
-                            videoEl.currentTime = videoEl.duration * 0.2;
-                            e.preventDefault();
-                            break;
-                        case "3":
-                            videoEl.currentTime = videoEl.duration * 0.3;
-                            e.preventDefault();
-                            break;
-                        case "4":
-                            videoEl.currentTime = videoEl.duration * 0.4;
-                            e.preventDefault();
-                            break;
-                        case "5":
-                            videoEl.currentTime = videoEl.duration * 0.5;
-                            e.preventDefault();
-                            break;
-                        case "6":
-                            videoEl.currentTime = videoEl.duration * 0.6;
-                            e.preventDefault();
-                            break;
-                        case "7":
-                            videoEl.currentTime = videoEl.duration * 0.7;
-                            e.preventDefault();
-                            break;
-                        case "8":
-                            videoEl.currentTime = videoEl.duration * 0.8;
-                            e.preventDefault();
-                            break;
-                        case "9":
-                            videoEl.currentTime = videoEl.duration * 0.9;
-                            e.preventDefault();
-                            break;
-                        case "shift+n":
-                            self.$emit("navigateNext");
-                            e.preventDefault();
-                            break;
-                        case "shift+s":
-                            self.showSpeedModal = true;
-                            break;
-                        case "shift+,":
-                            self.adjustPlaybackSpeed(videoEl.playbackRate - 0.25);
-                            break;
-                        case "shift+.":
-                            self.adjustPlaybackSpeed(videoEl.playbackRate + 0.25);
-                            break;
-                        case "alt+p":
-                            document.pictureInPictureElement
-                                ? document.exitPictureInPicture()
-                                : videoEl.requestPictureInPicture();
-                            break;
-                        case "return":
-                            self.skipSegment(videoEl);
-                            break;
-                        case ".":
-                            videoEl.currentTime += 0.04;
-                            e.preventDefault();
-                            break;
-                        case ",":
-                            videoEl.currentTime -= 0.04;
-                            e.preventDefault();
-                            break;
-                    }
-                },
-            );
+    selectedAutoPlay: Boolean,
+    selectedAutoLoop: Boolean,
+    isEmbed: Boolean,
+});
+
+const emit = defineEmits(["timeupdate", "ended", "navigateNext"]);
+
+const container = ref(null);
+const videoEl = ref(null);
+const previewContainer = ref(null);
+const preview = ref(null);
+
+const lastUpdate = ref(new Date().getTime());
+const initialSeekComplete = ref(false);
+const destroying = ref(false);
+const inSegment = ref(false);
+const isHoveringTimebar = ref(false);
+const showSpeedModal = ref(false);
+const showCurrentSpeed = ref(false);
+let hideCurrentSpeedTimeout = null;
+const showCurrentVolume = ref(false);
+let hideCurrentVolumeTimeout = null;
+const playbackSpeedInput = ref(null);
+const currentTime = ref(0);
+const seekbarPadding = ref(2);
+const error = ref(0);
+
+let shakaLib = null;
+let playerInstance = null;
+let uiInstance = null;
+let hotkeysLib = null;
+let shakaPromise = null;
+let hotkeysPromise = null;
+
+const shouldAutoPlay = computed(() => {
+    return getPreferenceBoolean("playerAutoPlay", true) && !props.isEmbed;
+});
+
+const preferredVideoCodecs = computed(() => {
+    var preferredVideoCodecs = [];
+    const enabledCodecs = getPreferenceString("enabledCodecs", "vp9,avc").split(",");
+
+    if (videoEl.value.canPlayType('video/mp4; codecs="av01.0.08M.08"') !== "" && enabledCodecs.includes("av1"))
+        preferredVideoCodecs.push("av01");
+    if (videoEl.value.canPlayType('video/webm; codecs="vp9"') !== "" && enabledCodecs.includes("vp9"))
+        preferredVideoCodecs.push("vp9");
+    if (videoEl.value.canPlayType('video/mp4; codecs="avc1.4d401f"') !== "" && enabledCodecs.includes("avc"))
+        preferredVideoCodecs.push("avc1");
+
+    return preferredVideoCodecs;
+});
+
+function findCurrentSegment(time) {
+    return props.sponsors?.segments?.find(s => time >= s.segment[0] && time < s.segment[1]);
+}
+
+function onClickSkipSegment() {
+    skipSegment(videoEl.value);
+}
+
+function skipSegment(el, segment) {
+    const time = el.currentTime;
+    if (!segment) segment = findCurrentSegment(time);
+    if (!segment) return;
+    console.log("Skipped segment at " + time);
+    el.currentTime = segment.segment[1];
+    segment.skipped = true;
+}
+
+function adjustPlaybackSpeed(newSpeed) {
+    const normalizedSpeed = Math.min(4, Math.max(0.25, newSpeed));
+    playerInstance.trickPlay(normalizedSpeed);
+    if (hideCurrentSpeedTimeout) window.clearTimeout(hideCurrentSpeedTimeout);
+    showCurrentSpeed.value = false;
+    showCurrentSpeed.value = true;
+    hideCurrentSpeedTimeout = window.setTimeout(() => (showCurrentSpeed.value = false), 1500);
+}
+
+function adjustPlaybackVolume(newVolume) {
+    const normalizedVolume = Math.min(1, Math.max(0, newVolume));
+    videoEl.value.volume = normalizedVolume;
+    if (hideCurrentVolumeTimeout) window.clearTimeout(hideCurrentVolumeTimeout);
+    showCurrentVolume.value = false;
+    showCurrentVolume.value = true;
+    hideCurrentVolumeTimeout = window.setTimeout(() => (showCurrentVolume.value = false), 1500);
+}
+
+function setSpeedFromInput() {
+    try {
+        const newSpeed = Number(playbackSpeedInput.value);
+        adjustPlaybackSpeed(newSpeed);
+    } catch (err) {
+        alert(t("actions.invalid_input"));
+    }
+    showSpeedModal.value = false;
+}
+
+function updateMarkers() {
+    const markers = container.value.querySelector(".shaka-ad-markers");
+    const array = ["to right"];
+    props.sponsors?.segments?.forEach(segment => {
+        const start = (segment.segment[0] / props.video.duration) * 100;
+        const end = (segment.segment[1] / props.video.duration) * 100;
+
+        var color = [
+            "sponsor",
+            "selfpromo",
+            "interaction",
+            "poi_highlight",
+            "intro",
+            "outro",
+            "preview",
+            "filler",
+            "music_offtopic",
+        ].includes(segment.category)
+            ? `var(--spon-seg-${segment.category})`
+            : "var(--spon-seg-default)";
+
+        array.push(`transparent ${start}%`);
+        array.push(`${color} ${start}%`);
+        array.push(`${color} ${end}%`);
+        array.push(`transparent ${end}%`);
+    });
+
+    if (array.length <= 1) {
+        return;
+    }
+
+    if (markers) markers.style.background = `linear-gradient(${array.join(",")})`;
+}
+
+function updateSponsors() {
+    if (getPreferenceBoolean("showMarkers", true)) {
+        shakaPromise.then(() => {
+            updateMarkers();
         });
-    },
-    deactivated() {
-        this.destroying = true;
-        this.destroy(true);
-    },
-    unmounted() {
-        this.destroying = true;
-        this.destroy(true);
-    },
-    methods: {
-        async loadVideo() {
-            this.updateSponsors();
+    }
+}
 
-            const component = this;
-            const videoEl = this.$refs.videoEl;
+function setupSeekbarPreview() {
+    if (!props.video.previewFrames) return;
+    let seekBar = document.querySelector(".shaka-seek-bar");
+    seekBar.addEventListener("mousemove", e => {
+        isHoveringTimebar.value = true;
+        const position = (e.offsetX / e.target.offsetWidth) * props.video.duration;
+        showSeekbarPreview(position * 1000);
+    });
+    seekBar.addEventListener("mouseout", () => {
+        isHoveringTimebar.value = false;
+        previewContainer.value.style.display = "none";
+    });
+}
 
-            videoEl.setAttribute("poster", this.video.thumbnailUrl);
+async function showSeekbarPreview(position) {
+    const frame = getFrame(position);
+    const originalImage = await loadImage(frame.url);
+    if (!isHoveringTimebar.value) return;
 
-            const noPrevPlayer = !this.$player;
+    const seekBar = document.querySelector(".shaka-seek-bar");
+    const containerEl = previewContainer.value;
+    const canvas = preview.value;
+    const ctx = canvas.getContext("2d");
 
-            var streams = [];
+    const offsetX = frame.positionX * frame.frameWidth;
+    const offsetY = frame.positionY * frame.frameHeight;
 
-            streams.push(...this.video.audioStreams);
-            streams.push(...this.video.videoStreams);
+    canvas.width = frame.frameWidth > 100 ? frame.frameWidth : frame.frameWidth * 2;
+    canvas.height = frame.frameWidth > 100 ? frame.frameHeight : frame.frameHeight * 2;
+    ctx.drawImage(
+        originalImage,
+        offsetX,
+        offsetY,
+        frame.frameWidth,
+        frame.frameHeight,
+        0,
+        0,
+        canvas.width,
+        canvas.height,
+    );
 
-            const MseSupport = window.MediaSource !== undefined || window.ManagedMediaSource !== undefined;
+    const centerOffset = position / props.video.duration / 10;
+    const left = centerOffset - ((0.5 * canvas.width) / seekBar.clientWidth) * 100;
+    const maxLeft = ((seekBar.clientWidth - canvas.clientWidth) / seekBar.clientWidth) * 100 - seekbarPadding.value;
 
-            const lbry = null;
+    currentTime.value = position / 1000;
 
-            var uri;
-            var mime;
+    containerEl.style.left = `max(${seekbarPadding.value}%, min(${left}%, ${maxLeft}%))`;
+    containerEl.style.display = "flex";
+}
 
-            if (this.video.livestream) {
-                uri = this.video.hls;
-                mime = "application/x-mpegURL";
-            } else if (
-                this.video.audioStreams.length > 0 &&
-                !lbry &&
-                MseSupport &&
-                !this.getPreferenceBoolean("preferHls", false)
-            ) {
-                if (!this.video.dash) {
-                    const dash = (await import("../utils/DashUtils.js")).generate_dash_file_from_formats(
-                        streams,
-                        this.video.duration,
-                    );
-
-                    uri = "data:application/dash+xml;charset=utf-8;base64," + btoa(dash);
-                } else {
-                    const url = new URL(this.video.dash);
-                    url.searchParams.set("rewrite", false);
-                    uri = url.toString();
+function getFrame(position) {
+    let startPosition = 0;
+    const framePage = props.video.previewFrames.at(-1);
+    for (let i = 0; i < framePage.urls.length; i++) {
+        for (let positionY = 0; positionY < framePage.framesPerPageY; positionY++) {
+            for (let positionX = 0; positionX < framePage.framesPerPageX; positionX++) {
+                const endPosition = startPosition + framePage.durationPerFrame;
+                if (position >= startPosition && position <= endPosition) {
+                    return {
+                        url: framePage.urls[i],
+                        positionX: positionX,
+                        positionY: positionY,
+                        frameWidth: framePage.frameWidth,
+                        frameHeight: framePage.frameHeight,
+                    };
                 }
-                mime = "application/dash+xml";
-            } else if (lbry) {
-                uri = lbry.url;
-                if (this.getPreferenceBoolean("proxyLBRY", false)) {
-                    const url = new URL(uri);
-                    const proxyURL = new URL(this.video.proxyUrl);
-                    let proxyPath = proxyURL.pathname;
-                    if (proxyPath.lastIndexOf("/") === proxyPath.length - 1) {
-                        proxyPath = proxyPath.substring(0, proxyPath.length - 1);
-                    }
+                startPosition = endPosition;
+            }
+        }
+    }
+    return null;
+}
 
+function loadImage(url) {
+    return new Promise(r => {
+        const i = new Image();
+        i.onload = () => r(i);
+        i.src = url;
+    });
+}
+
+async function updateProgressDatabase(time) {
+    if (new Date().getTime() - lastUpdate.value < 500) return;
+    lastUpdate.value = new Date().getTime();
+
+    if (!initialSeekComplete.value || !props.video.id || !window.db) return;
+
+    var tx = window.db.transaction("watch_history", "readwrite");
+    var store = tx.objectStore("watch_history");
+    var request = store.get(props.video.id);
+    request.onsuccess = function (event) {
+        var video = event.target.result;
+        if (video) {
+            video.currentTime = time;
+            store.put(video);
+        }
+    };
+}
+
+function seek(time) {
+    if (videoEl.value) {
+        videoEl.value.currentTime = time;
+    }
+}
+
+async function setPlayerAttrs(localPlayer, el, uri, mime, shaka) {
+    const url = "/watch?v=" + props.video.id;
+
+    if (!uiInstance) {
+        destroy();
+        const OpenButton = class extends shaka.ui.Element {
+            constructor(parent, controls) {
+                super(parent, controls);
+
+                this.newTabButton_ = document.createElement("button");
+                this.newTabButton_.classList.add("shaka-cast-button");
+                this.newTabButton_.classList.add("shaka-tooltip");
+                this.newTabButton_.ariaPressed = "false";
+
+                this.newTabIcon_ = document.createElement("i");
+                this.newTabIcon_.classList.add("material-icons-round");
+                this.newTabIcon_.textContent = "launch";
+                this.newTabButton_.appendChild(this.newTabIcon_);
+
+                const label = document.createElement("label");
+                label.classList.add("shaka-overflow-button-label");
+                label.classList.add("shaka-overflow-menu-only");
+                this.newTabNameSpan_ = document.createElement("span");
+                this.newTabNameSpan_.innerText = "Open in new tab";
+                label.appendChild(this.newTabNameSpan_);
+
+                this.newTabButton_.appendChild(label);
+                this.parent.appendChild(this.newTabButton_);
+
+                this.eventManager.listen(this.newTabButton_, "click", () => {
+                    this.video.pause();
+                    window.open(url);
+                });
+            }
+        };
+
+        OpenButton.Factory = class {
+            create(rootElement, controls) {
+                return new OpenButton(rootElement, controls);
+            }
+        };
+
+        shaka.ui.OverflowMenu.registerElement("open_new_tab", new OpenButton.Factory());
+
+        uiInstance = new shaka.ui.Overlay(localPlayer, container.value, el);
+
+        const overflowMenuButtons = ["quality", "captions", "picture_in_picture", "playback_rate", "airplay"];
+
+        if (props.isEmbed) {
+            overflowMenuButtons.push("open_new_tab");
+        }
+
+        const config = {
+            overflowMenuButtons: overflowMenuButtons,
+            seekBarColors: {
+                base: "var(--player-base)",
+                buffered: "var(--player-buffered)",
+                played: "var(--player-played)",
+            },
+        };
+
+        uiInstance.configure(config);
+    }
+
+    updateMarkers();
+
+    const event = new Event("playerInit");
+    window.dispatchEvent(event);
+
+    const player = uiInstance.getControls().getPlayer();
+
+    setupSeekbarPreview();
+
+    playerInstance = player;
+
+    const disableVideo = getPreferenceBoolean("listen", false) && !props.video.livestream;
+
+    const prefetchLimit = Math.min(Math.max(getPreferenceNumber("prefetchLimit", 2), 0), 10);
+
+    playerInstance.configure({
+        preferredVideoCodecs: preferredVideoCodecs.value,
+        preferredAudioCodecs: ["opus", "mp4a"],
+        manifest: {
+            disableVideo: disableVideo,
+        },
+        streaming: {
+            segmentPrefetchLimit: prefetchLimit,
+            retryParameters: {
+                maxAttempts: Infinity,
+                baseDelay: 250,
+                backoffFactor: 1.5,
+            },
+        },
+    });
+
+    const quality = getPreferenceNumber("quality", 0);
+    const qualityConds =
+        quality > 0 && (props.video.audioStreams.length > 0 || props.video.livestream) && !disableVideo;
+    if (qualityConds) playerInstance.configure("abr.enabled", false);
+
+    const time = route.query.t ?? route.query.start;
+
+    var startTime = 0;
+
+    if (time) {
+        startTime = parseTimeParam(time);
+        initialSeekComplete.value = true;
+    } else if (window.db && getPreferenceBoolean("watchHistory", false)) {
+        await new Promise(resolve => {
+            var tx = window.db.transaction("watch_history", "readonly");
+            var store = tx.objectStore("watch_history");
+            var request = store.get(props.video.id);
+            request.onsuccess = function (event) {
+                var video = event.target.result;
+                const currentTime = video?.currentTime;
+                if (currentTime) {
+                    if (currentTime < video.duration * 0.9) {
+                        startTime = currentTime;
+                    }
+                }
+                resolve();
+            };
+
+            tx.oncomplete = () => {
+                initialSeekComplete.value = true;
+            };
+        });
+    } else {
+        initialSeekComplete.value = true;
+    }
+
+    player
+        .load(uri, startTime, mime)
+        .then(() => {
+            let lang = "en";
+            const prefLang = getPreferenceString("hl", "en").substr(0, 2);
+            if (player.getAudioLanguages().includes(prefLang)) lang = prefLang;
+            player.selectAudioLanguage(lang);
+
+            const audioLanguages = player.getAudioLanguages();
+            if (audioLanguages.length > 1) {
+                const overflowMenuButtons = uiInstance.getConfiguration().overflowMenuButtons;
+                const newOverflowMenuButtons = [
+                    ...overflowMenuButtons.slice(0, 1),
+                    "language",
+                    ...overflowMenuButtons.slice(1),
+                ];
+                uiInstance.configure("overflowMenuButtons", newOverflowMenuButtons);
+            }
+
+            if (qualityConds) {
+                var leastDiff = Number.MAX_VALUE;
+                var bestStream = null;
+
+                var bestAudio = 0;
+
+                const tracks = player
+                    .getVariantTracks()
+                    .filter(track => track.language == lang || track.language == "und");
+
+                if (quality >= 480)
+                    tracks.forEach(track => {
+                        const audioBandwidth = track.audioBandwidth;
+                        if (audioBandwidth > bestAudio) bestAudio = audioBandwidth;
+                    });
+
+                tracks
+                    .sort((a, b) => a.bandwidth - b.bandwidth)
+                    .forEach(stream => {
+                        if (stream.audioBandwidth < bestAudio) return;
+
+                        const diff = Math.abs(quality - stream.height);
+                        if (diff < leastDiff) {
+                            leastDiff = diff;
+                            bestStream = stream;
+                        }
+                    });
+
+                player.selectVariantTrack(bestStream, true);
+            }
+
+            props.video.subtitles.map(subtitle => {
+                player.addTextTrackAsync(
+                    subtitle.url,
+                    subtitle.code,
+                    "subtitles",
+                    subtitle.mimeType,
+                    null,
+                    subtitle.name,
+                );
+            });
+            el.volume = getPreferenceNumber("volume", 1);
+            const rate = getPreferenceNumber("rate", 1);
+            el.playbackRate = rate;
+            el.defaultPlaybackRate = rate;
+
+            const autoDisplayCaptions = getPreferenceBoolean("autoDisplayCaptions", false);
+            playerInstance.setTextTrackVisibility(autoDisplayCaptions);
+
+            const prefSubtitles = getPreferenceString("subtitles", "");
+            if (prefSubtitles !== "") {
+                const textTracks = playerInstance.getTextTracks();
+                const subtitleIdx = textTracks.findIndex(textTrack => textTrack.language == prefSubtitles);
+                if (subtitleIdx != -1) {
+                    playerInstance.setTextTrackVisibility(true);
+                    playerInstance.selectTextTrack(textTracks[subtitleIdx]);
+                }
+            }
+        })
+        .catch(e => {
+            console.error(e);
+            error.value = e.code;
+        });
+
+    if (route.query.fullscreen === "true" && !uiInstance.getControls().isFullScreenEnabled())
+        uiInstance.getControls().toggleFullScreen();
+
+    const seekbar = container.value.querySelector(".shaka-seek-bar");
+    const array = ["to right"];
+    for (const chapter of props.video.chapters) {
+        const start = (chapter.start / props.video.duration) * 100;
+        if (start === 0) {
+            continue;
+        }
+        array.push(`transparent ${start}%`);
+        array.push(`black ${start}%`);
+        array.push(`black calc(${start}% + 1px)`);
+        array.push(`transparent calc(${start}% + 1px)`);
+    }
+    seekbar.style.background = `linear-gradient(${array.join(",")})`;
+
+    seekbar.addEventListener("mouseup", () => {
+        videoEl.value.focus();
+    });
+}
+
+async function loadVideo() {
+    updateSponsors();
+
+    const el = videoEl.value;
+
+    el.setAttribute("poster", props.video.thumbnailUrl);
+
+    const noPrevPlayer = !playerInstance;
+
+    var streams = [];
+
+    streams.push(...props.video.audioStreams);
+    streams.push(...props.video.videoStreams);
+
+    const MseSupport = window.MediaSource !== undefined || window.ManagedMediaSource !== undefined;
+
+    const lbry = null;
+
+    var uri;
+    var mime;
+
+    if (props.video.livestream) {
+        uri = props.video.hls;
+        mime = "application/x-mpegURL";
+    } else if (
+        props.video.audioStreams.length > 0 &&
+        !lbry &&
+        MseSupport &&
+        !getPreferenceBoolean("preferHls", false)
+    ) {
+        if (!props.video.dash) {
+            const dash = (await import("../utils/DashUtils.js")).generate_dash_file_from_formats(
+                streams,
+                props.video.duration,
+            );
+
+            uri = "data:application/dash+xml;charset=utf-8;base64," + btoa(dash);
+        } else {
+            const url = new URL(props.video.dash);
+            url.searchParams.set("rewrite", false);
+            uri = url.toString();
+        }
+        mime = "application/dash+xml";
+    } else if (lbry) {
+        uri = lbry.url;
+        if (getPreferenceBoolean("proxyLBRY", false)) {
+            const url = new URL(uri);
+            const proxyURL = new URL(props.video.proxyUrl);
+            let proxyPath = proxyURL.pathname;
+            if (proxyPath.lastIndexOf("/") === proxyPath.length - 1) {
+                proxyPath = proxyPath.substring(0, proxyPath.length - 1);
+            }
+
+            url.searchParams.set("host", url.host);
+            url.protocol = proxyURL.protocol;
+            url.host = proxyURL.host;
+            url.pathname = proxyPath + url.pathname;
+            uri = url.toString();
+        }
+        const contentType = await fetch(uri, {
+            method: "HEAD",
+        }).then(response => {
+            uri = response.url;
+            return response.headers.get("Content-Type");
+        });
+        mime = contentType;
+    } else if (props.video.dash && !getPreferenceBoolean("preferHls", false)) {
+        uri = props.video.dash;
+        mime = "application/dash+xml";
+    } else if (props.video.hls) {
+        uri = props.video.hls;
+        mime = "application/x-mpegURL";
+    } else {
+        uri = props.video.videoStreams.findLast(stream => stream.codec == null).url;
+        mime = "video/mp4";
+    }
+
+    if (noPrevPlayer)
+        shakaPromise.then(async () => {
+            if (destroying.value) return;
+            shakaLib.polyfill.installAll();
+
+            const localPlayer = new shakaLib.Player();
+            await localPlayer.attach(el);
+            const proxyURL = new URL(props.video.proxyUrl);
+            let proxyPath = proxyURL.pathname;
+            if (proxyPath.lastIndexOf("/") === proxyPath.length - 1) {
+                proxyPath = proxyPath.substring(0, proxyPath.length - 1);
+            }
+
+            localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
+                const uri = request.uris[0];
+                var url = new URL(uri);
+                const headers = request.headers;
+                if (
+                    url.host.endsWith(".googlevideo.com") ||
+                    (url.host.endsWith(".lbryplayer.xyz") &&
+                        (getPreferenceBoolean("proxyLBRY", false) || headers.Range))
+                ) {
                     url.searchParams.set("host", url.host);
                     url.protocol = proxyURL.protocol;
                     url.host = proxyURL.host;
                     url.pathname = proxyPath + url.pathname;
-                    uri = url.toString();
+                    request.uris[0] = url.toString();
                 }
-                const contentType = await fetch(uri, {
-                    method: "HEAD",
-                }).then(response => {
-                    uri = response.url;
-                    return response.headers.get("Content-Type");
-                });
-                mime = contentType;
-            } else if (this.video.dash && !this.getPreferenceBoolean("preferHls", false)) {
-                uri = this.video.dash;
-                mime = "application/dash+xml";
-            } else if (this.video.hls) {
-                uri = this.video.hls;
-                mime = "application/x-mpegURL";
-            } else {
-                uri = this.video.videoStreams.findLast(stream => stream.codec == null).url;
-                mime = "video/mp4";
-            }
-
-            if (noPrevPlayer)
-                this.shakaPromise.then(async () => {
-                    if (this.destroying) return;
-                    this.$shaka.polyfill.installAll();
-
-                    const localPlayer = new this.$shaka.Player();
-                    await localPlayer.attach(videoEl);
-                    const proxyURL = new URL(component.video.proxyUrl);
-                    let proxyPath = proxyURL.pathname;
-                    if (proxyPath.lastIndexOf("/") === proxyPath.length - 1) {
-                        proxyPath = proxyPath.substring(0, proxyPath.length - 1);
-                    }
-
-                    localPlayer.getNetworkingEngine().registerRequestFilter((_type, request) => {
-                        const uri = request.uris[0];
-                        var url = new URL(uri);
-                        const headers = request.headers;
-                        if (
-                            url.host.endsWith(".googlevideo.com") ||
-                            (url.host.endsWith(".lbryplayer.xyz") &&
-                                (component.getPreferenceBoolean("proxyLBRY", false) || headers.Range))
-                        ) {
-                            url.searchParams.set("host", url.host);
-                            url.protocol = proxyURL.protocol;
-                            url.host = proxyURL.host;
-                            url.pathname = proxyPath + url.pathname;
-                            request.uris[0] = url.toString();
-                        }
-                        if (url.pathname === proxyPath + "/videoplayback") {
-                            if (headers.Range) {
-                                url.searchParams.set("range", headers.Range.split("=")[1]);
-                                request.headers = {};
-                                request.uris[0] = url.toString();
-                            }
-                        }
-                    });
-
-                    localPlayer.configure(
-                        "streaming.bufferingGoal",
-                        Math.max(this.getPreferenceNumber("bufferGoal", 10), 10),
-                    );
-                    localPlayer.configure("streaming.bufferBehind", 300);
-
-                    this.setPlayerAttrs(localPlayer, videoEl, uri, mime, this.$shaka);
-                });
-            else this.setPlayerAttrs(this.$player, videoEl, uri, mime, this.$shaka);
-
-            if (noPrevPlayer) {
-                videoEl.addEventListener("loadeddata", () => {
-                    if (document.pictureInPictureElement) videoEl.requestPictureInPicture();
-                });
-                videoEl.addEventListener("timeupdate", () => {
-                    const time = videoEl.currentTime;
-                    this.$emit("timeupdate", time);
-                    this.updateProgressDatabase(time);
-                    if (this.sponsors && this.sponsors.segments) {
-                        const segment = this.findCurrentSegment(time);
-                        this.inSegment = !!segment;
-                        if (segment?.autoskip && (!segment.skipped || this.selectedAutoLoop)) {
-                            this.skipSegment(videoEl, segment);
-                        }
-                    }
-                });
-
-                videoEl.addEventListener("volumechange", () => {
-                    this.setPreference("volume", videoEl.volume, true);
-                });
-
-                videoEl.addEventListener("ratechange", e => {
-                    const rate = videoEl.playbackRate;
-                    if (rate > 0 && !isNaN(videoEl.duration) && !isNaN(videoEl.duration - e.timeStamp / 1000))
-                        this.setPreference("rate", rate, true);
-                });
-
-                videoEl.addEventListener("ended", () => {
-                    this.$emit("ended");
-                });
-            }
-            //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
-        },
-        findCurrentSegment(time) {
-            return this.sponsors?.segments?.find(s => time >= s.segment[0] && time < s.segment[1]);
-        },
-        onClickSkipSegment() {
-            const videoEl = this.$refs.videoEl;
-            this.skipSegment(videoEl);
-        },
-        skipSegment(videoEl, segment) {
-            const time = videoEl.currentTime;
-            if (!segment) segment = this.findCurrentSegment(time);
-            if (!segment) return;
-            console.log("Skipped segment at " + time);
-            videoEl.currentTime = segment.segment[1];
-            segment.skipped = true;
-        },
-        async setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka) {
-            const url = "/watch?v=" + this.video.id;
-
-            if (!this.$ui) {
-                this.destroy();
-                const OpenButton = class extends shaka.ui.Element {
-                    constructor(parent, controls) {
-                        super(parent, controls);
-
-                        this.newTabButton_ = document.createElement("button");
-                        this.newTabButton_.classList.add("shaka-cast-button");
-                        this.newTabButton_.classList.add("shaka-tooltip");
-                        this.newTabButton_.ariaPressed = "false";
-
-                        this.newTabIcon_ = document.createElement("i");
-                        this.newTabIcon_.classList.add("material-icons-round");
-                        this.newTabIcon_.textContent = "launch";
-                        this.newTabButton_.appendChild(this.newTabIcon_);
-
-                        const label = document.createElement("label");
-                        label.classList.add("shaka-overflow-button-label");
-                        label.classList.add("shaka-overflow-menu-only");
-                        this.newTabNameSpan_ = document.createElement("span");
-                        this.newTabNameSpan_.innerText = "Open in new tab";
-                        label.appendChild(this.newTabNameSpan_);
-
-                        this.newTabButton_.appendChild(label);
-                        this.parent.appendChild(this.newTabButton_);
-
-                        this.eventManager.listen(this.newTabButton_, "click", () => {
-                            this.video.pause();
-                            window.open(url);
-                        });
-                    }
-                };
-
-                OpenButton.Factory = class {
-                    create(rootElement, controls) {
-                        return new OpenButton(rootElement, controls);
-                    }
-                };
-
-                shaka.ui.OverflowMenu.registerElement("open_new_tab", new OpenButton.Factory());
-
-                this.$ui = new shaka.ui.Overlay(localPlayer, this.$refs.container, videoEl);
-
-                const overflowMenuButtons = ["quality", "captions", "picture_in_picture", "playback_rate", "airplay"];
-
-                if (this.isEmbed) {
-                    overflowMenuButtons.push("open_new_tab");
-                }
-
-                const config = {
-                    overflowMenuButtons: overflowMenuButtons,
-                    seekBarColors: {
-                        base: "var(--player-base)",
-                        buffered: "var(--player-buffered)",
-                        played: "var(--player-played)",
-                    },
-                };
-
-                this.$ui.configure(config);
-            }
-
-            this.updateMarkers();
-
-            const event = new Event("playerInit");
-            window.dispatchEvent(event);
-
-            const player = this.$ui.getControls().getPlayer();
-
-            this.setupSeekbarPreview();
-
-            this.$player = player;
-
-            const disableVideo = this.getPreferenceBoolean("listen", false) && !this.video.livestream;
-
-            const prefetchLimit = Math.min(Math.max(this.getPreferenceNumber("prefetchLimit", 2), 0), 10);
-
-            this.$player.configure({
-                preferredVideoCodecs: this.preferredVideoCodecs,
-                preferredAudioCodecs: ["opus", "mp4a"],
-                manifest: {
-                    disableVideo: disableVideo,
-                },
-                streaming: {
-                    segmentPrefetchLimit: prefetchLimit,
-                    retryParameters: {
-                        maxAttempts: Infinity,
-                        baseDelay: 250,
-                        backoffFactor: 1.5,
-                    },
-                },
-            });
-
-            const quality = this.getPreferenceNumber("quality", 0);
-            const qualityConds =
-                quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo;
-            if (qualityConds) this.$player.configure("abr.enabled", false);
-
-            const time = this.$route.query.t ?? this.$route.query.start;
-
-            var startTime = 0;
-
-            if (time) {
-                startTime = parseTimeParam(time);
-                this.initialSeekComplete = true;
-            } else if (window.db && this.getPreferenceBoolean("watchHistory", false)) {
-                await new Promise(resolve => {
-                    var tx = window.db.transaction("watch_history", "readonly");
-                    var store = tx.objectStore("watch_history");
-                    var request = store.get(this.video.id);
-                    request.onsuccess = function (event) {
-                        var video = event.target.result;
-                        const currentTime = video?.currentTime;
-                        if (currentTime) {
-                            if (currentTime < video.duration * 0.9) {
-                                startTime = currentTime;
-                            }
-                        }
-                        resolve();
-                    };
-
-                    tx.oncomplete = () => {
-                        this.initialSeekComplete = true;
-                    };
-                });
-            } else {
-                this.initialSeekComplete = true;
-            }
-
-            player
-                .load(uri, startTime, mime)
-                .then(() => {
-                    // Set the audio language
-                    let lang = "en";
-                    const prefLang = this.getPreferenceString("hl", "en").substr(0, 2);
-                    if (player.getAudioLanguages().includes(prefLang)) lang = prefLang;
-                    player.selectAudioLanguage(lang);
-
-                    const audioLanguages = player.getAudioLanguages();
-                    if (audioLanguages.length > 1) {
-                        const overflowMenuButtons = this.$ui.getConfiguration().overflowMenuButtons;
-                        // append language menu on index 1
-                        const newOverflowMenuButtons = [
-                            ...overflowMenuButtons.slice(0, 1),
-                            "language",
-                            ...overflowMenuButtons.slice(1),
-                        ];
-                        this.$ui.configure("overflowMenuButtons", newOverflowMenuButtons);
-                    }
-
-                    if (qualityConds) {
-                        var leastDiff = Number.MAX_VALUE;
-                        var bestStream = null;
-
-                        var bestAudio = 0;
-
-                        const tracks = player
-                            .getVariantTracks()
-                            .filter(track => track.language == lang || track.language == "und");
-
-                        // Choose the best audio stream
-                        if (quality >= 480)
-                            tracks.forEach(track => {
-                                const audioBandwidth = track.audioBandwidth;
-                                if (audioBandwidth > bestAudio) bestAudio = audioBandwidth;
-                            });
-
-                        // Find best matching stream based on resolution and bitrate
-                        tracks
-                            .sort((a, b) => a.bandwidth - b.bandwidth)
-                            .forEach(stream => {
-                                if (stream.audioBandwidth < bestAudio) return;
-
-                                const diff = Math.abs(quality - stream.height);
-                                if (diff < leastDiff) {
-                                    leastDiff = diff;
-                                    bestStream = stream;
-                                }
-                            });
-
-                        player.selectVariantTrack(bestStream, true);
-                    }
-
-                    this.video.subtitles.map(subtitle => {
-                        player.addTextTrackAsync(
-                            subtitle.url,
-                            subtitle.code,
-                            "subtitles",
-                            subtitle.mimeType,
-                            null,
-                            subtitle.name,
-                        );
-                    });
-                    videoEl.volume = this.getPreferenceNumber("volume", 1);
-                    const rate = this.getPreferenceNumber("rate", 1);
-                    videoEl.playbackRate = rate;
-                    videoEl.defaultPlaybackRate = rate;
-
-                    const autoDisplayCaptions = this.getPreferenceBoolean("autoDisplayCaptions", false);
-                    this.$player.setTextTrackVisibility(autoDisplayCaptions);
-
-                    const prefSubtitles = this.getPreferenceString("subtitles", "");
-                    if (prefSubtitles !== "") {
-                        const textTracks = this.$player.getTextTracks();
-                        const subtitleIdx = textTracks.findIndex(textTrack => textTrack.language == prefSubtitles);
-                        if (subtitleIdx != -1) {
-                            this.$player.setTextTrackVisibility(true);
-                            this.$player.selectTextTrack(textTracks[subtitleIdx]);
-                        }
-                    }
-                })
-                .catch(e => {
-                    console.error(e);
-                    this.error = e.code;
-                });
-
-            // expand the player to fullscreen when the fullscreen query equals true
-            if (this.$route.query.fullscreen === "true" && !this.$ui.getControls().isFullScreenEnabled())
-                this.$ui.getControls().toggleFullScreen();
-
-            const seekbar = this.$refs.container.querySelector(".shaka-seek-bar");
-            const array = ["to right"];
-            for (const chapter of this.video.chapters) {
-                const start = (chapter.start / this.video.duration) * 100;
-                if (start === 0) {
-                    continue;
-                }
-                array.push(`transparent ${start}%`);
-                array.push(`black ${start}%`);
-                array.push(`black calc(${start}% + 1px)`);
-                array.push(`transparent calc(${start}% + 1px)`);
-            }
-            seekbar.style.background = `linear-gradient(${array.join(",")})`;
-
-            seekbar.addEventListener("mouseup", () => {
-                this.$refs.videoEl.focus();
-            });
-        },
-        async updateProgressDatabase(time) {
-            // debounce
-            if (new Date().getTime() - this.lastUpdate < 500) return;
-            this.lastUpdate = new Date().getTime();
-
-            if (!this.initialSeekComplete || !this.video.id || !window.db) return;
-
-            var tx = window.db.transaction("watch_history", "readwrite");
-            var store = tx.objectStore("watch_history");
-            var request = store.get(this.video.id);
-            request.onsuccess = function (event) {
-                var video = event.target.result;
-                if (video) {
-                    video.currentTime = time;
-                    store.put(video);
-                }
-            };
-        },
-        seek(time) {
-            if (this.$refs.videoEl) {
-                this.$refs.videoEl.currentTime = time;
-            }
-        },
-        adjustPlaybackSpeed(newSpeed) {
-            const normalizedSpeed = Math.min(4, Math.max(0.25, newSpeed));
-            this.$player.trickPlay(normalizedSpeed);
-            if (this.hideCurrentSpeed) window.clearTimeout(this.hideCurrentSpeed);
-            this.showCurrentSpeed = false;
-            this.showCurrentSpeed = true;
-            this.hideCurrentSpeed = window.setTimeout(() => (this.showCurrentSpeed = false), 1500);
-        },
-        adjustPlaybackVolume(newVolume) {
-            const normalizedVolume = Math.min(1, Math.max(0, newVolume));
-            this.$refs.videoEl.volume = normalizedVolume;
-            if (this.hideCurrentVolume) window.clearTimeout(this.hideCurrentVolume);
-            this.showCurrentVolume = false;
-            this.showCurrentVolume = true;
-            this.hideCurrentVolume = window.setTimeout(() => (this.showCurrentVolume = false), 1500);
-        },
-        setSpeedFromInput() {
-            try {
-                const newSpeed = Number(this.playbackSpeedInput);
-                this.adjustPlaybackSpeed(newSpeed);
-            } catch (err) {
-                alert(this.$t("actions.invalid_input"));
-            }
-            this.showSpeedModal = false;
-        },
-        updateMarkers() {
-            const markers = this.$refs.container.querySelector(".shaka-ad-markers");
-            const array = ["to right"];
-            this.sponsors?.segments?.forEach(segment => {
-                const start = (segment.segment[0] / this.video.duration) * 100;
-                const end = (segment.segment[1] / this.video.duration) * 100;
-
-                var color = [
-                    "sponsor",
-                    "selfpromo",
-                    "interaction",
-                    "poi_highlight",
-                    "intro",
-                    "outro",
-                    "preview",
-                    "filler",
-                    "music_offtopic",
-                ].includes(segment.category)
-                    ? `var(--spon-seg-${segment.category})`
-                    : "var(--spon-seg-default)";
-
-                array.push(`transparent ${start}%`);
-                array.push(`${color} ${start}%`);
-                array.push(`${color} ${end}%`);
-                array.push(`transparent ${end}%`);
-            });
-
-            if (array.length <= 1) {
-                return;
-            }
-
-            if (markers) markers.style.background = `linear-gradient(${array.join(",")})`;
-        },
-        updateSponsors() {
-            if (this.getPreferenceBoolean("showMarkers", true)) {
-                this.shakaPromise.then(() => {
-                    this.updateMarkers();
-                });
-            }
-        },
-        setupSeekbarPreview() {
-            if (!this.video.previewFrames) return;
-            let seekBar = document.querySelector(".shaka-seek-bar");
-            // load the thumbnail preview when the user moves over the seekbar
-            seekBar.addEventListener("mousemove", e => {
-                this.isHoveringTimebar = true;
-                const position = (e.offsetX / e.target.offsetWidth) * this.video.duration;
-                this.showSeekbarPreview(position * 1000);
-            });
-            // hide the preview when the user stops hovering the seekbar
-            seekBar.addEventListener("mouseout", () => {
-                this.isHoveringTimebar = false;
-                this.$refs.previewContainer.style.display = "none";
-            });
-        },
-        async showSeekbarPreview(position) {
-            const frame = this.getFrame(position);
-            const originalImage = await this.loadImage(frame.url);
-            if (!this.isHoveringTimebar) return;
-
-            const seekBar = document.querySelector(".shaka-seek-bar");
-            const container = this.$refs.previewContainer;
-            const canvas = this.$refs.preview;
-            const ctx = canvas.getContext("2d");
-
-            const offsetX = frame.positionX * frame.frameWidth;
-            const offsetY = frame.positionY * frame.frameHeight;
-
-            canvas.width = frame.frameWidth > 100 ? frame.frameWidth : frame.frameWidth * 2;
-            canvas.height = frame.frameWidth > 100 ? frame.frameHeight : frame.frameHeight * 2;
-            // draw the thumbnail preview into the canvas by cropping only the relevant part
-            ctx.drawImage(
-                originalImage,
-                offsetX,
-                offsetY,
-                frame.frameWidth,
-                frame.frameHeight,
-                0,
-                0,
-                canvas.width,
-                canvas.height,
-            );
-
-            // calculate the thumbnail preview offset and display it
-            const centerOffset = position / this.video.duration / 10;
-            const left = centerOffset - ((0.5 * canvas.width) / seekBar.clientWidth) * 100;
-            const maxLeft =
-                ((seekBar.clientWidth - canvas.clientWidth) / seekBar.clientWidth) * 100 - this.seekbarPadding;
-
-            this.currentTime = position / 1000;
-
-            container.style.left = `max(${this.seekbarPadding}%, min(${left}%, ${maxLeft}%))`;
-            container.style.display = "flex";
-        },
-        // ineffective algorithm to find the thumbnail corresponding to the currently hovered position in the video
-        getFrame(position) {
-            let startPosition = 0;
-            const framePage = this.video.previewFrames.at(-1);
-            for (let i = 0; i < framePage.urls.length; i++) {
-                for (let positionY = 0; positionY < framePage.framesPerPageY; positionY++) {
-                    for (let positionX = 0; positionX < framePage.framesPerPageX; positionX++) {
-                        const endPosition = startPosition + framePage.durationPerFrame;
-                        if (position >= startPosition && position <= endPosition) {
-                            return {
-                                url: framePage.urls[i],
-                                positionX: positionX,
-                                positionY: positionY,
-                                frameWidth: framePage.frameWidth,
-                                frameHeight: framePage.frameHeight,
-                            };
-                        }
-                        startPosition = endPosition;
+                if (url.pathname === proxyPath + "/videoplayback") {
+                    if (headers.Range) {
+                        url.searchParams.set("range", headers.Range.split("=")[1]);
+                        request.headers = {};
+                        request.uris[0] = url.toString();
                     }
                 }
-            }
-            return null;
-        },
-        // creates a new image from an URL
-        loadImage(url) {
-            return new Promise(r => {
-                const i = new Image();
-                i.onload = () => r(i);
-                i.src = url;
             });
-        },
-        destroy(hotkeys) {
-            if (this.$ui && !document.pictureInPictureElement) {
-                this.$ui.destroy();
-                this.$ui = undefined;
-                this.$player = undefined;
+
+            localPlayer.configure("streaming.bufferingGoal", Math.max(getPreferenceNumber("bufferGoal", 10), 10));
+            localPlayer.configure("streaming.bufferBehind", 300);
+
+            setPlayerAttrs(localPlayer, el, uri, mime, shakaLib);
+        });
+    else setPlayerAttrs(playerInstance, el, uri, mime, shakaLib);
+
+    if (noPrevPlayer) {
+        el.addEventListener("loadeddata", () => {
+            if (document.pictureInPictureElement) el.requestPictureInPicture();
+        });
+        el.addEventListener("timeupdate", () => {
+            const time = el.currentTime;
+            emit("timeupdate", time);
+            updateProgressDatabase(time);
+            if (props.sponsors && props.sponsors.segments) {
+                const segment = findCurrentSegment(time);
+                inSegment.value = !!segment;
+                if (segment?.autoskip && (!segment.skipped || props.selectedAutoLoop)) {
+                    skipSegment(el, segment);
+                }
             }
-            if (this.$player) {
-                this.$player.destroy();
-                if (!document.pictureInPictureElement) this.$player = undefined;
-            }
-            if (hotkeys) this.$hotkeys?.unbind();
-            this.$refs.container?.querySelectorAll("div").forEach(node => node.remove());
-        },
-    },
-};
+        });
+
+        el.addEventListener("volumechange", () => {
+            setPreference("volume", el.volume, true);
+        });
+
+        el.addEventListener("ratechange", e => {
+            const rate = el.playbackRate;
+            if (rate > 0 && !isNaN(el.duration) && !isNaN(el.duration - e.timeStamp / 1000))
+                setPreference("rate", rate, true);
+        });
+
+        el.addEventListener("ended", () => {
+            emit("ended");
+        });
+    }
+}
+
+function destroy(hotkeys) {
+    if (uiInstance && !document.pictureInPictureElement) {
+        uiInstance.destroy();
+        uiInstance = undefined;
+        playerInstance = undefined;
+    }
+    if (playerInstance) {
+        playerInstance.destroy();
+        if (!document.pictureInPictureElement) playerInstance = undefined;
+    }
+    if (hotkeys) hotkeysLib?.unbind();
+    container.value?.querySelectorAll("div").forEach(node => node.remove());
+}
+
+onMounted(() => {
+    if (!shakaLib) shakaPromise = shakaImport.then(shaka => shaka.default).then(shaka => (shakaLib = shaka));
+    if (!hotkeysLib) hotkeysPromise = hotkeysImport.then(mod => mod.default).then(hk => (hotkeysLib = hk));
+});
+
+onActivated(() => {
+    destroying.value = false;
+    props.sponsors?.segments?.forEach(segment => (segment.skipped = false));
+    hotkeysPromise.then(() => {
+        hotkeysLib(
+            "f,m,j,k,l,c,space,up,down,left,right,ctrl+left,ctrl+right,home,end,0,1,2,3,4,5,6,7,8,9,shift+n,shift+s,shift+,,shift+.,alt+p,return,.,,",
+            function (e, handler) {
+                const el = videoEl.value;
+                switch (handler.key) {
+                    case "f":
+                        uiInstance.getControls().toggleFullScreen();
+                        e.preventDefault();
+                        break;
+                    case "m":
+                        el.muted = !el.muted;
+                        e.preventDefault();
+                        break;
+                    case "j":
+                        el.currentTime = Math.max(el.currentTime - 15, 0);
+                        e.preventDefault();
+                        break;
+                    case "l":
+                        el.currentTime = el.currentTime + 15;
+                        e.preventDefault();
+                        break;
+                    case "c":
+                        playerInstance.setTextTrackVisibility(!playerInstance.isTextTrackVisible());
+                        e.preventDefault();
+                        break;
+                    case "k":
+                    case "space":
+                        if (el.paused) el.play();
+                        else el.pause();
+                        e.preventDefault();
+                        break;
+                    case "up":
+                        adjustPlaybackVolume(el.volume + 0.05);
+                        e.preventDefault();
+                        break;
+                    case "down":
+                        adjustPlaybackVolume(el.volume - 0.05);
+                        e.preventDefault();
+                        break;
+                    case "left":
+                        el.currentTime = Math.max(el.currentTime - 5, 0);
+                        e.preventDefault();
+                        break;
+                    case "right":
+                        el.currentTime = el.currentTime + 5;
+                        e.preventDefault();
+                        break;
+                    case "ctrl+left": {
+                        el.currentTime = props.video.chapters.findLast(chapter => chapter.start < el.currentTime).start;
+                        e.preventDefault();
+                        break;
+                    }
+                    case "ctrl+right": {
+                        el.currentTime =
+                            props.video.chapters.find(chapter => chapter.start > el.currentTime)?.start || el.duration;
+                        e.preventDefault();
+                        break;
+                    }
+                    case "home":
+                        el.currentTime = 0;
+                        e.preventDefault();
+                        break;
+                    case "end":
+                        el.currentTime = el.duration;
+                        e.preventDefault();
+                        break;
+                    case "0":
+                        el.currentTime = 0;
+                        e.preventDefault();
+                        break;
+                    case "1":
+                        el.currentTime = el.duration * 0.1;
+                        e.preventDefault();
+                        break;
+                    case "2":
+                        el.currentTime = el.duration * 0.2;
+                        e.preventDefault();
+                        break;
+                    case "3":
+                        el.currentTime = el.duration * 0.3;
+                        e.preventDefault();
+                        break;
+                    case "4":
+                        el.currentTime = el.duration * 0.4;
+                        e.preventDefault();
+                        break;
+                    case "5":
+                        el.currentTime = el.duration * 0.5;
+                        e.preventDefault();
+                        break;
+                    case "6":
+                        el.currentTime = el.duration * 0.6;
+                        e.preventDefault();
+                        break;
+                    case "7":
+                        el.currentTime = el.duration * 0.7;
+                        e.preventDefault();
+                        break;
+                    case "8":
+                        el.currentTime = el.duration * 0.8;
+                        e.preventDefault();
+                        break;
+                    case "9":
+                        el.currentTime = el.duration * 0.9;
+                        e.preventDefault();
+                        break;
+                    case "shift+n":
+                        emit("navigateNext");
+                        e.preventDefault();
+                        break;
+                    case "shift+s":
+                        showSpeedModal.value = true;
+                        break;
+                    case "shift+,":
+                        adjustPlaybackSpeed(el.playbackRate - 0.25);
+                        break;
+                    case "shift+.":
+                        adjustPlaybackSpeed(el.playbackRate + 0.25);
+                        break;
+                    case "alt+p":
+                        document.pictureInPictureElement
+                            ? document.exitPictureInPicture()
+                            : el.requestPictureInPicture();
+                        break;
+                    case "return":
+                        skipSegment(el);
+                        break;
+                    case ".":
+                        el.currentTime += 0.04;
+                        e.preventDefault();
+                        break;
+                    case ",":
+                        el.currentTime -= 0.04;
+                        e.preventDefault();
+                        break;
+                }
+            },
+        );
+    });
+});
+
+onDeactivated(() => {
+    destroying.value = true;
+    destroy(true);
+});
+
+onUnmounted(() => {
+    destroying.value = true;
+    destroy(true);
+});
+
+defineExpose({
+    loadVideo,
+    seek,
+    destroy,
+    updateSponsors,
+    isFullScreenEnabled: () => uiInstance?.getControls()?.isFullScreenEnabled(),
+});
 </script>
 
 <style>
diff --git a/src/components/VideoRedirect.vue b/src/components/VideoRedirect.vue
index be13ac65..086ae3fd 100644
--- a/src/components/VideoRedirect.vue
+++ b/src/components/VideoRedirect.vue
@@ -2,15 +2,19 @@
     <div v-t="'actions.loading'" />
 </template>
 
-<script>
-export default {
-    activated() {
-        const videoId = this.$route.params.videoId;
-        if (videoId)
-            this.$router.replace({
-                path: "/watch",
-                query: { v: videoId, t: this.$route.query.t },
-            });
-    },
-};
+<script setup>
+import { onActivated } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+onActivated(() => {
+    const videoId = route.params.videoId;
+    if (videoId)
+        router.replace({
+            path: "/watch",
+            query: { v: videoId, t: route.query.t },
+        });
+});
 </script>
diff --git a/src/components/VideoThumbnail.vue b/src/components/VideoThumbnail.vue
index 6341da6d..d7b556ef 100644
--- a/src/components/VideoThumbnail.vue
+++ b/src/components/VideoThumbnail.vue
@@ -31,31 +31,23 @@
         <span v-if="item.watched" v-t="'video.watched'" class="thumbnail-overlay bottom-5px left-5px" />
     </div>
 </template>
-<script>
-export default {
-    props: {
-        item: {
-            type: Object,
-            default: () => {
-                return {};
-            },
-        },
-        small: {
-            type: Boolean,
-            default: () => {
-                return false;
-            },
+<script setup>
+import { timeFormat } from "@/composables/useFormatting.js";
+
+defineProps({
+    item: {
+        type: Object,
+        default: () => {
+            return {};
         },
     },
-    computed: {
-        title() {
-            return this.item.dearrow?.titles[0]?.title ?? this.item.title;
-        },
-        thumbnail() {
-            return this.item.dearrow?.thumbnails[0]?.thumbnail ?? this.item.thumbnail;
+    small: {
+        type: Boolean,
+        default: () => {
+            return false;
         },
     },
-};
+});
 </script>
 
 <style>
diff --git a/src/components/WatchOnButton.vue b/src/components/WatchOnButton.vue
index cb498acb..88cc2bcb 100644
--- a/src/components/WatchOnButton.vue
+++ b/src/components/WatchOnButton.vue
@@ -1,17 +1,17 @@
-<script>
-export default {
-    props: {
-        link: {
-            type: String,
-            required: true,
-        },
-        platform: {
-            type: String,
-            required: false,
-            default: "YouTube",
-        },
+<script setup>
+import { getPreferenceBoolean } from "@/composables/usePreferences.js";
+
+defineProps({
+    link: {
+        type: String,
+        required: true,
     },
-};
+    platform: {
+        type: String,
+        required: false,
+        default: "YouTube",
+    },
+});
 </script>
 
 <template>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 06444ef5..5b1f37ba 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -152,7 +152,9 @@
                                     aria-label="RSS feed"
                                     title="RSS feed"
                                     role="button"
-                                    :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
+                                    :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${
+                                        video.uploaderUrl.split('/')[2]
+                                    }`"
                                     target="_blank"
                                     class="btn flex items-center"
                                 >
@@ -282,11 +284,11 @@
                         <button
                             v-if="!comments?.disabled"
                             class="btn mb-2"
-                            @click="toggleComments"
+                            @click="toggleCommentsVisibility"
                             v-text="
-                                `${$t(showComments ? 'actions.minimize_comments' : 'actions.show_comments')} (${numberFormat(
-                                    comments?.commentCount,
-                                )})`
+                                `${$t(
+                                    showComments ? 'actions.minimize_comments' : 'actions.show_comments',
+                                )} (${numberFormat(comments?.commentCount)})`
                             "
                         />
                     </div>
@@ -297,7 +299,7 @@
                     <div v-else-if="comments.disabled" class="">
                         <p v-t="'comment.disabled'" class="mt-8 text-center"></p>
                     </div>
-                    <div v-else ref="comments" class="">
+                    <div v-else ref="commentsEl" class="">
                         <CommentItem
                             v-for="comment in comments.comments"
                             :key="comment.commentId"
@@ -346,7 +348,9 @@
     </LoadingIndicatorPage>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted, onActivated, onDeactivated, onUnmounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import VideoPlayer from "./VideoPlayer.vue";
 import ContentItem from "./ContentItem.vue";
 import ErrorHandler from "./ErrorHandler.vue";
@@ -360,413 +364,428 @@ import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import ToastComponent from "./ToastComponent.vue";
 import { parseTimeParam } from "@/utils/Misc";
 import { purifyHTML, rewriteDescription } from "@/utils/HtmlUtils";
+import { fetchJson, apiUrl } from "@/composables/useApi.js";
+import {
+    getPreferenceBoolean,
+    getPreferenceNumber,
+    getPreferenceString,
+    getPreferenceJSON,
+    setPreference,
+} from "@/composables/usePreferences.js";
+import { numberFormat, addCommas } from "@/composables/useFormatting.js";
+import {
+    fetchSubscriptionStatus,
+    toggleSubscriptionState,
+    fetchDeArrowContent,
+} from "@/composables/useSubscriptions.js";
+import { updateWatched } from "@/composables/useMisc.js";
+import { getPlaylist } from "@/composables/usePlaylists.js";
 
-export default {
-    name: "App",
-    components: {
-        VideoPlayer,
-        ContentItem,
-        ErrorHandler,
-        CommentItem,
-        ChaptersBar,
-        PlaylistAddModal,
-        ShareModal,
-        PlaylistVideos,
-        WatchOnButton,
-        LoadingIndicatorPage,
-        ToastComponent,
-    },
-    data() {
-        const smallViewQuery = window.matchMedia("(max-width: 640px)");
-        return {
-            video: null,
-            playlistId: null,
-            playlist: null,
-            index: null,
-            sponsors: null,
-            selectedAutoLoop: false,
-            selectedAutoPlay: null,
-            showComments: true,
-            showDesc: false,
-            showRecs: true,
-            showChapters: true,
-            comments: null,
-            subscribed: false,
-            channelId: null,
-            active: true,
-            smallViewQuery: smallViewQuery,
-            smallView: smallViewQuery.matches,
-            showModal: false,
-            showShareModal: false,
-            isMobile: true,
-            currentTime: 0,
-            shouldShowToast: false,
-            timeoutCounter: null,
-            counter: 0,
-            theaterMode: false,
-        };
-    },
-    computed: {
-        isListening(_this) {
-            return _this.getPreferenceBoolean("listen", false);
-        },
-        toggleListenUrl(_this) {
-            const url = new URL(window.location.href);
-            url.searchParams.set("listen", _this.isListening ? "0" : "1");
-            url.searchParams.set("t", Math.floor(this.currentTime));
-            return url.pathname + url.search;
-        },
-        isEmbed(_this) {
-            return String(_this.$route.path).indexOf("/embed/") == 0;
-        },
-        uploadDate(_this) {
-            return new Date(_this.video.uploadDate).toLocaleString(undefined, {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            });
-        },
-        defaultCounter(_this) {
-            return _this.getPreferenceNumber("autoPlayNextCountdown", 5);
-        },
-        purifiedDescription() {
-            return purifyHTML(this.video.description);
-        },
-        youtubeVideoHref() {
-            let link = `https://youtu.be/${this.getVideoId()}?t=${Math.round(this.currentTime)}`;
-            if (this.playlistId) link += `&list=${this.playlistId}`;
-            return link;
-        },
-    },
-    mounted() {
-        // check screen size
-        this.isMobile = window.innerWidth < 1024;
-        // add an event listener to watch for screen size changes
-        window.addEventListener("resize", () => {
-            this.isMobile = window.innerWidth < 1024;
-        });
-        this.getVideoData().then(() => {
-            (async () => {
-                const videoId = this.getVideoId();
-                const instance = this;
-                if (window.db && this.getPreferenceBoolean("watchHistory", false) && !this.video.error) {
-                    var tx = window.db.transaction("watch_history", "readwrite");
-                    var store = tx.objectStore("watch_history");
-                    var request = store.get(videoId);
-                    request.onsuccess = function (event) {
-                        var video = event.target.result;
-                        if (video) {
-                            video.watchedAt = Date.now();
-                        } else {
-                            video = {
-                                videoId: videoId,
-                                title: instance.video.title,
-                                duration: instance.video.duration,
-                                thumbnail: instance.video.thumbnailUrl,
-                                uploaderUrl: instance.video.uploaderUrl,
-                                uploaderName: instance.video.uploader,
-                                watchedAt: Date.now(),
-                            };
-                        }
-                        store.put(video);
-                    };
-                }
-            })();
-            if (this.active) this.$refs.videoPlayer.loadVideo();
-        });
-        this.playlistId = this.$route.query.list;
-        this.index = Number(this.$route.query.index);
-        this.getPlaylistData();
-        this.getSponsors();
-        if (!this.isEmbed && this.showComments) this.getComments();
-        if (this.isEmbed) document.querySelector("html").style.overflow = "hidden";
-        window.addEventListener("click", this.handleClick);
-        window.addEventListener("resize", () => {
-            this.smallView = this.smallViewQuery.matches;
-        });
-    },
-    activated() {
-        this.active = true;
-        this.theaterMode = this.getPreferenceBoolean(
-            "theaterMode",
-            window.innerWidth < (window.innerHeight * 4) / 3 + 467, //if the video player is limited by width rather than height, then clear up some horizontal room
-        );
-        this.selectedAutoPlay = this.getPreferenceNumber("autoplay", 1);
-        this.showComments = !this.getPreferenceBoolean("minimizeComments", false);
-        this.showDesc = !this.getPreferenceBoolean("minimizeDescription", true);
-        this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
-        this.showChapters = !this.getPreferenceBoolean("minimizeChapters", false);
-        if (this.video?.duration) {
-            document.title = this.video.title + " - Piped";
-            this.$refs.videoPlayer.loadVideo();
-        }
-        window.addEventListener("scroll", this.handleScroll);
-    },
-    deactivated() {
-        this.active = false;
-        window.removeEventListener("scroll", this.handleScroll);
-        this.dismiss();
-    },
-    unmounted() {
-        window.removeEventListener("scroll", this.handleScroll);
-        window.removeEventListener("click", this.handleClick);
-        this.dismiss();
-    },
-    methods: {
-        fetchVideo() {
-            return this.fetchJson(this.apiUrl() + "/streams/" + this.getVideoId());
-        },
-        async fetchSponsors() {
-            var selectedSkip = this.getPreferenceString(
-                "selectedSkip",
-                "sponsor,interaction,selfpromo,music_offtopic",
-            ).split(",");
-            const skipOptions = this.getPreferenceJSON("skipOptions");
-            if (skipOptions !== undefined) {
-                selectedSkip = Object.keys(skipOptions).filter(
-                    k => skipOptions[k] !== undefined && skipOptions[k] !== "no",
-                );
+const route = useRoute();
+const router = useRouter();
+
+const smallViewQuery = window.matchMedia("(max-width: 640px)");
+
+const videoPlayer = ref(null);
+const commentsEl = ref(null);
+
+const video = ref(null);
+const playlistId = ref(null);
+const playlist = ref(null);
+const index = ref(null);
+const sponsors = ref(null);
+const selectedAutoLoop = ref(false);
+const selectedAutoPlay = ref(null);
+const showComments = ref(true);
+const showDesc = ref(false);
+const showRecs = ref(true);
+const showChapters = ref(true);
+const comments = ref(null);
+const subscribed = ref(false);
+const channelId = ref(null);
+const active = ref(true);
+const smallView = ref(smallViewQuery.matches);
+const showModal = ref(false);
+const showShareModal = ref(false);
+const isMobile = ref(true);
+const currentTime = ref(0);
+const shouldShowToast = ref(false);
+let timeoutCounter = null;
+const counter = ref(0);
+const theaterMode = ref(false);
+let loading = false;
+
+const isListening = computed(() => {
+    return getPreferenceBoolean("listen", false);
+});
+
+const toggleListenUrl = computed(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("listen", isListening.value ? "0" : "1");
+    url.searchParams.set("t", Math.floor(currentTime.value));
+    return url.pathname + url.search;
+});
+
+const isEmbed = computed(() => {
+    return String(route.path).indexOf("/embed/") == 0;
+});
+
+const uploadDate = computed(() => {
+    return new Date(video.value.uploadDate).toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+});
+
+const defaultCounter = computed(() => {
+    return getPreferenceNumber("autoPlayNextCountdown", 5);
+});
+
+const purifiedDescription = computed(() => {
+    return purifyHTML(video.value.description);
+});
+
+const youtubeVideoHref = computed(() => {
+    let link = `https://youtu.be/${getVideoId()}?t=${Math.round(currentTime.value)}`;
+    if (playlistId.value) link += `&list=${playlistId.value}`;
+    return link;
+});
+
+function fetchVideo() {
+    return fetchJson(apiUrl() + "/streams/" + getVideoId());
+}
+
+async function fetchSponsors() {
+    var selectedSkip = getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").split(",");
+    const skipOptions = getPreferenceJSON("skipOptions");
+    if (skipOptions !== undefined) {
+        selectedSkip = Object.keys(skipOptions).filter(k => skipOptions[k] !== undefined && skipOptions[k] !== "no");
+    }
+
+    const sponsorsData = await fetchJson(apiUrl() + "/sponsors/" + getVideoId(), {
+        category: JSON.stringify(selectedSkip),
+    });
+
+    sponsorsData?.segments?.forEach(segment => {
+        const option = skipOptions?.[segment.category];
+        segment.autoskip = option === undefined || option === "auto";
+    });
+
+    const minSegmentLength = Math.max(getPreferenceNumber("minSegmentLength", 0), 0);
+    sponsorsData.segments = sponsorsData.segments?.filter(segment => {
+        const length = segment.segment[1] - segment.segment[0];
+        return length >= minSegmentLength;
+    });
+
+    return sponsorsData;
+}
+
+function toggleCommentsVisibility() {
+    showComments.value = !showComments.value;
+    if (showComments.value && comments.value === null) {
+        fetchCommentsData();
+    }
+}
+
+function fetchCommentsData() {
+    return fetchJson(apiUrl() + "/comments/" + getVideoId());
+}
+
+function onChange() {
+    setPreference("autoplay", selectedAutoPlay.value, true);
+}
+
+async function getVideoData() {
+    await fetchVideo()
+        .then(data => {
+            video.value = data;
+            video.value.id = getVideoId();
+        })
+        .then(() => {
+            if (!video.value.error) {
+                document.title = video.value.title + " - Piped";
+                channelId.value = video.value.uploaderUrl.split("/")[2];
+                if (!isEmbed.value) fetchSubscribedStatus();
+
+                const parser = new DOMParser();
+                const xmlDoc = parser.parseFromString(video.value.description, "text/html");
+                xmlDoc.querySelectorAll("a").forEach(elem => {
+                    if (!elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/))
+                        elem.outerHTML = elem.getAttribute("href");
+                });
+                xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
+                video.value.description = rewriteDescription(xmlDoc.querySelector("body").innerHTML);
+                updateWatched(video.value.relatedStreams);
+
+                fetchDeArrowContent(video.value.relatedStreams);
             }
+        });
+}
 
-            const sponsors = await this.fetchJson(this.apiUrl() + "/sponsors/" + this.getVideoId(), {
-                category: JSON.stringify(selectedSkip),
-            });
-
-            sponsors?.segments?.forEach(segment => {
-                const option = skipOptions?.[segment.category];
-                segment.autoskip = option === undefined || option === "auto";
-            });
-
-            const minSegmentLength = Math.max(this.getPreferenceNumber("minSegmentLength", 0), 0);
-            sponsors.segments = sponsors.segments?.filter(segment => {
-                const length = segment.segment[1] - segment.segment[0];
-                return length >= minSegmentLength;
-            });
-
-            return sponsors;
-        },
-        toggleComments() {
-            this.showComments = !this.showComments;
-            if (this.showComments && this.comments === null) {
-                this.fetchComments();
-            }
-        },
-        fetchComments() {
-            return this.fetchJson(this.apiUrl() + "/comments/" + this.getVideoId());
-        },
-        onChange() {
-            this.setPreference("autoplay", this.selectedAutoPlay, true);
-        },
-        async getVideoData() {
-            await this.fetchVideo()
-                .then(data => {
-                    this.video = data;
-                    this.video.id = this.getVideoId();
-                })
-                .then(() => {
-                    if (!this.video.error) {
-                        document.title = this.video.title + " - Piped";
-                        this.channelId = this.video.uploaderUrl.split("/")[2];
-                        if (!this.isEmbed) this.fetchSubscribedStatus();
-
-                        const parser = new DOMParser();
-                        const xmlDoc = parser.parseFromString(this.video.description, "text/html");
-                        xmlDoc.querySelectorAll("a").forEach(elem => {
-                            if (!elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/))
-                                elem.outerHTML = elem.getAttribute("href");
+async function getPlaylistData() {
+    if (playlistId.value) {
+        playlist.value = await getPlaylist(playlistId.value);
+        await fetchPlaylistPages().then(() => {
+            if (!(index.value >= 0)) {
+                for (let i = 0; i < playlist.value.relatedStreams.length; i++)
+                    if (playlist.value.relatedStreams[i].url.substr(-11) == getVideoId()) {
+                        index.value = i + 1;
+                        router.replace({
+                            query: { ...route.query, index: index.value },
                         });
-                        xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
-                        this.video.description = rewriteDescription(xmlDoc.querySelector("body").innerHTML);
-                        this.updateWatched(this.video.relatedStreams);
-
-                        this.fetchDeArrowContent(this.video.relatedStreams);
+                        break;
                     }
-                });
-        },
-        async getPlaylistData() {
-            if (this.playlistId) {
-                this.playlist = await this.getPlaylist(this.playlistId);
-                await this.fetchPlaylistPages().then(() => {
-                    if (!(this.index >= 0)) {
-                        for (let i = 0; i < this.playlist.relatedStreams.length; i++)
-                            if (this.playlist.relatedStreams[i].url.substr(-11) == this.getVideoId()) {
-                                this.index = i + 1;
-                                this.$router.replace({
-                                    query: { ...this.$route.query, index: this.index },
-                                });
-                                break;
-                            }
-                    }
-                });
-                await this.fetchPlaylistPages();
             }
-        },
-        async fetchPlaylistPages() {
-            if (this.playlist.nextpage) {
-                await this.fetchJson(this.apiUrl() + "/nextpage/playlists/" + this.playlistId, {
-                    nextpage: this.playlist.nextpage,
-                }).then(json => {
-                    this.playlist.relatedStreams.push(...json.relatedStreams);
-                    this.playlist.nextpage = json.nextpage;
-                    this.fetchDeArrowContent(json.relatedStreams);
-                });
-                await this.fetchPlaylistPages();
-            }
-        },
-        async getSponsors() {
-            if (this.getPreferenceBoolean("sponsorblock", true))
-                this.fetchSponsors().then(data => (this.sponsors = data));
-        },
-        async getComments() {
-            this.comments = await this.fetchComments();
-        },
-        async fetchSubscribedStatus() {
-            if (!this.channelId) return;
+        });
+        await fetchPlaylistPages();
+    }
+}
 
-            this.subscribed = await this.fetchSubscriptionStatus(this.channelId);
-        },
-        subscribeHandler() {
-            this.toggleSubscriptionState(this.channelId, this.subscribed).then(success => {
-                if (success) this.subscribed = !this.subscribed;
-            });
-        },
-        handleClick(event) {
-            if (!event || !event.target) return;
-            if (!event.target.matches("a[href]")) return;
-            const target = event.target;
-            if (!target.getAttribute("href")) return;
-            if (this.handleTimestampLinks(target)) {
-                event.preventDefault();
-            }
-        },
-        handleTimestampLinks(target) {
-            try {
-                const url = new URL(target.getAttribute("href"), document.baseURI);
-                if (
-                    url.searchParams.size > 2 ||
-                    url.searchParams.get("v") !== this.getVideoId() ||
-                    !url.searchParams.has("t")
-                ) {
-                    return false;
-                }
-                const time = parseTimeParam(url.searchParams.get("t"));
-                if (time) {
-                    this.navigate(time);
-                }
-                return true;
-            } catch (e) {
-                console.error(e);
-            }
+async function fetchPlaylistPages() {
+    if (playlist.value.nextpage) {
+        await fetchJson(apiUrl() + "/nextpage/playlists/" + playlistId.value, {
+            nextpage: playlist.value.nextpage,
+        }).then(json => {
+            playlist.value.relatedStreams.push(...json.relatedStreams);
+            playlist.value.nextpage = json.nextpage;
+            fetchDeArrowContent(json.relatedStreams);
+        });
+        await fetchPlaylistPages();
+    }
+}
+
+async function getSponsors() {
+    if (getPreferenceBoolean("sponsorblock", true)) fetchSponsors().then(data => (sponsors.value = data));
+}
+
+async function getComments() {
+    comments.value = await fetchCommentsData();
+}
+
+async function fetchSubscribedStatus() {
+    if (!channelId.value) return;
+    subscribed.value = await fetchSubscriptionStatus(channelId.value);
+}
+
+function subscribeHandler() {
+    toggleSubscriptionState(channelId.value, subscribed.value).then(success => {
+        if (success) subscribed.value = !subscribed.value;
+    });
+}
+
+function handleClick(event) {
+    if (!event || !event.target) return;
+    if (!event.target.matches("a[href]")) return;
+    const target = event.target;
+    if (!target.getAttribute("href")) return;
+    if (handleTimestampLinks(target)) {
+        event.preventDefault();
+    }
+}
+
+function handleTimestampLinks(target) {
+    try {
+        const url = new URL(target.getAttribute("href"), document.baseURI);
+        if (url.searchParams.size > 2 || url.searchParams.get("v") !== getVideoId() || !url.searchParams.has("t")) {
             return false;
-        },
-        handleScroll() {
-            if (this.loading || !this.comments || !this.comments.nextpage) return;
-            if (window.innerHeight + window.scrollY >= this.$refs.comments?.offsetHeight - window.innerHeight) {
-                this.loading = true;
-                this.fetchJson(this.apiUrl() + "/nextpage/comments/" + this.getVideoId(), {
-                    nextpage: this.comments.nextpage,
-                }).then(json => {
-                    this.comments.nextpage = json.nextpage;
-                    this.loading = false;
-                    this.comments.comments = this.comments.comments.concat(json.comments);
-                });
-            }
-        },
-        getVideoId() {
-            if (this.$route.query.video_ids) {
-                const videos_list = this.$route.query.video_ids.split(",");
-                this.index = Number(this.$route.query.index ?? 0);
-                return videos_list[this.index];
-            }
+        }
+        const time = parseTimeParam(url.searchParams.get("t"));
+        if (time) {
+            navigate(time);
+        }
+        return true;
+    } catch (e) {
+        console.error(e);
+    }
+    return false;
+}
 
-            return this.$route.query.v || this.$route.params.v;
-        },
-        navigate(time) {
-            this.$refs.videoPlayer.seek(time);
-        },
-        onTimeUpdate(time) {
-            this.currentTime = time;
-        },
-        onVideoEnded() {
-            if (
-                !this.selectedAutoLoop &&
-                ((this.selectedAutoPlay >= 1 && this.playlist?.relatedStreams?.length > this.index) ||
-                    (this.selectedAutoPlay >= 2 && this.video.relatedStreams.length > 0))
-            ) {
-                this.showToast();
-            }
-        },
-        showToast() {
-            this.counter = this.defaultCounter;
-            if (this.counter < 1) {
-                this.navigateNext();
-                return;
-            }
-            if (this.timeoutCounter) clearInterval(this.timeoutCounter);
-            this.timeoutCounter = setInterval(() => {
-                this.counter--;
-                if (this.counter === 0) {
-                    this.dismiss();
-                    this.navigateNext();
-                }
-            }, 1000);
-            this.shouldShowToast = true;
-        },
-        dismiss() {
-            clearInterval(this.timeoutCounter);
-            this.shouldShowToast = false;
-        },
-        navigateNext() {
-            const params = this.$route.query;
-            const video_ids = this.$route.query.video_ids?.split(",") ?? [];
-            let url;
-            if (this.playlist) {
-                url = this.playlist?.relatedStreams?.[this.index]?.url ?? this.video.relatedStreams[0].url;
-            } else if (video_ids.length > this.index + 1) {
-                url = `${this.$route.path}?index=${this.index + 1}`;
-            } else {
-                url = this.video.relatedStreams[0].url;
-            }
-            const searchParams = new URLSearchParams();
-            for (var param in params)
-                switch (param) {
-                    case "v":
-                    case "t":
-                        break;
-                    case "index":
-                        if (this.playlist && this.index < this.playlist.relatedStreams.length)
-                            searchParams.set("index", this.index + 1);
-                        break;
-                    case "list":
-                        if (this.index < this.playlist.relatedStreams.length) searchParams.set("list", params.list);
-                        break;
-                    default:
-                        searchParams.set(param, params[param]);
-                        break;
-                }
-            // save the fullscreen state
-            searchParams.set("fullscreen", this.$refs.videoPlayer.$ui.getControls().isFullScreenEnabled());
-            const paramStr = searchParams.toString();
-            if (paramStr.length > 0) url += "&" + paramStr;
-            this.$router.push(url);
-        },
-        downloadCurrentFrame() {
-            const video = document.querySelector("video");
-            const canvas = document.createElement("canvas");
-            canvas.width = video.videoWidth;
-            canvas.height = video.videoHeight;
+function handleScroll() {
+    if (loading || !comments.value || !comments.value.nextpage) return;
+    if (window.innerHeight + window.scrollY >= commentsEl.value?.offsetHeight - window.innerHeight) {
+        loading = true;
+        fetchJson(apiUrl() + "/nextpage/comments/" + getVideoId(), {
+            nextpage: comments.value.nextpage,
+        }).then(json => {
+            comments.value.nextpage = json.nextpage;
+            loading = false;
+            comments.value.comments = comments.value.comments.concat(json.comments);
+        });
+    }
+}
 
-            const context = canvas.getContext("2d");
-            context.drawImage(video, 0, 0, canvas.width, canvas.height);
+function getVideoId() {
+    if (route.query.video_ids) {
+        const videos_list = route.query.video_ids.split(",");
+        index.value = Number(route.query.index ?? 0);
+        return videos_list[index.value];
+    }
 
-            let link = document.createElement("a");
-            const currentTime = Math.round(video.currentTime * 1000) / 1000;
-            link.download = `${this.video.title}_${currentTime}s.png`;
-            link.href = canvas.toDataURL();
-            link.click();
-        },
-    },
-};
+    return route.query.v || route.params.v;
+}
+
+function navigate(time) {
+    videoPlayer.value.seek(time);
+}
+
+function onTimeUpdate(time) {
+    currentTime.value = time;
+}
+
+function onVideoEnded() {
+    if (
+        !selectedAutoLoop.value &&
+        ((selectedAutoPlay.value >= 1 && playlist.value?.relatedStreams?.length > index.value) ||
+            (selectedAutoPlay.value >= 2 && video.value.relatedStreams.length > 0))
+    ) {
+        showToast();
+    }
+}
+
+function showToast() {
+    counter.value = defaultCounter.value;
+    if (counter.value < 1) {
+        navigateNext();
+        return;
+    }
+    if (timeoutCounter) clearInterval(timeoutCounter);
+    timeoutCounter = setInterval(() => {
+        counter.value--;
+        if (counter.value === 0) {
+            dismiss();
+            navigateNext();
+        }
+    }, 1000);
+    shouldShowToast.value = true;
+}
+
+function dismiss() {
+    clearInterval(timeoutCounter);
+    shouldShowToast.value = false;
+}
+
+function navigateNext() {
+    const params = route.query;
+    const video_ids = route.query.video_ids?.split(",") ?? [];
+    let url;
+    if (playlist.value) {
+        url = playlist.value?.relatedStreams?.[index.value]?.url ?? video.value.relatedStreams[0].url;
+    } else if (video_ids.length > index.value + 1) {
+        url = `${route.path}?index=${index.value + 1}`;
+    } else {
+        url = video.value.relatedStreams[0].url;
+    }
+    const searchParams = new URLSearchParams();
+    for (var param in params)
+        switch (param) {
+            case "v":
+            case "t":
+                break;
+            case "index":
+                if (playlist.value && index.value < playlist.value.relatedStreams.length)
+                    searchParams.set("index", index.value + 1);
+                break;
+            case "list":
+                if (index.value < playlist.value.relatedStreams.length) searchParams.set("list", params.list);
+                break;
+            default:
+                searchParams.set(param, params[param]);
+                break;
+        }
+    searchParams.set("fullscreen", videoPlayer.value.isFullScreenEnabled());
+    const paramStr = searchParams.toString();
+    if (paramStr.length > 0) url += "&" + paramStr;
+    router.push(url);
+}
+
+function downloadCurrentFrame() {
+    const videoEl = document.querySelector("video");
+    const canvas = document.createElement("canvas");
+    canvas.width = videoEl.videoWidth;
+    canvas.height = videoEl.videoHeight;
+
+    const context = canvas.getContext("2d");
+    context.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
+
+    let link = document.createElement("a");
+    const ct = Math.round(videoEl.currentTime * 1000) / 1000;
+    link.download = `${video.value.title}_${ct}s.png`;
+    link.href = canvas.toDataURL();
+    link.click();
+}
+
+onMounted(() => {
+    isMobile.value = window.innerWidth < 1024;
+    window.addEventListener("resize", () => {
+        isMobile.value = window.innerWidth < 1024;
+    });
+    getVideoData().then(() => {
+        (async () => {
+            const videoId = getVideoId();
+            if (window.db && getPreferenceBoolean("watchHistory", false) && !video.value.error) {
+                var tx = window.db.transaction("watch_history", "readwrite");
+                var store = tx.objectStore("watch_history");
+                var request = store.get(videoId);
+                request.onsuccess = function (event) {
+                    var vid = event.target.result;
+                    if (vid) {
+                        vid.watchedAt = Date.now();
+                    } else {
+                        vid = {
+                            videoId: videoId,
+                            title: video.value.title,
+                            duration: video.value.duration,
+                            thumbnail: video.value.thumbnailUrl,
+                            uploaderUrl: video.value.uploaderUrl,
+                            uploaderName: video.value.uploader,
+                            watchedAt: Date.now(),
+                        };
+                    }
+                    store.put(vid);
+                };
+            }
+        })();
+        if (active.value) videoPlayer.value.loadVideo();
+    });
+    playlistId.value = route.query.list;
+    index.value = Number(route.query.index);
+    getPlaylistData();
+    getSponsors();
+    if (!isEmbed.value && showComments.value) getComments();
+    if (isEmbed.value) document.querySelector("html").style.overflow = "hidden";
+    window.addEventListener("click", handleClick);
+    window.addEventListener("resize", () => {
+        smallView.value = smallViewQuery.matches;
+    });
+});
+
+onActivated(() => {
+    active.value = true;
+    theaterMode.value = getPreferenceBoolean("theaterMode", window.innerWidth < (window.innerHeight * 4) / 3 + 467);
+    selectedAutoPlay.value = getPreferenceNumber("autoplay", 1);
+    showComments.value = !getPreferenceBoolean("minimizeComments", false);
+    showDesc.value = !getPreferenceBoolean("minimizeDescription", true);
+    showRecs.value = !getPreferenceBoolean("minimizeRecommendations", false);
+    showChapters.value = !getPreferenceBoolean("minimizeChapters", false);
+    if (video.value?.duration) {
+        document.title = video.value.title + " - Piped";
+        videoPlayer.value.loadVideo();
+    }
+    window.addEventListener("scroll", handleScroll);
+});
+
+onDeactivated(() => {
+    active.value = false;
+    window.removeEventListener("scroll", handleScroll);
+    dismiss();
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+    window.removeEventListener("click", handleClick);
+    dismiss();
+});
 </script>
 
 <style>
diff --git a/src/composables/useApi.js b/src/composables/useApi.js
new file mode 100644
index 00000000..0c1484a9
--- /dev/null
+++ b/src/composables/useApi.js
@@ -0,0 +1,36 @@
+import { getPreferenceBoolean, getPreferenceString } from "./usePreferences.js";
+
+export function fetchJson(url, params, options) {
+    if (params) {
+        url = new URL(url);
+        for (var param in params) url.searchParams.set(param, params[param]);
+    }
+    return fetch(url, options).then(response => {
+        return response.json();
+    });
+}
+
+export function hashCode(s) {
+    return s.split("").reduce(function (a, b) {
+        a = (a << 5) - a + b.charCodeAt(0);
+        return a & a;
+    }, 0);
+}
+
+export function apiUrl() {
+    return getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
+}
+
+export function authApiUrl() {
+    if (getPreferenceBoolean("authInstance", false)) {
+        return getPreferenceString("auth_instance_url", apiUrl());
+    } else return apiUrl();
+}
+
+export function getAuthToken() {
+    return getPreferenceString("authToken" + hashCode(authApiUrl()));
+}
+
+export function isAuthenticated() {
+    return getAuthToken() !== undefined;
+}
diff --git a/src/composables/useChannelGroups.js b/src/composables/useChannelGroups.js
new file mode 100644
index 00000000..d2b04bbb
--- /dev/null
+++ b/src/composables/useChannelGroups.js
@@ -0,0 +1,36 @@
+export async function getChannelGroups() {
+    return new Promise(resolve => {
+        let channelGroups = [];
+        var tx = window.db.transaction("channel_groups", "readonly");
+        var store = tx.objectStore("channel_groups");
+        const cursor = store.index("groupName").openCursor();
+        cursor.onsuccess = e => {
+            const cursor = e.target.result;
+            if (cursor) {
+                const group = cursor.value;
+                channelGroups.push({
+                    groupName: group.groupName,
+                    channels: JSON.parse(group.channels),
+                });
+                cursor.continue();
+            } else {
+                resolve(channelGroups);
+            }
+        };
+    });
+}
+
+export function createOrUpdateChannelGroup(group) {
+    var tx = window.db.transaction("channel_groups", "readwrite");
+    var store = tx.objectStore("channel_groups");
+    store.put({
+        groupName: group.groupName,
+        channels: JSON.stringify(group.channels),
+    });
+}
+
+export function deleteChannelGroup(groupName) {
+    var tx = window.db.transaction("channel_groups", "readwrite");
+    var store = tx.objectStore("channel_groups");
+    store.delete(groupName);
+}
diff --git a/src/composables/useCustomInstances.js b/src/composables/useCustomInstances.js
new file mode 100644
index 00000000..978d29c3
--- /dev/null
+++ b/src/composables/useCustomInstances.js
@@ -0,0 +1,14 @@
+export function getCustomInstances() {
+    return JSON.parse(window.localStorage.getItem("customInstances")) ?? [];
+}
+
+export function addCustomInstance(instance) {
+    let customInstances = getCustomInstances();
+    customInstances.push(instance);
+    window.localStorage.setItem("customInstances", JSON.stringify(customInstances));
+}
+
+export function removeCustomInstance(instanceToDelete) {
+    let customInstances = getCustomInstances().filter(instance => instance.api_url != instanceToDelete.api_url);
+    window.localStorage.setItem("customInstances", JSON.stringify(customInstances));
+}
diff --git a/src/composables/useFormatting.js b/src/composables/useFormatting.js
new file mode 100644
index 00000000..3891b3b1
--- /dev/null
+++ b/src/composables/useFormatting.js
@@ -0,0 +1,68 @@
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+import { getPreferenceString } from "./usePreferences.js";
+
+TimeAgo.addDefaultLocale(en);
+
+const timeAgoInstance = new TimeAgo("en-US");
+
+export { TimeAgo };
+
+export const TimeAgoConfig = { locale: "en" };
+
+export function timeFormat(duration) {
+    var pad = function (num, size) {
+        return ("000" + num).slice(size * -1);
+    };
+
+    var time = parseFloat(duration).toFixed(3),
+        hours = Math.floor(time / 60 / 60),
+        minutes = Math.floor(time / 60) % 60,
+        seconds = Math.floor(time - minutes * 60);
+
+    var str = "";
+
+    if (hours > 0) str += hours + ":";
+
+    str += pad(minutes, 2) + ":" + pad(seconds, 2);
+
+    return str;
+}
+
+export function numberFormat(num) {
+    var loc = `${getPreferenceString("hl")}-${getPreferenceString("region")}`;
+
+    try {
+        Intl.getCanonicalLocales(loc);
+    } catch {
+        loc = undefined;
+    }
+
+    const formatter = Intl.NumberFormat(loc, {
+        notation: "compact",
+    });
+    return formatter.format(num);
+}
+
+export function addCommas(num) {
+    num = parseInt(num);
+    return num.toLocaleString("en-US");
+}
+
+export function timeAgo(time) {
+    return timeAgoInstance.format(time);
+}
+
+export async function getDefaultLanguage() {
+    const languages = window.navigator.languages;
+    for (let i = 0; i < languages.length; i++) {
+        try {
+            // Dynamic import of locale files
+            await import(`../locales/${languages[i]}.json`);
+            return languages[i];
+        } catch {
+            continue;
+        }
+    }
+    return "en";
+}
diff --git a/src/composables/useMisc.js b/src/composables/useMisc.js
new file mode 100644
index 00000000..481fec09
--- /dev/null
+++ b/src/composables/useMisc.js
@@ -0,0 +1,39 @@
+import { getPreferenceBoolean, getPreferenceString } from "./usePreferences.js";
+
+export async function updateWatched(videos) {
+    if (window.db && getPreferenceBoolean("watchHistory", false)) {
+        var tx = window.db.transaction("watch_history", "readonly");
+        var store = tx.objectStore("watch_history");
+        videos.map(async video => {
+            var request = store.get(video.url.substr(-11));
+            request.onsuccess = function (event) {
+                if (event.target.result) {
+                    video.watched = event.target.result.currentTime != 0;
+                    video.currentTime = event.target.result.currentTime;
+                }
+            };
+        });
+    }
+}
+
+export function download(text, filename, mimeType) {
+    var file = new Blob([text], { type: mimeType });
+
+    const elem = document.createElement("a");
+
+    elem.href = URL.createObjectURL(file);
+    elem.download = filename;
+    elem.click();
+    elem.remove();
+}
+
+export function getHomePage() {
+    switch (getPreferenceString("homepage", "trending")) {
+        case "trending":
+            return "/trending";
+        case "feed":
+            return "/feed";
+        default:
+            return undefined;
+    }
+}
diff --git a/src/composables/usePlaylists.js b/src/composables/usePlaylists.js
new file mode 100644
index 00000000..4c3ed60e
--- /dev/null
+++ b/src/composables/usePlaylists.js
@@ -0,0 +1,252 @@
+import { fetchJson, apiUrl, authApiUrl, getAuthToken, isAuthenticated } from "./useApi.js";
+
+export async function getLocalPlaylist(playlistId) {
+    return await new Promise(resolve => {
+        var tx = window.db.transaction("playlists", "readonly");
+        var store = tx.objectStore("playlists");
+        const req = store.openCursor(playlistId);
+        let playlist = null;
+        req.onsuccess = e => {
+            playlist = e.target.result.value;
+            playlist.videos = JSON.parse(playlist.videoIds).length;
+            resolve(playlist);
+        };
+    });
+}
+
+export function createOrUpdateLocalPlaylist(playlist) {
+    var tx = window.db.transaction("playlists", "readwrite");
+    var store = tx.objectStore("playlists");
+    store.put(playlist);
+}
+
+// needs to handle both, streamInfo items and streams items
+export function createLocalPlaylistVideo(videoId, videoInfo) {
+    if (videoInfo === undefined || videoId === null || videoInfo?.error) return;
+
+    var tx = window.db.transaction("playlist_videos", "readwrite");
+    var store = tx.objectStore("playlist_videos");
+    const video = {
+        videoId: videoId,
+        title: videoInfo.title,
+        type: "stream",
+        shortDescription: videoInfo.shortDescription ?? videoInfo.description,
+        url: `/watch?v=${videoId}`,
+        thumbnail: videoInfo.thumbnail ?? videoInfo.thumbnailUrl,
+        uploaderVerified: videoInfo.uploaderVerified,
+        duration: videoInfo.duration,
+        uploaderAvatar: videoInfo.uploaderAvatar,
+        uploaderUrl: videoInfo.uploaderUrl,
+        uploaderName: videoInfo.uploaderName ?? videoInfo.uploader,
+    };
+    store.put(video);
+}
+
+export async function getLocalPlaylistVideo(videoId) {
+    return await new Promise(resolve => {
+        var tx = window.db.transaction("playlist_videos", "readonly");
+        var store = tx.objectStore("playlist_videos");
+        const req = store.openCursor(videoId);
+        req.onsuccess = e => {
+            resolve(e.target.result?.value);
+        };
+    });
+}
+
+export async function getPlaylists() {
+    if (!isAuthenticated()) {
+        if (!window.db) return [];
+        return await new Promise(resolve => {
+            let playlists = [];
+            var tx = window.db.transaction("playlists", "readonly");
+            var store = tx.objectStore("playlists");
+            const cursorRequest = store.openCursor();
+            cursorRequest.onsuccess = e => {
+                const cursor = e.target.result;
+                if (cursor) {
+                    let playlist = cursor.value;
+                    playlist.videos = JSON.parse(playlist.videoIds).length;
+                    playlists.push(playlist);
+                    cursor.continue();
+                } else {
+                    resolve(playlists);
+                }
+            };
+        });
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists", null, {
+        headers: {
+            Authorization: getAuthToken(),
+        },
+    });
+}
+
+export async function getPlaylist(playlistId) {
+    if (playlistId.startsWith("local")) {
+        const playlist = await getLocalPlaylist(playlistId);
+        const videoIds = JSON.parse(playlist.videoIds);
+        const videosFuture = videoIds.map(videoId => getLocalPlaylistVideo(videoId));
+        playlist.relatedStreams = (await Promise.all(videosFuture)).filter(video => video !== undefined);
+        return playlist;
+    }
+
+    return await fetchJson(authApiUrl() + "/playlists/" + playlistId);
+}
+
+export async function createPlaylist(name) {
+    if (!isAuthenticated()) {
+        const uuid = crypto.randomUUID();
+        const playlistId = `local-${uuid}`;
+        createOrUpdateLocalPlaylist({
+            playlistId: playlistId,
+            // remapping needed for the playlists page
+            id: playlistId,
+            name: name,
+            description: "",
+            thumbnail: import.meta.env.VITE_PIPED_PROXY + "/?host=i.ytimg.com",
+            videoIds: "[]", // empty list
+        });
+        return { playlistId: playlistId };
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists/create", null, {
+        method: "POST",
+        body: JSON.stringify({
+            name: name,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function deletePlaylist(playlistId) {
+    if (!isAuthenticated()) {
+        const playlist = await getLocalPlaylist(playlistId);
+        var tx = window.db.transaction("playlists", "readwrite");
+        var store = tx.objectStore("playlists");
+        store.delete(playlistId);
+        // delete videos that don't need to be stored anymore
+        const playlists = await getPlaylists();
+        const usedVideoIds = playlists
+            .filter(playlist => playlist.id != playlistId)
+            .map(playlist => JSON.parse(playlist.videoIds))
+            .flat();
+        const potentialDeletableVideos = JSON.parse(playlist.videoIds);
+        var videoTx = window.db.transaction("playlist_videos", "readwrite");
+        var videoStore = videoTx.objectStore("playlist_videos");
+        for (let videoId of potentialDeletableVideos) {
+            if (!usedVideoIds.includes(videoId)) videoStore.delete(videoId);
+        }
+        return { message: "ok" };
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists/delete", null, {
+        method: "POST",
+        body: JSON.stringify({
+            playlistId: playlistId,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function renamePlaylist(playlistId, newName) {
+    if (!isAuthenticated()) {
+        const playlist = await getLocalPlaylist(playlistId);
+        playlist.name = newName;
+        createOrUpdateLocalPlaylist(playlist);
+        return { message: "ok" };
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists/rename", null, {
+        method: "POST",
+        body: JSON.stringify({
+            playlistId: playlistId,
+            newName: newName,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function changePlaylistDescription(playlistId, newDescription) {
+    if (!isAuthenticated()) {
+        const playlist = await getLocalPlaylist(playlistId);
+        playlist.description = newDescription;
+        createOrUpdateLocalPlaylist(playlist);
+        return { message: "ok" };
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists/description", null, {
+        method: "PATCH",
+        body: JSON.stringify({
+            playlistId: playlistId,
+            description: newDescription,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function addVideosToPlaylist(playlistId, videoIds, videoInfos) {
+    if (!isAuthenticated()) {
+        const playlist = await getLocalPlaylist(playlistId);
+        const currentVideoIds = JSON.parse(playlist.videoIds);
+        currentVideoIds.push(...videoIds);
+        playlist.videoIds = JSON.stringify(currentVideoIds);
+        let streamInfos =
+            videoInfos ?? (await Promise.all(videoIds.map(videoId => fetchJson(apiUrl() + "/streams/" + videoId))));
+        playlist.thumbnail = streamInfos[0].thumbnail || streamInfos[0].thumbnailUrl;
+        createOrUpdateLocalPlaylist(playlist);
+        for (let i in videoIds) {
+            if (streamInfos[i].error) continue;
+            createLocalPlaylistVideo(videoIds[i], streamInfos[i]);
+        }
+        return { message: "ok" };
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists/add", null, {
+        method: "POST",
+        body: JSON.stringify({
+            playlistId: playlistId,
+            videoIds: videoIds,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function removeVideoFromPlaylist(playlistId, index) {
+    if (!isAuthenticated()) {
+        const playlist = await getLocalPlaylist(playlistId);
+        const videoIds = JSON.parse(playlist.videoIds);
+        videoIds.splice(index, 1);
+        playlist.videoIds = JSON.stringify(videoIds);
+        if (videoIds.length == 0) playlist.thumbnail = import.meta.env.VITE_PIPED_PROXY + "/?host=i.ytimg.com";
+        createOrUpdateLocalPlaylist(playlist);
+        return { message: "ok" };
+    }
+
+    return await fetchJson(authApiUrl() + "/user/playlists/remove", null, {
+        method: "POST",
+        body: JSON.stringify({
+            playlistId: playlistId,
+            index: index,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+}
diff --git a/src/composables/usePreferences.js b/src/composables/usePreferences.js
new file mode 100644
index 00000000..38e5646f
--- /dev/null
+++ b/src/composables/usePreferences.js
@@ -0,0 +1,65 @@
+export function testLocalStorage() {
+    try {
+        if (window.localStorage !== undefined) localStorage;
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export function setPreference(key, value, disableAlert = false) {
+    try {
+        localStorage.setItem(key, value);
+    } catch {
+        if (!disableAlert) alert("Could not save preference to local storage.");
+    }
+}
+
+export function getPreferenceBoolean(key, defaultVal) {
+    var value;
+    if (
+        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
+    ) {
+        switch (String(value).toLowerCase()) {
+            case "true":
+            case "1":
+            case "on":
+            case "yes":
+                return true;
+            default:
+                return false;
+        }
+    } else return defaultVal;
+}
+
+export function getPreferenceString(key, defaultVal) {
+    var value;
+    if (
+        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
+    ) {
+        return value;
+    } else return defaultVal;
+}
+
+export function getPreferenceNumber(key, defaultVal) {
+    var value;
+    if (
+        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
+    ) {
+        const num = Number(value);
+        return isNaN(num) ? defaultVal : num;
+    } else return defaultVal;
+}
+
+export function getPreferenceJSON(key, defaultVal) {
+    var value;
+    if (
+        (value = new URLSearchParams(window.location.search).get(key)) !== null ||
+        (testLocalStorage() && (value = localStorage.getItem(key)) !== null)
+    ) {
+        return JSON.parse(value);
+    } else return defaultVal;
+}
diff --git a/src/composables/useSubscriptions.js b/src/composables/useSubscriptions.js
new file mode 100644
index 00000000..3666c4bd
--- /dev/null
+++ b/src/composables/useSubscriptions.js
@@ -0,0 +1,137 @@
+import { fetchJson, apiUrl, authApiUrl, getAuthToken, isAuthenticated } from "./useApi.js";
+import { getPreferenceBoolean } from "./usePreferences.js";
+
+export function getLocalSubscriptions() {
+    try {
+        return JSON.parse(localStorage.getItem("localSubscriptions"));
+    } catch {
+        return [];
+    }
+}
+
+export function isSubscribedLocally(channelId) {
+    const localSubscriptions = getLocalSubscriptions();
+    if (localSubscriptions == null) return false;
+    return localSubscriptions.includes(channelId);
+}
+
+export function handleLocalSubscriptions(channelId) {
+    var localSubscriptions = getLocalSubscriptions() ?? [];
+    if (localSubscriptions.includes(channelId)) localSubscriptions.splice(localSubscriptions.indexOf(channelId), 1);
+    else localSubscriptions.push(channelId);
+    // Sort for better cache hits
+    localSubscriptions.sort();
+    try {
+        localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
+        return true;
+    } catch {
+        alert("Could not save subscriptions to local storage.");
+    }
+    return false;
+}
+
+export function getUnauthenticatedChannels() {
+    const localSubscriptions = getLocalSubscriptions() ?? [];
+    return localSubscriptions.join(",");
+}
+
+export async function fetchSubscriptions() {
+    if (isAuthenticated()) {
+        return await fetchJson(authApiUrl() + "/subscriptions", null, {
+            headers: {
+                Authorization: getAuthToken(),
+            },
+        });
+    } else {
+        const channels = getUnauthenticatedChannels();
+        const split = channels.split(",");
+        if (split.length > 100) {
+            return await fetchJson(authApiUrl() + "/subscriptions/unauthenticated", null, {
+                method: "POST",
+                body: JSON.stringify(split),
+            });
+        } else {
+            return await fetchJson(authApiUrl() + "/subscriptions/unauthenticated", {
+                channels: getUnauthenticatedChannels(),
+            });
+        }
+    }
+}
+
+export async function fetchFeed() {
+    if (isAuthenticated()) {
+        return await fetchJson(authApiUrl() + "/feed", {
+            authToken: getAuthToken(),
+        });
+    } else {
+        const channels = getUnauthenticatedChannels();
+        const split = channels.split(",");
+        if (split.length > 100) {
+            return await fetchJson(authApiUrl() + "/feed/unauthenticated", null, {
+                method: "POST",
+                body: JSON.stringify(split),
+            });
+        } else {
+            return await fetchJson(authApiUrl() + "/feed/unauthenticated", {
+                channels: channels,
+            });
+        }
+    }
+}
+
+export async function fetchSubscriptionStatus(channelId) {
+    if (!isAuthenticated()) {
+        return isSubscribedLocally(channelId);
+    }
+
+    const response = await fetchJson(
+        authApiUrl() + "/subscribed",
+        {
+            channelId: channelId,
+        },
+        {
+            headers: {
+                Authorization: getAuthToken(),
+            },
+        },
+    );
+
+    return response?.subscribed;
+}
+
+export async function toggleSubscriptionState(channelId, subscribed) {
+    if (!isAuthenticated()) return handleLocalSubscriptions(channelId);
+
+    const resp = await fetchJson(authApiUrl() + (subscribed ? "/unsubscribe" : "/subscribe"), null, {
+        method: "POST",
+        body: JSON.stringify({
+            channelId: channelId,
+        }),
+        headers: {
+            Authorization: getAuthToken(),
+            "Content-Type": "application/json",
+        },
+    });
+
+    return !resp.error;
+}
+
+export function fetchDeArrowContent(content) {
+    if (!getPreferenceBoolean("dearrow", false)) return;
+
+    const videoIds = content
+        .filter(item => item.type === "stream")
+        .map(item => item.url.substr(-11))
+        .sort();
+
+    if (videoIds.length === 0) return;
+
+    fetchJson(apiUrl() + "/dearrow", {
+        videoIds: videoIds.join(","),
+    }).then(json => {
+        Object.keys(json).forEach(videoId => {
+            const item = content.find(item => item.url.endsWith(videoId));
+            if (item) item.dearrow = json[videoId];
+        });
+    });
+}
diff --git a/src/main.js b/src/main.js
index eff06f92..99f96664 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,625 +2,13 @@ import { createApp } from "vue";
 import router from "@/router/router.js";
 import App from "./App.vue";
 
-import TimeAgo from "javascript-time-ago";
-
-import en from "javascript-time-ago/locale/en";
-
-TimeAgo.addDefaultLocale(en);
-
 import { createI18n } from "vue-i18n";
 import enLocale from "@/locales/en.json";
 import "@unocss/reset/tailwind.css";
 import "uno.css";
 
-const timeAgo = new TimeAgo("en-US");
-
 import("./registerServiceWorker");
 
-const mixin = {
-    methods: {
-        timeFormat: function (duration) {
-            var pad = function (num, size) {
-                return ("000" + num).slice(size * -1);
-            };
-
-            var time = parseFloat(duration).toFixed(3),
-                hours = Math.floor(time / 60 / 60),
-                minutes = Math.floor(time / 60) % 60,
-                seconds = Math.floor(time - minutes * 60);
-
-            var str = "";
-
-            if (hours > 0) str += hours + ":";
-
-            str += pad(minutes, 2) + ":" + pad(seconds, 2);
-
-            return str;
-        },
-        numberFormat(num) {
-            var loc = `${this.getPreferenceString("hl")}-${this.getPreferenceString("region")}`;
-
-            try {
-                Intl.getCanonicalLocales(loc);
-            } catch {
-                loc = undefined;
-            }
-
-            const formatter = Intl.NumberFormat(loc, {
-                notation: "compact",
-            });
-            return formatter.format(num);
-        },
-        addCommas(num) {
-            num = parseInt(num);
-            return num.toLocaleString("en-US");
-        },
-        fetchJson: function (url, params, options) {
-            if (params) {
-                url = new URL(url);
-                for (var param in params) url.searchParams.set(param, params[param]);
-            }
-            return fetch(url, options).then(response => {
-                return response.json();
-            });
-        },
-        setPreference(key, value, disableAlert = false) {
-            try {
-                localStorage.setItem(key, value);
-            } catch {
-                if (!disableAlert) alert(this.$t("info.local_storage"));
-            }
-        },
-        getPreferenceBoolean(key, defaultVal) {
-            var value;
-            if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-                (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
-            ) {
-                switch (String(value).toLowerCase()) {
-                    case "true":
-                    case "1":
-                    case "on":
-                    case "yes":
-                        return true;
-                    default:
-                        return false;
-                }
-            } else return defaultVal;
-        },
-        getPreferenceString(key, defaultVal) {
-            var value;
-            if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-                (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
-            ) {
-                return value;
-            } else return defaultVal;
-        },
-        getPreferenceNumber(key, defaultVal) {
-            var value;
-            if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-                (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
-            ) {
-                const num = Number(value);
-                return isNaN(num) ? defaultVal : num;
-            } else return defaultVal;
-        },
-        getPreferenceJSON(key, defaultVal) {
-            var value;
-            if (
-                (value = new URLSearchParams(window.location.search).get(key)) !== null ||
-                (this.testLocalStorage && (value = localStorage.getItem(key)) !== null)
-            ) {
-                return JSON.parse(value);
-            } else return defaultVal;
-        },
-        apiUrl() {
-            return this.getPreferenceString("instance", import.meta.env.VITE_PIPED_API);
-        },
-        authApiUrl() {
-            if (this.getPreferenceBoolean("authInstance", false)) {
-                return this.getPreferenceString("auth_instance_url", this.apiUrl());
-            } else return this.apiUrl();
-        },
-        getAuthToken() {
-            return this.getPreferenceString("authToken" + this.hashCode(this.authApiUrl()));
-        },
-        hashCode(s) {
-            return s.split("").reduce(function (a, b) {
-                a = (a << 5) - a + b.charCodeAt(0);
-                return a & a;
-            }, 0);
-        },
-        timeAgo(time) {
-            return timeAgo.format(time);
-        },
-        async updateWatched(videos) {
-            if (window.db && this.getPreferenceBoolean("watchHistory", false)) {
-                var tx = window.db.transaction("watch_history", "readonly");
-                var store = tx.objectStore("watch_history");
-                videos.map(async video => {
-                    var request = store.get(video.url.substr(-11));
-                    request.onsuccess = function (event) {
-                        if (event.target.result) {
-                            video.watched = event.target.result.currentTime != 0;
-                            video.currentTime = event.target.result.currentTime;
-                        }
-                    };
-                });
-            }
-        },
-        getLocalSubscriptions() {
-            try {
-                return JSON.parse(localStorage.getItem("localSubscriptions"));
-            } catch {
-                return [];
-            }
-        },
-        isSubscribedLocally(channelId) {
-            const localSubscriptions = this.getLocalSubscriptions();
-            if (localSubscriptions == null) return false;
-            return localSubscriptions.includes(channelId);
-        },
-        handleLocalSubscriptions(channelId) {
-            var localSubscriptions = this.getLocalSubscriptions() ?? [];
-            if (localSubscriptions.includes(channelId))
-                localSubscriptions.splice(localSubscriptions.indexOf(channelId), 1);
-            else localSubscriptions.push(channelId);
-            // Sort for better cache hits
-            localSubscriptions.sort();
-            try {
-                localStorage.setItem("localSubscriptions", JSON.stringify(localSubscriptions));
-                return true;
-            } catch {
-                alert(this.$t("info.local_storage"));
-            }
-            return false;
-        },
-        getUnauthenticatedChannels() {
-            const localSubscriptions = this.getLocalSubscriptions() ?? [];
-            return localSubscriptions.join(",");
-        },
-        async fetchSubscriptions() {
-            if (this.authenticated) {
-                return await this.fetchJson(this.authApiUrl() + "/subscriptions", null, {
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                    },
-                });
-            } else {
-                const channels = this.getUnauthenticatedChannels();
-                const split = channels.split(",");
-                if (split.length > 100) {
-                    return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", null, {
-                        method: "POST",
-                        body: JSON.stringify(split),
-                    });
-                } else {
-                    return await this.fetchJson(this.authApiUrl() + "/subscriptions/unauthenticated", {
-                        channels: this.getUnauthenticatedChannels(),
-                    });
-                }
-            }
-        },
-        async fetchFeed() {
-            if (this.authenticated) {
-                return await this.fetchJson(this.authApiUrl() + "/feed", {
-                    authToken: this.getAuthToken(),
-                });
-            } else {
-                const channels = this.getUnauthenticatedChannels();
-                const split = channels.split(",");
-                if (split.length > 100) {
-                    return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", null, {
-                        method: "POST",
-                        body: JSON.stringify(split),
-                    });
-                } else {
-                    return await this.fetchJson(this.authApiUrl() + "/feed/unauthenticated", {
-                        channels: channels,
-                    });
-                }
-            }
-        },
-        /* generate a temporary file and ask the user to download it */
-        download(text, filename, mimeType) {
-            var file = new Blob([text], { type: mimeType });
-
-            const elem = document.createElement("a");
-
-            elem.href = URL.createObjectURL(file);
-            elem.download = filename;
-            elem.click();
-            elem.remove();
-        },
-        async getChannelGroups() {
-            return new Promise(resolve => {
-                let channelGroups = [];
-                var tx = window.db.transaction("channel_groups", "readonly");
-                var store = tx.objectStore("channel_groups");
-                const cursor = store.index("groupName").openCursor();
-                cursor.onsuccess = e => {
-                    const cursor = e.target.result;
-                    if (cursor) {
-                        const group = cursor.value;
-                        channelGroups.push({
-                            groupName: group.groupName,
-                            channels: JSON.parse(group.channels),
-                        });
-                        cursor.continue();
-                    } else {
-                        resolve(channelGroups);
-                    }
-                };
-            });
-        },
-        createOrUpdateChannelGroup(group) {
-            var tx = window.db.transaction("channel_groups", "readwrite");
-            var store = tx.objectStore("channel_groups");
-            store.put({
-                groupName: group.groupName,
-                channels: JSON.stringify(group.channels),
-            });
-        },
-        deleteChannelGroup(groupName) {
-            var tx = window.db.transaction("channel_groups", "readwrite");
-            var store = tx.objectStore("channel_groups");
-            store.delete(groupName);
-        },
-        async getLocalPlaylist(playlistId) {
-            return await new Promise(resolve => {
-                var tx = window.db.transaction("playlists", "readonly");
-                var store = tx.objectStore("playlists");
-                const req = store.openCursor(playlistId);
-                let playlist = null;
-                req.onsuccess = e => {
-                    playlist = e.target.result.value;
-                    playlist.videos = JSON.parse(playlist.videoIds).length;
-                    resolve(playlist);
-                };
-            });
-        },
-        createOrUpdateLocalPlaylist(playlist) {
-            var tx = window.db.transaction("playlists", "readwrite");
-            var store = tx.objectStore("playlists");
-            store.put(playlist);
-        },
-        // needs to handle both, streamInfo items and streams items
-        createLocalPlaylistVideo(videoId, videoInfo) {
-            if (videoInfo === undefined || videoId === null || videoInfo?.error) return;
-
-            var tx = window.db.transaction("playlist_videos", "readwrite");
-            var store = tx.objectStore("playlist_videos");
-            const video = {
-                videoId: videoId,
-                title: videoInfo.title,
-                type: "stream",
-                shortDescription: videoInfo.shortDescription ?? videoInfo.description,
-                url: `/watch?v=${videoId}`,
-                thumbnail: videoInfo.thumbnail ?? videoInfo.thumbnailUrl,
-                uploaderVerified: videoInfo.uploaderVerified,
-                duration: videoInfo.duration,
-                uploaderAvatar: videoInfo.uploaderAvatar,
-                uploaderUrl: videoInfo.uploaderUrl,
-                uploaderName: videoInfo.uploaderName ?? videoInfo.uploader,
-            };
-            store.put(video);
-        },
-        async getLocalPlaylistVideo(videoId) {
-            return await new Promise(resolve => {
-                var tx = window.db.transaction("playlist_videos", "readonly");
-                var store = tx.objectStore("playlist_videos");
-                const req = store.openCursor(videoId);
-                req.onsuccess = e => {
-                    resolve(e.target.result?.value);
-                };
-            });
-        },
-        async getPlaylists() {
-            if (!this.authenticated) {
-                if (!window.db) return [];
-                return await new Promise(resolve => {
-                    let playlists = [];
-                    var tx = window.db.transaction("playlists", "readonly");
-                    var store = tx.objectStore("playlists");
-                    const cursorRequest = store.openCursor();
-                    cursorRequest.onsuccess = e => {
-                        const cursor = e.target.result;
-                        if (cursor) {
-                            let playlist = cursor.value;
-                            playlist.videos = JSON.parse(playlist.videoIds).length;
-                            playlists.push(playlist);
-                            cursor.continue();
-                        } else {
-                            resolve(playlists);
-                        }
-                    };
-                });
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists", null, {
-                headers: {
-                    Authorization: this.getAuthToken(),
-                },
-            });
-        },
-        async getPlaylist(playlistId) {
-            if (playlistId.startsWith("local")) {
-                const playlist = await this.getLocalPlaylist(playlistId);
-                const videoIds = JSON.parse(playlist.videoIds);
-                const videosFuture = videoIds.map(videoId => this.getLocalPlaylistVideo(videoId));
-                playlist.relatedStreams = (await Promise.all(videosFuture)).filter(video => video !== undefined);
-                return playlist;
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/playlists/" + playlistId);
-        },
-        async createPlaylist(name) {
-            if (!this.authenticated) {
-                const uuid = crypto.randomUUID();
-                const playlistId = `local-${uuid}`;
-                this.createOrUpdateLocalPlaylist({
-                    playlistId: playlistId,
-                    // remapping needed for the playlists page
-                    id: playlistId,
-                    name: name,
-                    description: "",
-                    thumbnail: import.meta.env.VITE_PIPED_PROXY + "/?host=i.ytimg.com",
-                    videoIds: "[]", // empty list
-                });
-                return { playlistId: playlistId };
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/create", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    name: name,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-        },
-        async deletePlaylist(playlistId) {
-            if (!this.authenticated) {
-                const playlist = await this.getLocalPlaylist(playlistId);
-                var tx = window.db.transaction("playlists", "readwrite");
-                var store = tx.objectStore("playlists");
-                store.delete(playlistId);
-                // delete videos that don't need to be store anymore
-                const playlists = await this.getPlaylists();
-                const usedVideoIds = playlists
-                    .filter(playlist => playlist.id != playlistId)
-                    .map(playlist => JSON.parse(playlist.videoIds))
-                    .flat();
-                const potentialDeletableVideos = JSON.parse(playlist.videoIds);
-                var videoTx = window.db.transaction("playlist_videos", "readwrite");
-                var videoStore = videoTx.objectStore("playlist_videos");
-                for (let videoId of potentialDeletableVideos) {
-                    if (!usedVideoIds.includes(videoId)) videoStore.delete(videoId);
-                }
-                return { message: "ok" };
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/delete", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: playlistId,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-        },
-        async renamePlaylist(playlistId, newName) {
-            if (!this.authenticated) {
-                const playlist = await this.getLocalPlaylist(playlistId);
-                playlist.name = newName;
-                this.createOrUpdateLocalPlaylist(playlist);
-                return { message: "ok" };
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: playlistId,
-                    newName: newName,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-        },
-        async changePlaylistDescription(playlistId, newDescription) {
-            if (!this.authenticated) {
-                const playlist = await this.getLocalPlaylist(playlistId);
-                playlist.description = newDescription;
-                this.createOrUpdateLocalPlaylist(playlist);
-                return { message: "ok" };
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/description", null, {
-                method: "PATCH",
-                body: JSON.stringify({
-                    playlistId: playlistId,
-                    description: newDescription,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-        },
-        async addVideosToPlaylist(playlistId, videoIds, videoInfos) {
-            if (!this.authenticated) {
-                const playlist = await this.getLocalPlaylist(playlistId);
-                const currentVideoIds = JSON.parse(playlist.videoIds);
-                currentVideoIds.push(...videoIds);
-                playlist.videoIds = JSON.stringify(currentVideoIds);
-                let streamInfos =
-                    videoInfos ??
-                    (await Promise.all(videoIds.map(videoId => this.fetchJson(this.apiUrl() + "/streams/" + videoId))));
-                playlist.thumbnail = streamInfos[0].thumbnail || streamInfos[0].thumbnailUrl;
-                this.createOrUpdateLocalPlaylist(playlist);
-                for (let i in videoIds) {
-                    if (streamInfos[i].error) continue;
-                    this.createLocalPlaylistVideo(videoIds[i], streamInfos[i]);
-                }
-                return { message: "ok" };
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/add", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: playlistId,
-                    videoIds: videoIds,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-        },
-        async removeVideoFromPlaylist(playlistId, index) {
-            if (!this.authenticated) {
-                const playlist = await this.getLocalPlaylist(playlistId);
-                const videoIds = JSON.parse(playlist.videoIds);
-                videoIds.splice(index, 1);
-                playlist.videoIds = JSON.stringify(videoIds);
-                if (videoIds.length == 0) playlist.thumbnail = import.meta.env.VITE_PIPED_PROXY + "/?host=i.ytimg.com";
-                this.createOrUpdateLocalPlaylist(playlist);
-                return { message: "ok" };
-            }
-
-            return await this.fetchJson(this.authApiUrl() + "/user/playlists/remove", null, {
-                method: "POST",
-                body: JSON.stringify({
-                    playlistId: playlistId,
-                    index: index,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-        },
-        getHomePage(_this) {
-            switch (_this.getPreferenceString("homepage", "trending")) {
-                case "trending":
-                    return "/trending";
-                case "feed":
-                    return "/feed";
-                default:
-                    return undefined;
-            }
-        },
-        fetchDeArrowContent(content) {
-            if (!this.getPreferenceBoolean("dearrow", false)) return;
-
-            const videoIds = content
-                .filter(item => item.type === "stream")
-                .map(item => item.url.substr(-11))
-                .sort();
-
-            if (videoIds.length === 0) return;
-
-            this.fetchJson(this.apiUrl() + "/dearrow", {
-                videoIds: videoIds.join(","),
-            }).then(json => {
-                Object.keys(json).forEach(videoId => {
-                    const item = content.find(item => item.url.endsWith(videoId));
-                    if (item) item.dearrow = json[videoId];
-                });
-            });
-        },
-        async fetchSubscriptionStatus(channelId) {
-            if (!this.authenticated) {
-                return this.isSubscribedLocally(channelId);
-            }
-
-            const response = await this.fetchJson(
-                this.authApiUrl() + "/subscribed",
-                {
-                    channelId: channelId,
-                },
-                {
-                    headers: {
-                        Authorization: this.getAuthToken(),
-                    },
-                },
-            );
-
-            return response?.subscribed;
-        },
-        async toggleSubscriptionState(channelId, subscribed) {
-            if (!this.authenticated) return this.handleLocalSubscriptions(channelId);
-
-            const resp = await this.fetchJson(this.authApiUrl() + (subscribed ? "/unsubscribe" : "/subscribe"), null, {
-                method: "POST",
-                body: JSON.stringify({
-                    channelId: channelId,
-                }),
-                headers: {
-                    Authorization: this.getAuthToken(),
-                    "Content-Type": "application/json",
-                },
-            });
-
-            return !resp.error;
-        },
-        getCustomInstances() {
-            return JSON.parse(window.localStorage.getItem("customInstances")) ?? [];
-        },
-        addCustomInstance(instance) {
-            let customInstances = this.getCustomInstances();
-            customInstances.push(instance);
-            window.localStorage.setItem("customInstances", JSON.stringify(customInstances));
-        },
-        removeCustomInstance(instanceToDelete) {
-            let customInstances = this.getCustomInstances().filter(
-                instance => instance.api_url != instanceToDelete.api_url,
-            );
-            window.localStorage.setItem("customInstances", JSON.stringify(customInstances));
-        },
-    },
-    computed: {
-        authenticated(_this) {
-            return _this.getAuthToken() !== undefined;
-        },
-        testLocalStorage() {
-            try {
-                if (window.localStorage !== undefined) localStorage;
-                return true;
-            } catch {
-                return false;
-            }
-        },
-        async defaultLanguage() {
-            const languages = window.navigator.languages;
-            for (let i = 0; i < languages.length; i++) {
-                try {
-                    await import(`./locales/${languages[i]}.json`);
-                    return languages[i];
-                } catch {
-                    continue;
-                }
-            }
-            return "en";
-        },
-    },
-    data() {
-        return {
-            TimeAgo: TimeAgo,
-            TimeAgoConfig: timeAgo,
-        };
-    },
-};
-
 const i18n = createI18n({
     globalInjection: true,
     legacy: false,
@@ -636,5 +24,4 @@ window.i18n = i18n;
 const app = createApp(App);
 app.use(i18n);
 app.use(router);
-app.mixin(mixin);
 app.mount("#app");