A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: dropbox auth method

+85 -51
+1 -1
src/components/input/dropbox/constants.js
··· 1 1 export const SCHEME = "dropbox"; 2 - export const APP_KEY = "kwsydtrzban41zr"; 2 + export const DEFAULT_APP_KEY = "kwsydtrzban41zr";
+29 -1
src/components/input/dropbox/element.js
··· 1 1 import { defineElement, DiffuseElement } from "~/common/element.js"; 2 - import { SCHEME } from "./constants.js"; 2 + import { DEFAULT_APP_KEY, SCHEME } from "./constants.js"; 3 3 import { accountsFromTracks, buildURI } from "./common.js"; 4 4 5 5 /** ··· 22 22 23 23 SCHEME = SCHEME; 24 24 25 + /** @type {string} */ 26 + appKey = DEFAULT_APP_KEY; 27 + 28 + static observedAttributes = ["app-key"]; 29 + 30 + /** 31 + * @override 32 + * @param {string} name 33 + * @param {string} old 34 + * @param {string} next 35 + */ 36 + attributeChangedCallback(name, old, next) { 37 + super.attributeChangedCallback(name, old, next); 38 + if (name === "app-key" && next !== null) this.appKey = next; 39 + } 40 + 25 41 constructor() { 26 42 super(); 27 43 ··· 37 53 } 38 54 39 55 // 🛠️ 56 + 57 + authorize() { 58 + sessionStorage.setItem("oauth/callback/redirect_path", location.pathname + location.search); 59 + 60 + const params = new URLSearchParams({ 61 + response_type: "token", 62 + client_id: this.appKey, 63 + redirect_uri: location.origin + "/oauth/callback/", 64 + }); 65 + 66 + location.assign(`https://www.dropbox.com/oauth2/authorize?${params}`); 67 + } 40 68 41 69 /** @param {Track[]} tracks */ 42 70 sources(tracks) {
+55 -49
src/facets/connect/dropbox/index.inline.js
··· 1 1 import * as TID from "@atcute/tid"; 2 - import { html, nothing } from "lit-html"; 2 + import { html } from "lit-html"; 3 3 4 4 import * as Output from "~/common/output.js"; 5 5 import { SCHEME } from "~/components/input/dropbox/constants.js"; 6 - import { accountId, buildURI, parseURI } from "~/components/input/dropbox/common.js"; 7 - import { APP_KEY } from "~/components/input/dropbox/constants.js"; 6 + import { 7 + accountId, 8 + buildURI, 9 + parseURI, 10 + } from "~/components/input/dropbox/common.js"; 8 11 import { effect } from "~/common/signal.js"; 9 12 import foundation from "~/common/foundation.js"; 10 13 ··· 51 54 52 55 description: html` 53 56 <p> 54 - Add your Dropbox as an audio source. Authorize with Dropbox, then 55 - optionally specify which directory to scan for music. 57 + Add your Dropbox as an audio source. Authorize with Dropbox, then optionally 58 + specify which directory to scan for music. 56 59 </p> 57 60 `, 58 61 ··· 79 82 </div> 80 83 `, 81 84 82 - formFields: html``, 85 + formFields: html` 86 + 87 + `, 83 88 onSubmit: async () => {}, 84 89 }); 85 90 86 - const authSection = /** @type {HTMLElement} */ (document.querySelector("#dropbox-auth-section")); 87 - const addSection = /** @type {HTMLElement} */ (document.querySelector("#dropbox-add-section")); 88 - const dirInput = /** @type {HTMLInputElement} */ (document.querySelector("#dropbox-dir")); 91 + const authSection = 92 + /** @type {HTMLElement} */ (document.querySelector("#dropbox-auth-section")); 93 + const addSection = 94 + /** @type {HTMLElement} */ (document.querySelector("#dropbox-add-section")); 95 + const dirInput = 96 + /** @type {HTMLInputElement} */ (document.querySelector("#dropbox-dir")); 89 97 90 98 if (currentToken) { 91 99 authSection.hidden = true; ··· 131 139 //////////////////////////////////////////// 132 140 133 141 document.querySelector("#dropbox-auth-btn")?.addEventListener("click", () => { 134 - sessionStorage.setItem("oauth/callback/redirect_path", location.pathname + location.search); 135 - 136 - const params = new URLSearchParams({ 137 - response_type: "token", 138 - client_id: APP_KEY, 139 - redirect_uri: location.origin + "/oauth/callback/", 140 - }); 141 - 142 - location.assign(`https://www.dropbox.com/oauth2/authorize?${params}`); 142 + const dropboxInput = /** @type {import("~/components/input/dropbox/element.js").default} */ (inputConfigurator.inputs()[SCHEME]); 143 + dropboxInput.authorize(); 143 144 }); 144 145 145 - document.querySelector("#dropbox-add-btn")?.addEventListener("click", async () => { 146 - if (!currentToken) return; 146 + document.querySelector("#dropbox-add-btn")?.addEventListener( 147 + "click", 148 + async () => { 149 + if (!currentToken) return; 147 150 148 - setError(null); 149 - try { 150 - const rawDir = dirInput?.value?.trim() || "/"; 151 - const directoryPath = rawDir.startsWith("/") ? rawDir : "/" + rawDir; 151 + setError(null); 152 + try { 153 + const rawDir = dirInput?.value?.trim() || "/"; 154 + const directoryPath = rawDir.startsWith("/") ? rawDir : "/" + rawDir; 152 155 153 - const account = { accessToken: currentToken, directoryPath }; 154 - const uri = buildURI(account); 155 - const now = new Date().toISOString(); 156 + const account = { accessToken: currentToken, directoryPath }; 157 + const uri = buildURI(account); 158 + const now = new Date().toISOString(); 156 159 157 - const tracksCol = outputOrchestrator.tracks.collection(); 158 - const existingTracks = tracksCol.state === "loaded" ? tracksCol.data : []; 160 + const tracksCol = outputOrchestrator.tracks.collection(); 161 + const existingTracks = tracksCol.state === "loaded" ? tracksCol.data : []; 159 162 160 - await outputOrchestrator.tracks.save([ 161 - ...existingTracks, 162 - { 163 - $type: "sh.diffuse.output.track", 164 - id: TID.now(), 165 - createdAt: now, 166 - updatedAt: now, 167 - kind: "placeholder", 168 - uri, 169 - }, 170 - ]); 163 + await outputOrchestrator.tracks.save([ 164 + ...existingTracks, 165 + { 166 + $type: "sh.diffuse.output.track", 167 + id: TID.now(), 168 + createdAt: now, 169 + updatedAt: now, 170 + kind: "placeholder", 171 + uri, 172 + }, 173 + ]); 171 174 172 - // Reset UI after adding 173 - if (dirInput) dirInput.value = ""; 174 - currentToken = null; 175 - authSection.hidden = false; 176 - addSection.hidden = true; 177 - } catch (err) { 178 - setError(err instanceof Error ? err.message : "Failed to add Dropbox source"); 179 - } 180 - }); 175 + // Reset UI after adding 176 + if (dirInput) dirInput.value = ""; 177 + currentToken = null; 178 + authSection.hidden = false; 179 + addSection.hidden = true; 180 + } catch (err) { 181 + setError( 182 + err instanceof Error ? err.message : "Failed to add Dropbox source", 183 + ); 184 + } 185 + }, 186 + ); 181 187 182 188 /** @param {string} uri */ 183 189 async function removeSource(uri) {