live_config.html

<title>CPU-Audio application : Configuration of the player</title>
<script src="../build/cpu-audio.js" async></script>
<link rel="stylesheet" href="../src/global.css" />

<p><a href="../examples.html">← back to examples list</a></p>
<h1>CPU-Audio configuration of the player</h1>

<p>
	This is a primitive live configurator for CPU-Audio, helping you to tune it for your website. Please note that you should have a browser with webcomponents support to really enjoy it.

	See <a href="https://github.com/dascritch/cpu-audio/blob/master/INSTALL.md">INSTALL.md</a> for explanations on attributes and values.
</p>

<div id="demo">
<cpu-audio 
	title="Choose an URL for source and give it a title">
	<audio controls id="sound">
		<source src="./tests-assets/blank.mp3" type="audio/mpeg" />
		<track kind="chapters" src="" default />
	</audio>
	<!-- {% include no_component_message.html %} -->
</cpu-audio>
</div>

<p id="steps">
	<a href="#configurator_html">Configure html</a>
	<a href="#generated_html">Generated html</a>
	<a href="#configurator_css">Configure css</a>
	<a href="#generated_css">Generated css</a>
	<a href="#configurator_paramtag">Global parameters</a>
	<a href="#generated_paramtag">Generated global parameters</a>
	<span id="spacer">&nbsp;</span>
	<button type="button" id="do_fine" title="A long press on the time line will display this alternate interface">Fine position</button>
	<button type="button" id="do_waiting" title="A state occuring during a play, when the browser is still waiting for audio data">Do loading</button>
	<button type="button" id="do_glow" title="When a sound was repositionned at load. Can occur at first play with “glow” parameter">Do glow</button>
	<button type="button" id="do_error" title="Can occurs due to misconfiguration">Do error</button>
</p>

<form id="configurator_html" action="#generated_html" class="pan" >

<fieldset>
	<label for="source_1">
		<span>
			<select>
				<option value="audio/mpeg">MP3</option>
				<option selected value="audio/ogg">OGG Vorbis</option>
				<option value="audio/aac">MP4 AAC</option>
				<option value="audio/webm">Webm</option>
				<option value="application/dash+xml">DASH .mpd</option>
				<option value="application/x-mpegurl">HLS .m3u8</option>
				<option value="audio/wav">WAV</option>
				<option value="audio/flac">FLAC</option>
			</select> sound file
		</span>
		<input id="source_1" name="source_1" type="url" value="https://dascritch.net/vrac/sonores/1404-SambaResille2003.ogg" placeholder="https://example.com/sound.ogg" />
	</label>
	<label for="source_2">
		<span>
			<select>
				<option selected value="audio/mpeg">MP3</option>
				<option value="audio/ogg">OGG Vorbis</option>
				<option value="audio/aac">MP4 AAC</option>
				<option value="audio/webm">Webm</option>
				<option value="application/dash+xml">DASH .mpd</option>
				<option value="application/x-mpegurl">HLS .m3u8</option>
				<option value="audio/wav">WAV</option>
				<option value="audio/flac">FLAC</option>
			</select> sound file
		</span>
		<input id="source_2" name="source_2" type="url" value="https://dascritch.net/vrac/sonores/podcast/1404-SambaResille2003.mp3" placeholder="https://example.com/sound.mp4" />
	</label>
	<label for="source_3">
		<span>
			<select>
				<option value="audio/mpeg">MP3</option>
				<option value="audio/ogg">OGG Vorbis</option>
				<option value="audio/aac">MP4 AAC</option>
				<option value="audio/webm">Webm</option>
				<option value="application/dash+xml">DASH .mpd</option>
				<option value="application/x-mpegurl">HLS .m3u8</option>
				<option value="audio/wav">WAV</option>
				<option value="audio/flac">FLAC</option>
			</select> sound file
		</span>
		<input id="source_3" name="source_3" type="url" placeholder="https://example.com/sound.mp3" />
	</label>
	<p>
		<span class="what"></span>
		<label for="is_stream">Is a stream</label> <input id="is_stream" name="is_stream" type="checkbox" value="stream" />, see <a href="https://github.com/dascritch/cpu-audio/blob/master/INSTALL.md#special-case-for-live-streamed-media"><i>Special case for live streamed media</i> in <i>INSTALL.md</i></a>. Also check how to <a href="https://github.com/dascritch/cpu-audio/blob/master/INSTALL.md#Indicate-a-prefered-downloadable-audio-resource">indicate a prefered downloadable audio resource.</a>
	</p>
	<label for="source_vtt">
		<span>Chapter VTT text file URL</span>
		<input id="source_vtt" name="source_vtt" type="url" placeholder="https://example.com/chapters.vtt" />
	</label>
