vdo.ninja/cloud.html at develop · CaptKrisp/vdo.ninja · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>VDO.Ninja Cloud Sync Setup</title>
    <style>
      :root {
        color-scheme: dark;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        background: #04070f;
        color: #f4f8ff;
      }
      body {
        margin: 0;
        padding: 0 16px 32px;
        line-height: 1.5;
      }
      header {
        padding: 32px 0 8px;
      }
      h1 {
        margin: 0 0 8px;
        font-size: clamp(1.8rem, 2.4vw, 2.6rem);
      }
      h2 {
        margin-top: 32px;
        font-size: 1.3rem;
      }
      h3 {
        margin-top: 18px;
        font-size: 1rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      p {
        max-width: 720px;
      }
      a {
        color: #8fc6ff;
      }
      ol {
        max-width: 760px;
        padding-left: 20px;
      }
      code {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 4px;
        padding: 2px 4px;
        font-size: 0.9rem;
      }
      .card {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 18px;
        margin-top: 18px;
        max-width: 820px;
      }
      .note {
        font-size: 0.9rem;
        opacity: 0.75;
      }
      @media (max-width: 640px) {
        body {
          padding: 0 12px 24px;
        }
        .card {
          padding: 16px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <p>VDO.Ninja · Cloud Sync Guide</p>
      <h1>Configure Google Drive & Dropbox uploads</h1>
      <p>
        The podcast studio can stream each local recording chunk to cloud storage for redundancy. Use the steps below
        to authorize the built-in Google Drive integration or to generate a Dropbox personal access token that the
        studio can store locally.
      </p>
    </header>

    <section id="google-drive" class="card">
      <h2>Google Drive (built-in OAuth)</h2>
      <ol>
        <li>Open the podcast studio (`?studio=podcast`) and locate the <strong>Cloud Sync</strong> card.</li>
        <li>Click <em>Link Google Drive</em>. Google Identity Services opens a popup window.</li>
        <li>Pick the Google account that will own the uploads and approve the <code>drive.file</code> scope.</li>
        <li>
          Once the popup closes, the status pill switches to “Linked” and future recordings stream into your Drive root
          (or the custom folder configured via <code>&amp;gdrivefolder=YourFolder</code>).
        </li>
      </ol>
      <p class="note">
        The Drive token stays in the browser session. Re-click the button whenever the token expires or if you switch
        accounts.
      </p>
    </section>

    <section id="dropbox" class="card">
      <h2>Dropbox (OAuth + refresh tokens)</h2>
      <p>
        The Dropbox integration now mirrors the Google Drive workflow: clicking <em>Link Dropbox</em> opens an OAuth
        popup, requests the <code>files.content.write</code> / <code>files.metadata.write</code> scopes, and stores a
        refresh token locally so future sessions can renew access automatically. No server-side helpers are required—the
        entire exchange happens in your browser.
      </p>
      <h3>Authorize via OAuth</h3>
      <ol>
        <li>Open the podcast studio (`?studio=podcast`) and scroll to the <strong>Cloud Sync</strong> card.</li>
        <li>Click <em>Link Dropbox</em>. Allow the popup (make sure your browser isn’t blocking it).</li>
        <li>
          Sign in with the Dropbox account that should receive uploads and approve the requested scopes. The popup will
          close once the code exchange completes.
        </li>
        <li>The studio status should switch to “Dropbox linked. Recordings will upload automatically.”</li>
      </ol>
      <p class="note">
        Tokens never leave your browser. We store the refresh token (and the most recent short-lived access token) inside
        <code>localStorage</code> so background uploads can reconnect silently even after several hours.
      </p>
      <h3>Manual fallback token (optional)</h3>
      <p>
        If you need an emergency override—e.g., when the OAuth popup cannot run inside a kiosk build—you can still paste
        a personal access token into the Dropbox field:
      </p>
      <ol>
        <li>
          Visit
          <a href="https://www.dropbox.com/developers/apps" target="_blank" rel="noopener"
            >https://www.dropbox.com/developers/apps</a
          >, open your scoped app, and click <em>Generate access token</em>.
        </li>
        <li>Copy the token, paste it into the Cloud Sync token box, then click <strong>Link Dropbox</strong>.</li>
        <li>
          You can also launch the studio with <code>?dropbox=YOUR_TOKEN</code>; the textbox will populate automatically.
        </li>
      </ol>
      <p class="note">
        Dropbox’s generated tokens expire quickly (typically ~4 hours) and do not refresh. Prefer the OAuth link unless
        you’re temporarily sidestepping browser restrictions.
      </p>
    </section>
  </body>
</html>