From ba6142c4abc2418b356d3a60862e888b8a7e6667 Mon Sep 17 00:00:00 2001 From: Isaac <76838845+isaxk@users.noreply.github.com> Date: Sun, 1 Sep 2024 12:12:54 +0100 Subject: [PATCH] Bookmarks --- package.json | 3 +- pnpm-lock.yaml | 7 ++ src/main/tabs/index.ts | 50 +++++++-- src/preload/index.ts | 9 ++ src/renderer/src/App.svelte | 20 +++- .../src/components/bookmarks/Bookmark.svelte | 105 ++++++++++++++++++ src/renderer/src/lib/stores.ts | 45 +++++++- src/renderer/src/views/Bookmarks.svelte | 61 ++++++++++ src/renderer/src/views/MenuBar.svelte | 78 ++++++------- 9 files changed, 325 insertions(+), 53 deletions(-) create mode 100644 src/renderer/src/components/bookmarks/Bookmark.svelte create mode 100644 src/renderer/src/views/Bookmarks.svelte diff --git a/package.json b/package.json index aa09a7c..86c2f58 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "bits-ui": "^0.21.13", "electron-context-menu": "^4.0.2", "electron-json-config": "^2.1.0", - "lucide-svelte": "^0.435.0" + "lucide-svelte": "^0.435.0", + "moment": "^2.30.1" }, "devDependencies": { "@electron-toolkit/eslint-config-prettier": "^2.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1db8374..0d15133 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ dependencies: lucide-svelte: specifier: ^0.435.0 version: 0.435.0(svelte@4.2.18) + moment: + specifier: ^2.30.1 + version: 2.30.1 devDependencies: '@electron-toolkit/eslint-config-prettier': @@ -3566,6 +3569,10 @@ packages: hasBin: true dev: true + /moment@2.30.1: + resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==} + dev: false + /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} diff --git a/src/main/tabs/index.ts b/src/main/tabs/index.ts index 1bce8f9..a4f5ba8 100644 --- a/src/main/tabs/index.ts +++ b/src/main/tabs/index.ts @@ -19,15 +19,22 @@ function windowOpenHandler(details): WindowOpenHandlerResponse { } async function updateCustomCss(key: string, view: WebContentsView) { - let ytCss = JSON.parse(store.get(key, "")!); + let ytCss = JSON.parse(store.get(key, JSON.stringify(""))!); + console.log(ytCss); return new Promise(async (resolve) => { + if (ytCss === "") { + resolve(null); + return; + } if (ytCss.enabled === true) { if (ytCss.type === "url") { await loadCss(ytCss.url).then(async (css) => { resolve(await view.webContents.insertCSS(css)); }); - } else { + } else if (ytCss.type === "editor") { resolve(await view.webContents.insertCSS(ytCss.css)); + } else { + resolve(null); } } else { resolve(null); @@ -39,13 +46,14 @@ const store = factory(); let currentTab: number | null = 0; let isFullscreen: boolean = false; +let isSidebar: boolean = false; export async function createTabManager(mainWindow: BrowserWindow) { function bounds() { return { x: 0, y: isFullscreen ? 0 : 40, - width: mainWindow.getBounds().width, + width: mainWindow.getBounds().width - (isSidebar && !isFullscreen ? 300 : 0), height: mainWindow.getBounds().height - (isFullscreen ? 0 : 40), }; } @@ -73,7 +81,6 @@ export async function createTabManager(mainWindow: BrowserWindow) { view.webContents.send("remoteControl:execute", command, value); }); - let loaded = false; let oldCssKey: string | null = null; @@ -92,7 +99,6 @@ export async function createTabManager(mainWindow: BrowserWindow) { }); }); - // async function updateCustomCss() { // let ytCss = JSON.parse(store.get("music-css", "")!); // if (ytCss.enabled) { @@ -125,6 +131,9 @@ export async function createTabManager(mainWindow: BrowserWindow) { set: () => { mainWindow.contentView.addChildView(view); }, + bounds: () => { + view.setBounds(bounds()); + }, data: () => { return { title: view.webContents.getTitle(), @@ -183,6 +192,9 @@ export async function createTabManager(mainWindow: BrowserWindow) { set: () => { mainWindow.contentView.addChildView(view); }, + bounds: () => { + view.setBounds(bounds()); + }, data: () => { return { title: view.webContents.getTitle(), @@ -195,7 +207,7 @@ export async function createTabManager(mainWindow: BrowserWindow) { }; } - function createTab() { + function createTab(url="https://www.youtube.com") { const view = new WebContentsView({ webPreferences: { transparent: true, @@ -212,7 +224,7 @@ export async function createTabManager(mainWindow: BrowserWindow) { view.setBounds(bounds()); }); view.setBounds(bounds()); - view.webContents.loadURL("https://www.youtube.com"); + view.webContents.loadURL(url); view.webContents.setWindowOpenHandler(windowOpenHandler); let id = Date.now(); @@ -270,6 +282,9 @@ export async function createTabManager(mainWindow: BrowserWindow) { set: () => { mainWindow.contentView.addChildView(view); }, + bounds: () => { + view.setBounds(bounds()); + }, data: () => { return { title: view.webContents.getTitle(), @@ -341,6 +356,8 @@ export async function createTabManager(mainWindow: BrowserWindow) { updateTabs(); }); + setInterval(updateTabs, 500); + ipcMain.on("page-action", (_, i) => { if (currentTab !== null) { switch (i) { @@ -378,6 +395,25 @@ export async function createTabManager(mainWindow: BrowserWindow) { } }); + ipcMain.on("open-sidebar", () => { + isSidebar = true; + tabs.forEach((tab) => { + tab.bounds(); + }); + }); + + ipcMain.on("close-sidebar", () => { + isSidebar = false; + tabs.forEach((tab) => { + tab.bounds(); + }); + }); + + ipcMain.on("open-bookmark", (_, url) => { + tabs = [...tabs, createTab(url)]; + switchTab(tabs.length-1); + }); + ipcMain.on("close-miniplayer", () => { if (currentTab !== null) { tabs[currentTab].view.setVisible(true); diff --git a/src/preload/index.ts b/src/preload/index.ts index 030e96c..74f71ad 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -46,9 +46,18 @@ export const api = { openMiniplayer: () => { ipcRenderer.send("open-miniplayer"); }, + openSidebar: () => { + ipcRenderer.send("open-sidebar"); + }, closeMiniplayer: () => { ipcRenderer.send("close-miniplayer"); }, + closeSidebar: () => { + ipcRenderer.send("close-sidebar"); + }, + openBookmark: (url:string) => { + ipcRenderer.send("open-bookmark", url); + }, onVideoDataChange: (listener: Function) => { ipcRenderer.on("video-data-changed", (_, data: musicData) => { listener(data); diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte index cd7a614..72742b1 100644 --- a/src/renderer/src/App.svelte +++ b/src/renderer/src/App.svelte @@ -1,10 +1,12 @@ + +
+ {#if id.length === 11} + + {/if} +
+ +
+
+ store.remove(url)} /> +
+
+
+
diff --git a/src/renderer/src/lib/stores.ts b/src/renderer/src/lib/stores.ts index 9732715..35361a1 100644 --- a/src/renderer/src/lib/stores.ts +++ b/src/renderer/src/lib/stores.ts @@ -2,10 +2,47 @@ import { writable } from "svelte/store"; import type { musicStore } from "./types"; export const activeView = writable("topbar"); +export const showBookmarks = writable(false); export const musicDataStore = writable({ - data: null, - volume: 50, - progress: 0, - state: -1, + data: null, + volume: 50, + progress: 0, + state: -1, }); export const theme = writable<"light" | "dark" | null>(null); + +export function createBookmarksStore(): { + subscribe: any; + add: Function; + remove: Function; +} { + const { subscribe, set, update } = writable([]); + + if (localStorage.tabs) { + set(JSON.parse(localStorage.tabs)); + } + + subscribe((tabs) => { + localStorage.tabs = JSON.stringify(tabs); + }); + + return { + subscribe, + add: (title, url) => { + update((tabs) => { + if (tabs.some((tab) => tab.url === url)) { + return tabs; + } else { + return [...tabs, { title, url, date: Date.now() }]; + } + }); + }, + remove: (url: string) => { + update((tabs) => { + return tabs.filter((tab) => { + return tab.url !== url; + }); + }); + }, + }; +} diff --git a/src/renderer/src/views/Bookmarks.svelte b/src/renderer/src/views/Bookmarks.svelte new file mode 100644 index 0000000..7756d36 --- /dev/null +++ b/src/renderer/src/views/Bookmarks.svelte @@ -0,0 +1,61 @@ + + +
+
+

Bookmarks

+ { + showBookmarks.set(false); + window.api.closeSidebar(); + }} + /> +
+
+ {#if tabs && tabs.length > 0 && tabs[active].type === "yt"} + + {/if} +
+ {#each $bookmarks.toReversed() as tab, i (tab.url)} + + {/each} +
+
+
diff --git a/src/renderer/src/views/MenuBar.svelte b/src/renderer/src/views/MenuBar.svelte index 3edb67a..7ec464a 100644 --- a/src/renderer/src/views/MenuBar.svelte +++ b/src/renderer/src/views/MenuBar.svelte @@ -1,12 +1,16 @@ -
-
-
- - - -
- window.api.newTab()} /> - { - activeView.set("miniplayer"); - window.api.openMiniplayer(); - }} - /> - { - activeView.set("settings"); - window.api.openSettings(); - }} - /> -
- -
-
- -
- -
-
+
+
+ + + +
+ window.api.newTab()} /> + { + showBookmarks.set(true); + window.api.openSidebar(); + }} /> + { + activeView.set("miniplayer"); + window.api.openMiniplayer(); + }} + /> + { + activeView.set("settings"); + window.api.openSettings(); + }} + /> +
+ +
+