StreamSaver/popup.html at dev · Punshnut/StreamSaver · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>StreamSaver</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="popup">
      <!-- Background grid -->
      <div class="bg-grid" aria-hidden="true"></div>

      <!-- Header -->
      <header class="hero">
        <div class="hero-head">
          <div class="hero-copy">
            <p class="eyebrow">LIVE CONTROL DECK</p>
            <h1 class="title">StreamSaver</h1>
            <p class="subtitle">Fast and reliable Twitch quality controls</p>
          </div>
        </div>
      </header>

      <!-- Mode controls -->
      <section class="panel" aria-label="Mode">
        <h2>Mode</h2>
        <div class="mode-toggle" role="group" aria-label="StreamSaver mode">
          <button type="button" id="mode-low-btn" class="mode-btn" data-mode="low">Travel / Data Saver</button>
          <button type="button" id="mode-high-btn" class="mode-btn" data-mode="high">High Quality</button>
        </div>
        <p id="mode-summary" class="mode-summary">Current mode: High Quality</p>
        <div class="master-switch-row">
          <p class="master-switch-copy">Plugin logic</p>
          <label class="inline-toggle inline-toggle--master" for="plugin-enabled">
            <input type="checkbox" id="plugin-enabled" name="pluginEnabled" />
            <span id="plugin-enabled-label">Enabled</span>
          </label>
        </div>
      </section>

      <!-- Quick resolution controls -->
      <section class="panel" aria-label="Quick Resolution">
        <div class="panel-head">
          <h2>Quick Resolution</h2>
          <label class="inline-toggle" for="quick-resolution-visible">
            <input
              type="checkbox"
              id="quick-resolution-visible"
              name="quickResolutionVisible"
              aria-controls="quick-resolution-content"
            />
            <span>Show</span>
          </label>
        </div>
        <div id="quick-resolution-content" class="quick-resolution-content" hidden>
          <div class="quality-grid">
            <button type="button" class="quality-btn" data-quality="160p">160p</button>
            <button type="button" class="quality-btn" data-quality="360p">360p</button>
            <button type="button" class="quality-btn" data-quality="480p">480p</button>
            <button type="button" class="quality-btn" data-quality="720p">720p</button>
            <button type="button" class="quality-btn" data-quality="1080p">1080p</button>
            <button type="button" class="quality-btn" data-quality="1440p">1440p</button>
            <button type="button" class="quality-btn" data-quality="2160p">2160p</button>
            <button type="button" class="quality-btn" data-quality="Source">Source</button>
          </div>
        </div>
      </section>

      <!-- Mode resolution presets -->
      <section class="panel" aria-label="Resolutions">
        <h2>Resolutions</h2>
        <div class="row">
          <label for="fastToggleLow">Low</label>
          <select id="fastToggleLow" name="fastToggleLow">
            <option value="160p">160p</option>
            <option value="360p">360p</option>
            <option value="480p" selected>480p</option>
            <option value="720p">720p</option>
            <option value="1080p">1080p</option>
            <option value="1440p">1440p</option>
            <option value="2160p">2160p</option>
            <option value="Source">Source</option>
          </select>
        </div>
        <div class="row">
          <label for="fastToggleHigh">High</label>
          <select id="fastToggleHigh" name="fastToggleHigh">
            <option value="160p">160p</option>
            <option value="360p">360p</option>
            <option value="480p">480p</option>
            <option value="720p">720p</option>
            <option value="1080p">1080p</option>
            <option value="1440p">1440p</option>
            <option value="2160p">2160p</option>
            <option value="Source" selected>Source</option>
          </select>
        </div>
      </section>

      <!-- Project links -->
      <div class="support-row">
        <a
          class="support-link-btn support-link-btn--website"
          href="https://feuerbacher.me/streamsaver-browser-extension/"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Open StreamSaver website"
          >Website</a>
        <a
          class="support-link-btn support-link-btn--github"
          href="https://github.com/Punshnut/StreamSaver"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Open StreamSaver GitHub project"
          >GitHub</a>
        <a
          class="support-link-btn support-link-btn--donate"
          href="https://ko-fi.com/janfeuerbacher"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Donate to support StreamSaver"
          >Donate</a>
      </div>

      <!-- Status line -->
      <div id="status" class="status" data-state="loading">Loading popup...</div>
    </main>

    <script src="popup.js"></script>
  </body>
</html>