</fieldset>

<fieldset>
	<label for="meta_mode">
		<span>Mode</span>
		<select id="meta_mode" name="meta_mode">
			<option value="default">default : player with poster, timeline, playlist and chapters list</option>
			<option value="compact">compact : play/pause button and time indication</option>
			<option value="button">button : a single play/pause button only</option>
			<option value="button,compact">button,compact : unfold at play from a button to compact</option>
			<option value="button,default">button,default : unfold at play from a button to full “default” player</option>
			<option value="compact,default">compact,default : unfold at play from “compact” to full “default” player</option>
			<option value="hidden">hidden : mainly for tests purposes</option>
			<option selected value="">be implicit, as “default”</option>
		</select>
	</label>
	<label for="meta_title">
		<span>Title</span>
		<input id="meta_title" name="meta_title" type="text" value="Au carnaval avec Samba Résille (2003)" placeholder="My wonderful sound" />
	</label>
	<label for="meta_poster">
		<span>Cover image url</span>
		<input id="meta_poster" name="meta_poster" type="url" value="https://dascritch.net/vrac/.blog2/entendu/.1404-SambaResille_m.jpg" placeholder="https://example.com/cover.jpg" />
	</label>
	<label for="meta_waveform">
		<span>Waveform image URL</span>
		<input id="meta_waveform" name="meta_waveform" type="url" placeholder="https://example.com/waveform.jpg" />
	</label>
	<label for="meta_duration">
		<span>Estimated duration</span>
		<input id="meta_duration" name="meta_duration" type="text" placeholder="100 or 1:40 or 1m40s" />
	</label>
	<label for="meta_canonical">
		<span>Canonical page link</span>
		<input id="meta_canonical" name="meta_canonical" type="url" placeholder="https://example.com/page.html" />
	</label>
	<label for="meta_download">
		<span>Downloadable audio link</span>
		<input id="meta_download" name="meta_download" type="url" placeholder="https://example.com/audio.mp3" />
	</label>
	<label for="meta_twitter">
		<span>Twitter handle</span>
		<input id="meta_twitter" name="meta_twitter" type="string" pattern="@[\d\w_]+" placeholder="@cpuprogramme" />
	</label>
	
	<p>
		<span class="what">Hide</span>
		<label for="meta_hide_0" class="inline_block"><input id="meta_hide_0" name="meta_hide[]" type="checkbox" value="poster" />Poster</label>
		<label for="meta_hide_1" class="inline_block"><input id="meta_hide_1" name="meta_hide[]" type="checkbox" value="actions" />Actions</label>
		<label for="meta_hide_2" class="inline_block"><input id="meta_hide_2" name="meta_hide[]" type="checkbox" value="chapters" />Chapters</label>
		<label for="meta_hide_3" class="inline_block"><input id="meta_hide_3" name="meta_hide[]" type="checkbox" value="timeline" />Time-line</label>
		<label for="meta_hide_4" class="inline_block"><input id="meta_hide_4" name="meta_hide[]" type="checkbox" value="panels" />Panels</label>
		<label for="meta_hide_5" class="inline_block"><input id="meta_hide_5" name="meta_hide[]" type="checkbox" value="panels-title" />Panels' title</label>
		<label for="meta_hide_6" class="inline_block"><input id="meta_hide_6" name="meta_hide[]" type="checkbox" value="panels-except-play" />Panels except playing</label>
	</p>

	<p>
		<span class="what">Glow</span>
		<label for="meta_glow" class="inline_block"><input id="meta_glow" name="meta_glow" type="checkbox" value="glow" />Glow play button before first play</label>
	</p>

</fieldset>

<button type="reset">Reset values</button>
<button type="submit">See result HTML code</button>

</form>


<div class="pan" id="generated_html">
	Paste this HTML code where you want the player in your page
<pre id="code">
</pre>

<a href="#configurator_css">Go to CSS configurator</a>
</div>

<form id="configurator_css" action="#generated_css" class="pan">

<fieldset>
	<label for="css_font-family">
		<span>Font families</span>
		<input id="css_font-family" name="css_font-family" type="text" value='Lato, "Open Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif' />
	</label>
	<label for="css_line-height">
		<span>Font line height</span>
		<input id="css_line-height" name="css_line-height" type="number" step="0.01" value="1.2" />
	</label>
	<label for="css_inner-shadow">
		<span>Shadow between horizontal panels</span>
		<input id="css_inner-shadow" name="css_inner-shadow" type="text" value="inset 0px 5px 10px -5px black" />
	</label>
</fieldset>

