A music player that connects to your cloud/distributed storage. diffuse.sh
Something went wrong. Try again.
2.8 kB · 96 lines
JavaScript
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697import { defineElement, DiffuseElement } from "~/common/element.js";import { DEFAULT_APP_KEY, PKCE_VERIFIER_KEY, SCHEME } from "./constants.js";import { accountsFromTracks, buildURI, generatePKCEPair } from "./common.js";
/** * @import {InputActions, InputSchemeProvider} from "@specs/components/input/types.d.ts" * @import {ProxiedActions} from "~/common/worker.d.ts" * @import {Track} from "~/definitions/types.d.ts" */
////////////////////////////////////////////// ELEMENT////////////////////////////////////////////
/** * @implements {ProxiedActions<InputActions>} * @implements {InputSchemeProvider} */class DropboxInput extends DiffuseElement { static NAME = "diffuse/input/dropbox"; static WORKER_URL = "components/input/dropbox/worker.js";
SCHEME = SCHEME;
/** @type {string} */ appKey = DEFAULT_APP_KEY;
static observedAttributes = ["app-key"];
/** * @override * @param {string} name * @param {string} old * @param {string} next */ attributeChangedCallback(name, old, next) { super.attributeChangedCallback(name, old, next); if (name === "app-key" && next !== null) this.appKey = next; }
constructor() { super();
/** @type {ProxiedActions<InputActions>} */ this.proxy = this.workerProxy();
this.artwork = this.proxy.artwork; this.consult = this.proxy.consult; this.detach = this.proxy.detach; this.groupConsult = this.proxy.groupConsult; this.list = this.proxy.list; this.resolve = this.proxy.resolve; }
// 🛠️
async authorize() { localStorage.setItem("oauth/callback/redirect_path", location.pathname + location.search);
// Use the authorization-code flow with PKCE so we receive a // long-lived refresh token that can automatically renew the // short-lived access token (4 h) without user interaction. const { verifier, challenge } = await generatePKCEPair(); localStorage.setItem(PKCE_VERIFIER_KEY, verifier);
const params = new URLSearchParams({ response_type: "code", client_id: this.appKey, redirect_uri: location.origin + "/oauth/callback/", token_access_type: "offline", code_challenge: challenge, code_challenge_method: "S256", });
location.assign(`https://www.dropbox.com/oauth2/authorize?${params}`); }
/** @param {Track[]} tracks */ sources(tracks) { return Object.values(accountsFromTracks(tracks)).map((account) => ({ label: `Dropbox (${account.directoryPath})`, uri: buildURI(account), })); }}
export default DropboxInput;
////////////////////////////////////////////// REGISTER////////////////////////////////////////////
export const CLASS = DropboxInput;export const NAME = "di-dropbox";
defineElement(NAME, CLASS);