Migrate code to composition api.

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;
+}

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);
+}

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));
+}

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";
+}

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;
+    }
+}

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",
+        },
+    });
+}

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;
+}

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];
+        });
+    });
+}