<fieldset>
	<label>
		<span>&nbsp;</span><div>Colour</div><div>Background</div>
	</label>
	<label>
		<span>Colours except playing or in error</span>
		<input name="css_color" type="color" value="#dddddd" />
		<input name="css_background" type="color" value="#555555" />
	</label>
	<label for="css_error-background">
		<span>Colours when there is a media error</span>
		<input name="css_error-color" type="color" value="#ffff77" />
		<input name="css_error-background" type="color" value="#aa0000" />
	</label>
	<label for="css_playing-background">
		<span>Colours while playing</span>
		<input name="css_playing-color" type="color" value="#ffffff" />
		<input name="css_playing-background" type="color" value="#444444" />
	</label>
	<label for="css_playing-background">
		<span>Alternate focus colours</span>
		<input name="css_focus-color" type="color" value="#555555" />
		<input name="css_focus-background" type="color" value="#dddddd" />
	</label>
	<label for="css_popup-background">
		<span>Colours for the time pointer</span>
		<input name="css_popup-color" type="color" value="#aaaaaa" />
		<input name="css_popup-background" type="color" value="#333333" />
	</label>

	<label for="css_color-transitions">
		<span>Transition duration</span>
		<input name="css_color-transitions" type="range" value="0" min="0" max="2" step="0.1" />
		<input name="css_background-transitions" type="range" value="0" min="0" max="2" step="0.1" />
	</label>
</fieldset>

<fieldset>
	<table>
		<thead>
			<tr>
				<th scope="row">Breakpoints</th>
				<th colspan="2">wider</th>
				<th colspan="2"><input disabled name="css_breakpoint[1]" type="text" value="640px" /></th>
				<th colspan="2"><input disabled name="css_breakpoint[2]" type="text" value="480px" /></th>
				<th>smaller</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row" colspan="2">Time indicator width</th>
				<td colspan="2"><input name="css_elapse-width[0]" type="text" value="185px" /></td>
				<td colspan="2"><input name="css_elapse-width[1]" type="text" value="160px" /></td>
				<td colspan="2"><input name="css_elapse-width[2]" type="text" value="80px" /></td>
			</tr>
			<tr>
				<th scope="row" colspan="2">Font size</th>
				<td colspan="2"><input name="css_font-size[0]" type="text" value="15px" /></td>
				<td colspan="2"><input name="css_font-size[1]" type="text" value="13px" /></td>
				<td colspan="2"><input name="css_font-size[2]" type="text" value="" /></td>
			</tr>
			<tr>
				<th scope="row" colspan="2">Font small size</th>
				<td colspan="2"><input name="css_font-small-size[0]" type="text" value="12px" /></td>
				<td colspan="2"><input name="css_font-small-size[1]" type="text" value="10.4px" /></td>
				<td colspan="2"><input name="css_font-small-size[2]" type="text" value="" /></td>
			</tr>
			<tr>
				<th scope="row" colspan="2">Height and width of the square buttons</th>
				<td colspan="2"><input name="css_height[0]" type="text" value="64px" /></td>
				<td colspan="2"><input name="css_height[1]" type="text" value="32px" /></td>
				<td colspan="2"><input name="css_height[2]" type="text" value="" /></td>
			</tr>
		</tbody>
	</table>

</fieldset>

<button type="reset">Reset values</button>
<button type="submit">See result CSS code</button>

</form>


<div class="pan" id="generated_css">
	Copy and paste this CSS code into your stylesheet. Or write it :

<pre><style id="style" contenteditable>
</style></pre>
</div>

<form id="configurator_paramtag" action="#generated_paramtag" class="pan">

<fieldset>

	<p>
		Please note : Some of those parameters cannot be changed live in this page.
	</p>

</fieldset>

<fieldset>
	<legend>Basic player</legend>
	<p>
		<span class="what">playStopOthers</span>
		<label for="global_playStopOthers">
			<input type="checkbox" value="true" checked id="global_playStopOthers" name="global_playStopOthers" />
				When a <code>&lt;cpu-audio&gt;</code> starts to play, any other instances in the same page are paused. Default : activated
		</label>
	</p>
	<p>
		<span class="what">scrollTo</span>
		<label for="global_scrollTo">
			<input type="checkbox" value="true" id="global_scrollTo" name="global_scrollTo" />
				On any link to a time-stamp in the page, will scroll the viewport to display the playing interface. Default : activated.
		</label>
	</p>
	<p>
		<span class="what">Autoplay</span>
		<label for="global_autoplay">
			<input type="checkbox" value="true" id="global_autoplay" name="global_autoplay" />
				Will try to play at the start of the page if a temporal URL is given or the audio was previously exited. Default : unactivated. This may be prevented by your browser.
		</label>
	</p>
	<p>
		<span class="what">IDPrefix</span>
		<label for="global_IDPrefix">
			<input type="text" pattern="^[\w-]{2,}\-$" value="CPU-Audio-tag-" id="global_IDPrefix" name="global_IDPrefix" />
				A minimum of 2 letters (or "-" or "_"), then a final dash are recommended. Default : <code>CPU-Audio-tag-</code>.
		</label>
	</p>


