Skip to content

Commit a631bc0

Browse files
steveseguinsteveseguin
committed
v29.0
1 parent 189b835 commit a631bc0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+88069
-25599
lines changed

‎auth-client.js‎

Lines changed: 848 additions & 848 deletions
Large diffs are not rendered by default.

‎auth-styles.css‎

Lines changed: 341 additions & 341 deletions
Large diffs are not rendered by default.

‎clipboard.html‎

Lines changed: 790 additions & 790 deletions
Large diffs are not rendered by default.

‎cloud.html‎

Lines changed: 147 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,147 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>VDO.Ninja Cloud Sync Setup</title>
7-
<style>
8-
:root {
9-
color-scheme: dark;
10-
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
11-
background: #04070f;
12-
color: #f4f8ff;
13-
}
14-
body {
15-
margin: 0;
16-
padding: 0 16px 32px;
17-
line-height: 1.5;
18-
}
19-
header {
20-
padding: 32px 0 8px;
21-
}
22-
h1 {
23-
margin: 0 0 8px;
24-
font-size: clamp(1.8rem, 2.4vw, 2.6rem);
25-
}
26-
h2 {
27-
margin-top: 32px;
28-
font-size: 1.3rem;
29-
}
30-
h3 {
31-
margin-top: 18px;
32-
font-size: 1rem;
33-
letter-spacing: 0.04em;
34-
text-transform: uppercase;
35-
}
36-
p {
37-
max-width: 720px;
38-
}
39-
a {
40-
color: #8fc6ff;
41-
}
42-
ol {
43-
max-width: 760px;
44-
padding-left: 20px;
45-
}
46-
code {
47-
background: rgba(255, 255, 255, 0.08);
48-
border-radius: 4px;
49-
padding: 2px 4px;
50-
font-size: 0.9rem;
51-
}
52-
.card {
53-
background: rgba(255, 255, 255, 0.04);
54-
border: 1px solid rgba(255, 255, 255, 0.08);
55-
border-radius: 16px;
56-
padding: 18px;
57-
margin-top: 18px;
58-
max-width: 820px;
59-
}
60-
.note {
61-
font-size: 0.9rem;
62-
opacity: 0.75;
63-
}
64-
@media (max-width: 640px) {
65-
body {
66-
padding: 0 12px 24px;
67-
}
68-
.card {
69-
padding: 16px;
70-
}
71-
}
72-
</style>
73-
</head>
74-
<body>
75-
<header>
76-
<p>VDO.Ninja · Cloud Sync Guide</p>
77-
<h1>Configure Google Drive & Dropbox uploads</h1>
78-
<p>
79-
The podcast studio can stream each local recording chunk to cloud storage for redundancy. Use the steps below
80-
to authorize the built-in Google Drive integration or to generate a Dropbox personal access token that the
81-
studio can store locally.
82-
</p>
83-
</header>
84-
85-
<section id="google-drive" class="card">
86-
<h2>Google Drive (built-in OAuth)</h2>
87-
<ol>
88-
<li>Open the podcast studio (`?studio=podcast`) and locate the <strong>Cloud Sync</strong> card.</li>
89-
<li>Click <em>Link Google Drive</em>. Google Identity Services opens a popup window.</li>
90-
<li>Pick the Google account that will own the uploads and approve the <code>drive.file</code> scope.</li>
91-
<li>
92-
Once the popup closes, the status pill switches to “Linked” and future recordings stream into your Drive root
93-
(or the custom folder configured via <code>&amp;gdrivefolder=YourFolder</code>).
94-
</li>
95-
</ol>
96-
<p class="note">
97-
The Drive token stays in the browser session. Re-click the button whenever the token expires or if you switch
98-
accounts.
99-
</p>
100-
</section>
101-
102-
<section id="dropbox" class="card">
103-
<h2>Dropbox (OAuth + refresh tokens)</h2>
104-
<p>
105-
The Dropbox integration now mirrors the Google Drive workflow: clicking <em>Link Dropbox</em> opens an OAuth
106-
popup, requests the <code>files.content.write</code> / <code>files.metadata.write</code> scopes, and stores a
107-
refresh token locally so future sessions can renew access automatically. No server-side helpers are required—the
108-
entire exchange happens in your browser.
109-
</p>
110-
<h3>Authorize via OAuth</h3>
111-
<ol>
112-
<li>Open the podcast studio (`?studio=podcast`) and scroll to the <strong>Cloud Sync</strong> card.</li>
113-
<li>Click <em>Link Dropbox</em>. Allow the popup (make sure your browser isn’t blocking it).</li>
114-
<li>
115-
Sign in with the Dropbox account that should receive uploads and approve the requested scopes. The popup will
116-
close once the code exchange completes.
117-
</li>
118-
<li>The studio status should switch to “Dropbox linked. Recordings will upload automatically.”</li>
119-
</ol>
120-
<p class="note">
121-
Tokens never leave your browser. We store the refresh token (and the most recent short-lived access token) inside
122-
<code>localStorage</code> so background uploads can reconnect silently even after several hours.
123-
</p>
124-
<h3>Manual fallback token (optional)</h3>
125-
<p>
126-
If you need an emergency override—e.g., when the OAuth popup cannot run inside a kiosk build—you can still paste
127-
a personal access token into the Dropbox field:
128-
</p>
129-
<ol>
130-
<li>
131-
Visit
132-
<a href="https://www.dropbox.com/developers/apps" target="_blank" rel="noopener"
133-
>https://www.dropbox.com/developers/apps</a
134-
>, open your scoped app, and click <em>Generate access token</em>.
135-
</li>
136-
<li>Copy the token, paste it into the Cloud Sync token box, then click <strong>Link Dropbox</strong>.</li>
137-
<li>
138-
You can also launch the studio with <code>?dropbox=YOUR_TOKEN</code>; the textbox will populate automatically.
139-
</li>
140-
</ol>
141-
<p class="note">
142-
Dropbox’s generated tokens expire quickly (typically ~4 hours) and do not refresh. Prefer the OAuth link unless
143-
you’re temporarily sidestepping browser restrictions.
144-
</p>
145-
</section>
146-
</body>
147-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>VDO.Ninja Cloud Sync Setup</title>
7+
<style>
8+
:root {
9+
color-scheme: dark;
10+
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
11+
background: #04070f;
12+
color: #f4f8ff;
13+
}
14+
body {
15+
margin: 0;
16+
padding: 0 16px 32px;
17+
line-height: 1.5;
18+
}
19+
header {
20+
padding: 32px 0 8px;
21+
}
22+
h1 {
23+
margin: 0 0 8px;
24+
font-size: clamp(1.8rem, 2.4vw, 2.6rem);
25+
}
26+
h2 {
27+
margin-top: 32px;
28+
font-size: 1.3rem;
29+
}
30+
h3 {
31+
margin-top: 18px;
32+
font-size: 1rem;
33+
letter-spacing: 0.04em;
34+
text-transform: uppercase;
35+
}
36+
p {
37+
max-width: 720px;
38+
}
39+
a {
40+
color: #8fc6ff;
41+
}
42+
ol {
43+
max-width: 760px;
44+
padding-left: 20px;
45+
}
46+
code {
47+
background: rgba(255, 255, 255, 0.08);
48+
border-radius: 4px;
49+
padding: 2px 4px;
50+
font-size: 0.9rem;
51+
}
52+
.card {
53+
background: rgba(255, 255, 255, 0.04);
54+
border: 1px solid rgba(255, 255, 255, 0.08);
55+
border-radius: 16px;
56+
padding: 18px;
57+
margin-top: 18px;
58+
max-width: 820px;
59+
}
60+
.note {
61+
font-size: 0.9rem;
62+
opacity: 0.75;
63+
}
64+
@media (max-width: 640px) {
65+
body {
66+
padding: 0 12px 24px;
67+
}
68+
.card {
69+
padding: 16px;
70+
}
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
<header>
76+
<p>VDO.Ninja · Cloud Sync Guide</p>
77+
<h1>Configure Google Drive & Dropbox uploads</h1>
78+
<p>
79+
The podcast studio can stream each local recording chunk to cloud storage for redundancy. Use the steps below
80+
to authorize the built-in Google Drive integration or to generate a Dropbox personal access token that the
81+
studio can store locally.
82+
</p>
83+
</header>
84+
85+
<section id="google-drive" class="card">
86+
<h2>Google Drive (built-in OAuth)</h2>
87+
<ol>
88+
<li>Open the podcast studio (`?studio=podcast`) and locate the <strong>Cloud Sync</strong> card.</li>
89+
<li>Click <em>Link Google Drive</em>. Google Identity Services opens a popup window.</li>
90+
<li>Pick the Google account that will own the uploads and approve the <code>drive.file</code> scope.</li>
91+
<li>
92+
Once the popup closes, the status pill switches to “Linked” and future recordings stream into your Drive root
93+
(or the custom folder configured via <code>&amp;gdrivefolder=YourFolder</code>).
94+
</li>
95+
</ol>
96+
<p class="note">
97+
The Drive token stays in the browser session. Re-click the button whenever the token expires or if you switch
98+
accounts.
99+
</p>
100+
</section>
101+
102+
<section id="dropbox" class="card">
103+
<h2>Dropbox (OAuth + refresh tokens)</h2>
104+
<p>
105+
The Dropbox integration now mirrors the Google Drive workflow: clicking <em>Link Dropbox</em> opens an OAuth
106+
popup, requests the <code>files.content.write</code> / <code>files.metadata.write</code> scopes, and stores a
107+
refresh token locally so future sessions can renew access automatically. No server-side helpers are required—the
108+
entire exchange happens in your browser.
109+
</p>
110+
<h3>Authorize via OAuth</h3>
111+
<ol>
112+
<li>Open the podcast studio (`?studio=podcast`) and scroll to the <strong>Cloud Sync</strong> card.</li>
113+
<li>Click <em>Link Dropbox</em>. Allow the popup (make sure your browser isn’t blocking it).</li>
114+
<li>
115+
Sign in with the Dropbox account that should receive uploads and approve the requested scopes. The popup will
116+
close once the code exchange completes.
117+
</li>
118+
<li>The studio status should switch to “Dropbox linked. Recordings will upload automatically.”</li>
119+
</ol>
120+
<p class="note">
121+
Tokens never leave your browser. We store the refresh token (and the most recent short-lived access token) inside
122+
<code>localStorage</code> so background uploads can reconnect silently even after several hours.
123+
</p>
124+
<h3>Manual fallback token (optional)</h3>
125+
<p>
126+
If you need an emergency override—e.g., when the OAuth popup cannot run inside a kiosk build—you can still paste
127+
a personal access token into the Dropbox field:
128+
</p>
129+
<ol>
130+
<li>
131+
Visit
132+
<a href="https://www.dropbox.com/developers/apps" target="_blank" rel="noopener"
133+
>https://www.dropbox.com/developers/apps</a
134+
>, open your scoped app, and click <em>Generate access token</em>.
135+
</li>
136+
<li>Copy the token, paste it into the Cloud Sync token box, then click <strong>Link Dropbox</strong>.</li>
137+
<li>
138+
You can also launch the studio with <code>?dropbox=YOUR_TOKEN</code>; the textbox will populate automatically.
139+
</li>
140+
</ol>
141+
<p class="note">
142+
Dropbox’s generated tokens expire quickly (typically ~4 hours) and do not refresh. Prefer the OAuth link unless
143+
you’re temporarily sidestepping browser restrictions.
144+
</p>
145+
</section>
146+
</body>
147+
</html>

0 commit comments

Comments
 (0)