A music player that connects to your cloud/distributed storage.
chore: dropbox auth method
+85
-51
+1
-1
src/components/input/dropbox/constants.js
+1
-1
src/components/input/dropbox/constants.js
+29
-1
src/components/input/dropbox/element.js
+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
+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) {