</fieldset>

<fieldset>
	<legend>Interface aspect</legend>
	<p>
		<span class="what">globalCss</span>
		<label for="global_globalCss">
			<input type="checkbox" value="true" checked id="global_globalCss" name="global_globalCss" />
				Insert in the <code>&lt;head&gt;</code> of the host document a specific <code>&lt;style&gt;</code> with all needed css variables for the player. Default : activated. Beware to not activate it if any of the needed css variables are not inserted by your side.
		</label>
	</p>
</fieldset>

<fieldset>
	<legend>Playlist interactions</legend>
	<p>
		<span class="what">advanceInPlaylist</span>
		<label for="global_advanceInPlaylist">
			<input type="checkbox" value="true" checked id="global_advanceInPlaylist" name="global_advanceInPlaylist" />
				When an audio is ended in a playlist, starts immediatly the next one. Default : activated.
		</label>
	</p>
</fieldset>

<fieldset>
	<legend>Keyboard navigation</legend>
	<p>
		<span class="what">keymove</span>
		<label for="global_keymove">
			<input type="number" value="5" min="1" max="300" id="global_keymove" name="global_keymove" size="5" />
			 seconds skipped in the timeline with <kbd>←</kbd> or <kbd>→</kbd> keys. Default : 5 seconds.
		</label>
	</p>
</fieldset>

<fieldset>
	<legend>Precise navigation with fingers</legend>
	<p>
		<span class="what">alternateDelay</span>
		<label for="global_alternateDelay">
			<input type="number" value="1000" min="100" max="3000" step="100" id="global_alternateDelay" name="global_alternateDelay" size="5" />
				milliseconds of long press on time-line to switch to the handheld alternate browsing interface. Not recommended to modify. Default : 1 000 ms
		</label>
	</p>
	<p>
		<span class="what">fastFactor</span>
		<label for="global_fastFactor">
			<input type="number" value="4" min="2" max="10" id="global_fastFactor" name="global_fastFactor" size="5" />
				amplification ratio between <kbd>▸︎▸︎</kbd> and <kbd>▸︎▸︎▸︎</kbd> in handheld alternate browsing interface. Default : 4 ×
		</label>
	</p>
	<p>
		<span class="what">repeatDelay</span>
		<label for="global_repeatDelay">
			<input type="number" value="400" min="100" max="2000" step="50" id="global_repeatDelay" name="global_repeatDelay" size="5" />
				milliseconds delay before first repetition when clicking a button in handheld alternate browsing interface. Default : 400 ms
		</label>
	</p>
	<p>
		<span class="what">repeatFactor</span>
		<label for="global_repeatFactor">
			<input type="number" value="100" min="10" max="2000" step="10" id="global_repeatFactor" name="global_repeatFactor" size="5" />
				milliseconds delay before repeating when clicking a button in handheld alternate browsing interface. Default : 100 ms
		</label>
	</p>

</fieldset>

<button type="reset">Reset values</button>
<button type="submit">See result HTML code</button>

</form>

<div class="pan" id="generated_paramtag">
	Copy and paste this HTML code in the <code>&lt;head&gt;</code> before the <code>&lt;script&gt;</code> tag calling cpu-audio.js :

	<pre></pre>
	<p>
		Beware to have a strict and valid JSON object.
	</p>
</div>


<script src="./live_config.js"></script>

<style>

	#steps {
		display: flex;
		width: 100%;
	}

	#steps a {
		padding : 4px;
		border : 1px #ccc solid;
	}

	#spacer {
		flex : 1 1 auto;
	}


	fieldset > label, fieldset p {display : flex;}
	fieldset > label * {flex : 1 0 auto;}
	fieldset > label span, fieldset .what {flex : 0 0 200px;}
	fieldset > label div {text-align : center;}

	.inline_block { display : inline-block; }

	#style {display : block;}

	.pan { display :none ; }
	.pan:target { display :block ; }

	fieldset {
		border  :1px solid #ccc
	}

	table input {
		max-width : 100px;
	}

	/* need to cancel Dinky theme style for this page **/
	table {

	}

	th {
		font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 14px;
		padding : 4px;
		color : #232323;
		background : transparent;
	}

	td {
		padding : 0px;
		background : transparent;
	}

	input[type="color"] {
		min-height: 30px;
	}

</style>