-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathTheme_direct-download.html
51 lines (42 loc) · 3.91 KB
/
Theme_direct-download.html
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
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>CPU-Audio theme example : Direct download instead of action button</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="../build/cpu-audio.direct-download.js" async></script>
<body>
<p><a href="../examples.html">← back to examples list</a></p>
<h1>CPU-Audio theme example : Direct download instead of action button</h1>
<p>You want to change buttons of position, shape or… whatever ? Want to recreate the Winamp classic 2.x theme or port one of the Audion ones ? Yes you can ! Check [INTERNALS.md](https://github.com/dascritch/cpu-audio/blob/master/INTERNALS.md) more more details</p>
<cpu-audio title="Ex0157 Web, State of the art 2021" canonical="https://cpu.dascritch.net/post/2021/03/11/Ex0157-Web%2C-State-of-the-art-2021" poster="https://cpu.dascritch.net/public/Images/Emissions/.1902-Ex0103-WebStateOfTheArt_s.png" waveform="https://cpu.dascritch.net/public/Sonores/Emissions/waveforms/0157-CPU%2811-03-21%29.png">
<audio controls="controls" id="emission-0157">
<source src="https://cpu.dascritch.net/public/Sonores/Emissions/hls/0157-CPU%2811-03-21%29/index.m3u8" type="application/x-mpegurl" />
<source src="https://cpu.dascritch.net/public/Sonores/Emissions/podcast/0157-CPU%2811-03-21%29.mp3" type="audio/mpeg" data-downloadable />
</audio>
</cpu-audio>
<p>How to create a theme :</p>
<ol>
<li>We created a <a href="../src/themes/direct-download"><code>direct-download</code></a> directory into <a href="../src/themes"><code>src/themes</code></a></li>
<li>We copied the original <a href="../src/themes/default/template.html"><code>template.html</code></a> from <a href="../src/themes/default"><code>src/themes/default</code></a></li>
<li>We do not need to copy the other files from <code>src/themes/default</code>, as they will be transparently used</li>
<li><a href="../src/themes/direct-download/template.html"><code>src/themes/direct-download/template.html</code></a> was modified to replace the <q>action</q> button with the <q>download</q> link</li>
<li>The theme is build in the shell with <code>./make.sh --theme direct-download</code></li>
<li>A <a href="../build/cpu-audio.direct-download.js"><code>build/cpu-audio.direct-download.js</code></a> is created</li>
<li>We insert it instead of the usual <code>build/cpu-audio.js</code></li>
</ol>
<p>
Please note :
</p>
<ul>
<li>The final build should always stay compact, never upper than 200 kb. We always try to have a standard build under 50 kb</li>
<li>Please be kind : avoid to many elements and classes, check usability with accessibility features.</li>
<li>As we re-use the same layout, properties and css variables, <a href="../applications/live_config.html">live_config</a> generated configs can be used</li>
<li>If the name of the theme starts with <q>_</q>, it won't be indexed by git. If you want to keep your theme as private, this is the way to do</li>
<li>If you want to create a public theme, please avoid external dependencies as in CSS frameworks, or use some fallbacks (as we do for fonts)</li>
<li>Your theme will still work with minor release of the versions 7.x.y of cpu-audio. If I change the major version to <q>8</q>, it means themed build may break without some changes</li>
<li>Some elements, mainly named, are strictly needed. See <q>All named elements in template needed in code</q> in <a href="../tests/test-interface.js">tests/test-interface.js</a>. We try to make some of them optional</li>
<li>If you do your own private theme, I don't care if you're introducing dependencies, to, by example, a CSS framework, what else</li>
<li>We don't <a href="../tests">test</a> themed-builds yet. This is a miss, and we need some help there</li>
</ul>
</body>
</html>