Locked tracks, preview tracks
Preview stripe colors Better horizontal spacing Sticky media on horizontal layout Better responsive width for controls/tracks Better volume positioning Percentage-based scrubber values for better responsive positioning
This commit is contained in:
torcado194
parent
f1f685e7ac
commit
b4eb5a1451
7 changed files with 325 additions and 32 deletions
47
README.md
47
README.md
|
|
@ -106,6 +106,7 @@ And that's it! you can upload the files to your website, or zip them up and uplo
|
|||
|
||||
`file`
|
||||
> The name of the file in the /media folder
|
||||
> Not required if entry is set to "locked"
|
||||
|
||||
\
|
||||
`title` (optional)
|
||||
|
|
@ -121,12 +122,48 @@ And that's it! you can upload the files to your website, or zip them up and uplo
|
|||
`type` (optional)
|
||||
> The type of the media.
|
||||
> Can be either `"audio"` or `"video"`
|
||||
> Defaults to "audio"
|
||||
> Defaults to `"audio"`
|
||||
|
||||
\
|
||||
`info` (optional)
|
||||
> Extra text for this file, such as for lyrics or artist attributions. This will be optionally shown over/under the cover image, or togglable below the track.
|
||||
|
||||
\
|
||||
`locked` (optional)
|
||||
> If `true`, sets this file as "locked" preventing it from being playable.
|
||||
> Can be either `true` or `false`
|
||||
> Defaults to `false`
|
||||
> Enable this if e.g. you want to show that this file would be available in the purchased download of your album.
|
||||
> Note: the `file` field is not required if this is enabled, you shouldn't include the file in the player.
|
||||
|
||||
***preview options***
|
||||
|
||||
*a preview is a section of a full track, used if e.g. you want to include a snippet of a track that would be available in the purchased download of your album.*
|
||||
*note: it is highly recommended that the file you use for a preview track is clipped to the region you want to preview, because the file can be accessed by users. Scritch will support the file in either case, however.*
|
||||
|
||||
> e.g. `{"file": "track1.mp3", "title": "Track 1", previewStart: 12, previewEnd: 42, originalDuration: "1:20"}`
|
||||
|
||||
\
|
||||
`previewStart` (optional, required for preview)
|
||||
> The start time for the preview section of the full track.
|
||||
> Can be a number of seconds or an H:M:S string, e.g. `125.3`, `"2:05"`, `"00:21:13.5"` are all valid.
|
||||
|
||||
\
|
||||
`previewEnd` (optional, required for preview)
|
||||
> The end time for the preview section of the full track.
|
||||
> Can be a number of seconds or an H:M:S string, e.g. `125.3`, `"2:05"`, `"00:21:13.5"` are all valid.
|
||||
|
||||
\
|
||||
`originalDuration` (optional, required for preview)
|
||||
> The duration of the full (unclipped) track.
|
||||
> Can be a number of seconds or an H:M:S string, e.g. `125.3`, `"2:05"`, `"00:21:13.5"` are all valid.
|
||||
|
||||
\
|
||||
`previewFade` (optional)
|
||||
> If `true`, the player will automatically fade the audio at the start and end of the preview section.
|
||||
> Can be either `true` or `false`
|
||||
> Defaults to `true`
|
||||
|
||||
-----
|
||||
|
||||
**theme options**
|
||||
|
|
@ -166,6 +203,14 @@ And that's it! you can upload the files to your website, or zip them up and uplo
|
|||
`primaryAltTextColor`
|
||||
> Color of e.g. the track numbers and duration, and the track info button
|
||||
|
||||
\
|
||||
`previewStripeColor1`
|
||||
> First color of the striped bar on a preview track.
|
||||
|
||||
\
|
||||
`previewStripeColor2`
|
||||
> Second color of the striped bar on a preview track.
|
||||
|
||||
\
|
||||
`linkColor`
|
||||
> Color of links in text
|
||||
|
|
|
|||
248
index.html
248
index.html
|
|
@ -17,7 +17,9 @@
|
|||
--secondaryColor: #000000;
|
||||
--highlightColor: rgba(131, 131, 131, 0.3);
|
||||
--primaryTextColor: #ffffff;
|
||||
--primaryAltTextColor: #838383;
|
||||
--primaryAltTextColor: hsl(0, 0%, 51%);
|
||||
--previewStripeColor1: #3f3f3f;
|
||||
--previewStripeColor2: #2c2c2c;
|
||||
--linkColor: #838383;
|
||||
--font: sans-serif;
|
||||
}
|
||||
|
|
@ -54,7 +56,7 @@
|
|||
#mainContainer {
|
||||
position: relative;
|
||||
display: grid;
|
||||
justify-content: space-around;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
max-width: 960px;
|
||||
left: 0;
|
||||
|
|
@ -112,6 +114,8 @@
|
|||
#mainContainer #mediaColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -122,11 +126,16 @@
|
|||
grid-row: 1/3;
|
||||
grid-column: 2;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
position: sticky;
|
||||
top: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#mainContainer.vertical #mediaColumn {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
#mainContainer.title-span #mediaColumn {
|
||||
grid-row: 2/3;
|
||||
|
|
@ -303,6 +312,7 @@
|
|||
flex-wrap: wrap;
|
||||
flex: 1 0;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#controls .title {
|
||||
|
|
@ -319,6 +329,7 @@
|
|||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
user-select: none;
|
||||
flex-basis: 8px;
|
||||
}
|
||||
|
||||
#controls .riser {
|
||||
|
|
@ -330,6 +341,7 @@
|
|||
align-self: end;
|
||||
color: var(--primaryAltTextColor);
|
||||
user-select: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#controls #scrubberTrackContainer {
|
||||
|
|
@ -341,6 +353,26 @@
|
|||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
#controls #scrubberTrackFull {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: repeating-linear-gradient( 135deg, var(--previewStripeColor1), var(--previewStripeColor1) 8px, var(--previewStripeColor2) 8px, var(--previewStripeColor2) 16px);
|
||||
border-radius: 12px;
|
||||
}
|
||||
#controls #scrubberTrackContainer #scrubberTrackPreview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#controls #scrubberTrackContainer.preview #scrubberTrackPreview {
|
||||
border: 2px solid var(--backgroundColor);
|
||||
box-sizing: content-box;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
margin-right: -4px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#controls #scrubberTrack {
|
||||
background-color: var(--primaryAltColor);
|
||||
overflow: hidden;
|
||||
|
|
@ -388,6 +420,9 @@
|
|||
align-items: center;
|
||||
user-select: none;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#controls #volumeContainer #volumeTrackContainer {
|
||||
|
|
@ -458,7 +493,7 @@
|
|||
border-radius: 6px;
|
||||
}
|
||||
.track.locked {
|
||||
opacity: 0.35;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.track.active:before {
|
||||
content: '';
|
||||
|
|
@ -573,6 +608,7 @@
|
|||
color: var(--primaryAltTextColor);
|
||||
font-size: 14px;
|
||||
flex: 0 0 30px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.track .spacer {
|
||||
flex: 1 1;
|
||||
|
|
@ -667,10 +703,14 @@
|
|||
<div class="title">____</div>
|
||||
<div class="time"></div>
|
||||
<button id="scrubberTrackContainer">
|
||||
<div id="scrubberTrackFull">
|
||||
<div id="scrubberTrackPreview">
|
||||
<div id="scrubberTrack">
|
||||
<div id="scrubberFill"></div>
|
||||
</div>
|
||||
<div id="scrubber"></div>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button id="prevTrack" class="icon-previous"></button>
|
||||
<button id="nextTrack" class="icon-next"></button>
|
||||
|
|
@ -700,6 +740,7 @@
|
|||
let bigButtonEl = document.getElementById('bigButton');
|
||||
let controlsEl = document.getElementById('controls');
|
||||
let scrubberTrackContainerEl = document.getElementById('scrubberTrackContainer');
|
||||
let scrubberTrackPreviewEl = document.getElementById('scrubberTrackPreview');
|
||||
let scrubberTrackEl = document.getElementById('scrubberTrack');
|
||||
let scrubberFillEl = document.getElementById('scrubberFill');
|
||||
let scrubberEl = document.getElementById('scrubber');
|
||||
|
|
@ -751,6 +792,8 @@
|
|||
if(theme.secondaryColor) rootEl.style.setProperty('--secondaryColor', theme.secondaryColor);
|
||||
if(theme.highlightColor) rootEl.style.setProperty('--highlightColor', theme.highlightColor);
|
||||
if(theme.backgroundColor) rootEl.style.setProperty('--backgroundColor', theme.backgroundColor);
|
||||
if(theme.previewStripeColor1) rootEl.style.setProperty('--previewStripeColor1', theme.previewStripeColor1);
|
||||
if(theme.previewStripeColor2) rootEl.style.setProperty('--previewStripeColor2', theme.previewStripeColor2);
|
||||
if(theme.linkColor) rootEl.style.setProperty('--linkColor', theme.linkColor);
|
||||
if(theme.layoutStyle){
|
||||
document.getElementById('mainContainer').classList.remove('vertical', 'horizontal');
|
||||
|
|
@ -764,7 +807,7 @@
|
|||
document.getElementById('mainContainer').classList.remove('title-none', 'title-span');
|
||||
document.getElementById('mainContainer').classList.add('title-' + theme.titleStyle);
|
||||
}
|
||||
if(theme.contentWidth) document.getElementById('contentContainer').style.width = theme.contentWidth + 'px';
|
||||
if(theme.contentWidth) document.getElementById('contentContainer').style.maxWidth = theme.contentWidth + 'px';
|
||||
if(theme.nativePlayer){
|
||||
document.getElementById('audio').classList.add('native');
|
||||
mediaVideoEl.setAttribute('controls', '');
|
||||
|
|
@ -849,6 +892,8 @@
|
|||
updateDescription(description);
|
||||
updateTheme(theme);
|
||||
|
||||
updateTrackPreview();
|
||||
|
||||
document.title = titleEl.textContent;
|
||||
|
||||
volume = parseFloat(localStorageGet('volume'));
|
||||
|
|
@ -916,6 +961,9 @@
|
|||
infoContainerEl.classList.toggle('active');
|
||||
});
|
||||
}
|
||||
if(!entry.previewFade && entry.previewFade !== false){
|
||||
entry.previewFade = true; //default true
|
||||
}
|
||||
if(!entry.locked){
|
||||
trackEl.querySelector('button').onclick = () => {
|
||||
loadedFirst = true;
|
||||
|
|
@ -928,11 +976,51 @@
|
|||
} else {
|
||||
loaderEl = document.createElement('audio');
|
||||
}
|
||||
if(entry.previewStart || entry.previewEnd){
|
||||
entry.preview = true;
|
||||
}
|
||||
let needsPreviewEnd = false;
|
||||
if(!entry.previewEnd){
|
||||
needsPreviewEnd = true;
|
||||
}
|
||||
entry.originalDuration = (entry.originalDuration && fromHMS(entry.originalDuration)) || 1;
|
||||
entry.previewStart = (entry.previewStart && fromHMS(entry.previewStart)) || 0;
|
||||
entry.previewEnd = (entry.previewEnd && fromHMS(entry.previewEnd)) || entry.originalDuration;
|
||||
entry.previewDuration = (entry.previewEnd - entry.previewStart);
|
||||
loaderEl.addEventListener('loadedmetadata', e => {
|
||||
entry.duration = e.target.duration;
|
||||
trackEl.querySelector('.duration').textContent = toHMS(entry.duration);
|
||||
entry.needsDuration = false;
|
||||
entry.previewStart = entry.previewStart || 0;
|
||||
if(needsPreviewEnd){
|
||||
entry.previewEnd = entry.duration;
|
||||
}
|
||||
entry.originalDuration = Math.max(entry.originalDuration, entry.duration, entry.previewEnd);
|
||||
entry.previewDuration = (entry.previewEnd - entry.previewStart);
|
||||
|
||||
//make assumptions about the audio start points
|
||||
if(entry.duration < entry.previewDuration){ //smaller than given preview duration
|
||||
//left align to preview
|
||||
entry.audioStart = entry.previewStart;
|
||||
} else if(entry.duration < entry.originalDuration - entry.previewStart){ //else, smaller than region between preview start and original end
|
||||
//left align to preview
|
||||
entry.audioStart = entry.previewStart;
|
||||
} else if(entry.duration < entry.originalDuration){ //else, smaller than original duration
|
||||
//right align to original
|
||||
entry.audioStart = entry.originalDuration - entry.duration;
|
||||
} else { //larger than original duration
|
||||
//left align to original
|
||||
entry.audioStart = 0;
|
||||
}
|
||||
entry.audioEnd = entry.audioStart + entry.duration;
|
||||
|
||||
let durationText = toHMS(entry.duration);
|
||||
if(entry.preview){
|
||||
durationText += ' (preview)';
|
||||
}
|
||||
trackEl.querySelector('.duration').textContent = durationText;
|
||||
if(entry === currentEntry){
|
||||
updateScrubPosition(0);
|
||||
updateTrackPreview();
|
||||
updateScrubPosition(entry.previewStart / entry.originalDuration);
|
||||
}
|
||||
});
|
||||
loaderEl.addEventListener('error', e => {
|
||||
|
|
@ -947,15 +1035,14 @@
|
|||
});
|
||||
loaderEl.volume = 0;
|
||||
loaderEl.src = entry.file;
|
||||
entry.started = false;
|
||||
entry.loading = true;
|
||||
}
|
||||
});
|
||||
loadEntry(media[featureIndex]);
|
||||
loadEntry(media[mod(featureIndex, media.length)]);
|
||||
}
|
||||
|
||||
function loadCover(cover){
|
||||
// let el = document.createElement('img');
|
||||
// mediaImageEl.appendChild(el);
|
||||
let src = cover;
|
||||
if(!/:\/\//.test(src)){ //if not a url
|
||||
src = mediaDir + src;
|
||||
|
|
@ -966,7 +1053,15 @@
|
|||
|
||||
playerEl.addEventListener('canplay', e => {
|
||||
removeLoading(currentEntry);
|
||||
if(autoPlay){
|
||||
if(currentEntry.needsDuration){
|
||||
currentEntry.duration = playerEl.duration;
|
||||
currentEntry.needsDuration = false;
|
||||
}
|
||||
if(autoPlay && !currentEntry.started){
|
||||
currentEntry.started = true;
|
||||
if(!currentEntry.needsDuration){
|
||||
playerEl.currentTime = currentEntry.previewStart - currentEntry.audioStart;
|
||||
}
|
||||
playerEl.play();
|
||||
}
|
||||
if(!loadedFirst){
|
||||
|
|
@ -977,7 +1072,11 @@
|
|||
setLoading(currentEntry, 0);
|
||||
});
|
||||
playerEl.addEventListener('play', e => {
|
||||
if(currentEntry.preview && playerEl.currentTime < currentEntry.previewStart - currentEntry.audioStart){
|
||||
playerEl.currentTime = currentEntry.previewStart - currentEntry.audioStart;
|
||||
}
|
||||
bigButtonEl.classList.add('pause');
|
||||
currentEntry.started = true;
|
||||
currentEntry.trackEl.querySelector('button').classList.add('pause');
|
||||
if(currentEntry.type === 'video'){
|
||||
mediaVideoEl.play();
|
||||
|
|
@ -1011,9 +1110,21 @@
|
|||
});
|
||||
playerEl.addEventListener('timeupdate', e => {
|
||||
if(!scrubberDragged){
|
||||
let t = e.target.currentTime / currentEntry.duration;
|
||||
if(currentEntry.duration && !currentEntry.needsDuration){
|
||||
if(currentEntry.started){
|
||||
let time = e.target.currentTime;
|
||||
if(time > currentEntry.previewEnd - currentEntry.audioStart){
|
||||
nextTrack(false);
|
||||
} else {
|
||||
let t = time / currentEntry.duration;
|
||||
updatePreviewVolume(t);
|
||||
updateScrubPosition(t);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
playerEl.addEventListener('ended', e => {
|
||||
if(!scrubberDragged){
|
||||
|
|
@ -1108,6 +1219,7 @@
|
|||
let scrubberDragged = false;
|
||||
scrubberTrackContainerEl.addEventListener('pointerdown', e => {
|
||||
scrubberDragged = true;
|
||||
currentEntry.started = true;
|
||||
scrub(e.clientX);
|
||||
});
|
||||
document.addEventListener('pointerup', e => {
|
||||
|
|
@ -1135,15 +1247,63 @@
|
|||
prevTrack();
|
||||
});
|
||||
|
||||
function updateTrackPreview(){
|
||||
if(currentEntry.needsDuration){
|
||||
return;
|
||||
}
|
||||
//reset to prevent compounding width calculation issues
|
||||
scrubberTrackPreviewEl.style.removeProperty('margin-left');
|
||||
scrubberTrackPreviewEl.style.removeProperty('width');
|
||||
scrubberEl.style.removeProperty('left');
|
||||
scrubberFillEl.style.removeProperty('width');
|
||||
if(currentEntry.preview){
|
||||
let fullWidth = scrubberEl.parentElement.parentElement.clientWidth;
|
||||
scrubberTrackPreviewEl.style.marginLeft = ((currentEntry.previewStart) / currentEntry.originalDuration) * 100 + '%';
|
||||
scrubberTrackPreviewEl.style.width = ((currentEntry.previewEnd - currentEntry.previewStart) / currentEntry.originalDuration) * 100 + '%';
|
||||
}
|
||||
}
|
||||
|
||||
function updatePreviewVolume(t){
|
||||
if(currentEntry.preview && currentEntry.previewFade && !muted){
|
||||
if(currentEntry.needsDuration){
|
||||
playEntry.volume = 0;
|
||||
} else {
|
||||
//rebase t to full (assumed) duration
|
||||
t = currentEntry.audioStart + (t * currentEntry.duration);
|
||||
//clip to preview
|
||||
t = Math.max(currentEntry.previewStart, Math.min(currentEntry.previewEnd, t));
|
||||
let inTime = t - currentEntry.previewStart;
|
||||
let outTime = currentEntry.previewEnd - t;
|
||||
playerEl.volume = volume * Math.max(0, Math.min(1, inTime/1, outTime/1)); //1 second fade in/out
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//t: 0-1 value in relation to the actual audio start/end
|
||||
function updateScrubPosition(t){
|
||||
scrubPosition = t;
|
||||
//rebase t to full (assumed) duration
|
||||
t = currentEntry.audioStart + (t * currentEntry.duration);
|
||||
//clip to preview
|
||||
t = Math.max(currentEntry.previewStart, Math.min(currentEntry.previewEnd, t));
|
||||
scrubPosition = (t - currentEntry.audioStart) / currentEntry.duration;
|
||||
let time = t;
|
||||
//rebase
|
||||
t = t / currentEntry.originalDuration;
|
||||
//relative to preview region
|
||||
let scrubberT = ((t * currentEntry.originalDuration) - currentEntry.previewStart) / currentEntry.previewDuration;
|
||||
let scrubberWidth = scrubberEl.clientWidth;
|
||||
let trackWidth = scrubberEl.parentElement.clientWidth;
|
||||
//scrubberEl.style.left = `calc(${(t * 100).toFixed(0)}% - 8px)`;
|
||||
scrubberEl.style.left = (scrubPosition * (trackWidth - scrubberWidth)) + 'px';
|
||||
scrubberFillEl.style.width = (scrubPosition * trackWidth) + 'px';
|
||||
let time = scrubPosition * currentEntry.duration;
|
||||
controlsEl.querySelector('.time').textContent = `${toHMS(time)} / ${currentEntry.duration ? toHMS(currentEntry.duration) : "0:00"}`;
|
||||
|
||||
scrubberEl.style.left = ((scrubberT * (trackWidth - scrubberWidth)) / trackWidth) * 100 + '%';
|
||||
scrubberFillEl.style.width = (scrubberT) * 100 + '%';
|
||||
|
||||
//let time = timePosition * currentEntry.duration;
|
||||
let timeText = '';
|
||||
if(currentEntry.preview){
|
||||
timeText += '(preview)<br/>';
|
||||
}
|
||||
timeText += `${toHMS(time)} / ${currentEntry.originalDuration ? toHMS(currentEntry.originalDuration) : "0:00"}`
|
||||
controlsEl.querySelector('.time').innerHTML = timeText;
|
||||
}
|
||||
|
||||
function scrub(x){
|
||||
|
|
@ -1153,6 +1313,10 @@
|
|||
let scrubberWidth = scrubberEl.clientWidth;
|
||||
let trackWidth = scrubberEl.parentElement.clientWidth;
|
||||
let t = Math.max(0, Math.min(1, (x - scrubberWidth/2) / (trackWidth - scrubberWidth)));
|
||||
if(currentEntry.preview){
|
||||
//rebase t from preview to audio start/end
|
||||
t = (t * currentEntry.previewDuration + (currentEntry.previewStart - currentEntry.audioStart)) / currentEntry.duration;
|
||||
}
|
||||
updateScrubPosition(t);
|
||||
}
|
||||
}
|
||||
|
|
@ -1189,8 +1353,8 @@
|
|||
loadEntry(entry);
|
||||
}
|
||||
function prevTrack(){
|
||||
if(playerEl.currentTime > 5){
|
||||
playerEl.currentTime = 0;
|
||||
if(playerEl.currentTime > (currentEntry.previewStart - currentEntry.audioStart) + 5){
|
||||
playerEl.currentTime = (currentEntry.previewStart - currentEntry.audioStart);
|
||||
} else {
|
||||
let idx = media.indexOf(currentEntry)-1;
|
||||
let entry = media[mod(idx, media.length)];
|
||||
|
|
@ -1244,7 +1408,15 @@
|
|||
});
|
||||
currentEntry = entry;
|
||||
if(!currentEntry.duration){
|
||||
currentEntry.duration = 0.01;
|
||||
currentEntry.duration = 999;
|
||||
currentEntry.needsDuration = true;
|
||||
}
|
||||
updateTrackPreview();
|
||||
if(entry.preview){
|
||||
scrubberTrackContainerEl.classList.add('preview');
|
||||
updatePreviewVolume(0);
|
||||
} else {
|
||||
scrubberTrackContainerEl.classList.remove('preview');
|
||||
}
|
||||
Array.from(mediaContainerEl.children).forEach(el => {
|
||||
el.classList.remove('active');
|
||||
|
|
@ -1271,6 +1443,7 @@
|
|||
mediaVideoEl.load();
|
||||
}
|
||||
playerEl.src = entry.file;
|
||||
entry.started = false;
|
||||
setLoading(currentEntry);
|
||||
entry.trackEl.classList.add('active');
|
||||
controlsEl.querySelector('.title').innerHTML = entry.title;
|
||||
|
|
@ -1301,7 +1474,7 @@
|
|||
|
||||
|
||||
function toHMS(secs){
|
||||
let sec_num = parseInt(secs, 10);
|
||||
let sec_num = Math.max(0, Math.round(secs)); //flooring is more correct, but rounding gives nicer results due to playback event buffering
|
||||
let hours = Math.floor(sec_num / 3600);
|
||||
let minutes = Math.floor(sec_num / 60) % 60;
|
||||
let seconds = sec_num % 60;
|
||||
|
|
@ -1312,6 +1485,37 @@
|
|||
.join(":")
|
||||
}
|
||||
|
||||
function fromHMS(hms){
|
||||
if(!hms){
|
||||
return 0;
|
||||
}
|
||||
let groups = (''+hms).split(':');
|
||||
if(groups.length < 1){
|
||||
return 0;
|
||||
}
|
||||
for(let i = 0; i < groups.length; i++){
|
||||
if(groups[i] === ''){
|
||||
groups[i] = '0';
|
||||
continue;
|
||||
}
|
||||
if(isNaN(groups[i])){
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
let seconds = 0;
|
||||
let minutes = 0;
|
||||
let hours = 0;
|
||||
seconds = parseFloat(groups[groups.length-1]);
|
||||
if(groups.length >= 2){
|
||||
minutes = parseFloat(groups[groups.length-2]);
|
||||
}
|
||||
if(groups.length >= 3){
|
||||
hours = parseFloat(groups[groups.length-3]);
|
||||
}
|
||||
|
||||
return (((hours * 60) + minutes) * 60) + seconds;
|
||||
}
|
||||
|
||||
function mod(x, n){
|
||||
return (((x % n) + n) % n);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@font-face {
|
||||
font-family: 'icons';
|
||||
src: url('fonts/icons.eot?qqpgvs');
|
||||
src: url('fonts/icons.eot?qqpgvs#iefix') format('embedded-opentype'),
|
||||
url('fonts/icons.ttf?qqpgvs') format('truetype'),
|
||||
url('fonts/icons.woff?qqpgvs') format('woff'),
|
||||
url('fonts/icons.svg?qqpgvs#icons') format('svg');
|
||||
src: url('fonts/icons.eot?llsbwi');
|
||||
src: url('fonts/icons.eot?llsbwi#iefix') format('embedded-opentype'),
|
||||
url('fonts/icons.ttf?llsbwi') format('truetype'),
|
||||
url('fonts/icons.woff?llsbwi') format('woff'),
|
||||
url('fonts/icons.svg?llsbwi#icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
|
|
@ -26,6 +26,39 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-duration-preview:before {
|
||||
content: "\1f55b";
|
||||
}
|
||||
.icon-duration:before {
|
||||
content: "\1f553";
|
||||
}
|
||||
.icon-duration-dot:before {
|
||||
content: "\23f2";
|
||||
}
|
||||
.icon-end:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-start:before {
|
||||
content: "\23f4";
|
||||
}
|
||||
.icon-cut:before {
|
||||
content: "\2700";
|
||||
}
|
||||
.icon-marker-help:before {
|
||||
content: "\2753";
|
||||
}
|
||||
.icon-marker-info:before {
|
||||
content: "\1f6c8";
|
||||
}
|
||||
.icon-marker-warning:before {
|
||||
content: "\2757";
|
||||
}
|
||||
.icon-lock-file:before {
|
||||
content: "\1f513";
|
||||
}
|
||||
.icon-lock:before {
|
||||
content: "\1f512";
|
||||
}
|
||||
.icon-config:before {
|
||||
content: "\1f4c3";
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -15,6 +15,8 @@
|
|||
<glyph unicode="⋯" glyph-name="dots" d="M614.4 409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM307.2 409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM921.6 409.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4z" />
|
||||
<glyph unicode="⏭" glyph-name="next" d="M102.4 102.4v614.4l358.4-307.2-358.4-307.2zM460.8 102.4v614.4l358.4-307.2-358.4-307.2zM819.2 716.8h102.4v-614.4h-102.4v614.4z" />
|
||||
<glyph unicode="⏮" glyph-name="previous" d="M921.6 102.4v614.4l-358.4-307.2 358.4-307.2zM563.2 102.4v614.4l-358.4-307.2 358.4-307.2zM204.8 716.8h-102.4v-614.4h102.4v614.4z" />
|
||||
<glyph unicode="⏲" glyph-name="duration-dot" d="M307.2 665.6c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4zM214.545 486.661c-3.227-0.173-6.476-0.261-9.745-0.261-32.752 0-63.452 8.786-89.871 24.131-8.182-32.286-12.529-66.101-12.529-100.931 0-226.217 183.384-409.6 409.6-409.6s409.6 183.383 409.6 409.6c0 226.216-183.383 409.6-409.6 409.6-61.002 0-118.888-13.335-170.905-37.25 22.121-25.889 36.996-58.157 41.482-93.663 39.332 18.297 83.184 28.512 129.422 28.512 169.661 0 307.2-137.538 307.2-307.2s-137.539-307.2-307.2-307.2c-169.662 0-307.2 137.539-307.2 307.2 0 26.613 3.384 52.435 9.745 77.061zM512 665.6c28.278 0 51.2-22.923 51.2-51.2v-183.592l87.404-87.404c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-102.401 102.4c-9.265 9.267-14.996 22.067-14.996 36.204v204.8c0 28.277 22.923 51.2 51.2 51.2z" />
|
||||
<glyph unicode="⏴" glyph-name="start" d="M307.2 716.8c28.277 0 51.2-22.923 51.2-51.2v-42.666c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2v42.666c0 28.277 22.923 51.2 51.2 51.2zM307.2 503.466c28.277 0 51.2-22.923 51.2-51.2v-85.331c0-28.278-22.923-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v85.331c0 28.277 22.923 51.2 51.2 51.2zM307.2 247.465c28.277 0 51.2-22.922 51.2-51.2v-42.665c0-28.278-22.923-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v42.665c0 28.278 22.923 51.2 51.2 51.2zM753.004 650.604c19.994-19.995 19.994-52.413 0-72.408l-168.596-168.596 168.596-168.596c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-204.801 204.8c-19.995 19.994-19.995 52.412 0 72.408l204.801 204.8c19.994 19.995 52.413 19.995 72.407 0z" />
|
||||
<glyph unicode="⏸" glyph-name="pause" d="M256 716.8h204.8v-614.4h-204.8v614.4zM563.2 716.8h204.8v-614.4h-204.8v614.4z" />
|
||||
<glyph unicode="ⓧ" glyph-name="error" d="M512 0c226.217 0 409.6 183.383 409.6 409.6s-183.383 409.6-409.6 409.6c-226.216 0-409.6-183.384-409.6-409.6s183.384-409.6 409.6-409.6zM322.196 599.404c19.995 19.995 52.413 19.995 72.408 0l117.396-117.396 117.396 117.396c19.994 19.995 52.413 19.995 72.407 0s19.994-52.413 0-72.408l-117.396-117.396 117.396-117.396c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-117.396 117.396-117.396-117.396c-19.995-19.994-52.413-19.994-72.408 0s-19.995 52.413 0 72.407l117.396 117.396-117.396 117.396c-19.995 19.995-19.995 52.413 0 72.408z" />
|
||||
<glyph unicode="▶" glyph-name="play" d="M256 102.4v614.4l512-307.2-512-307.2z" />
|
||||
|
|
@ -24,8 +26,12 @@
|
|||
<glyph unicode="☰" glyph-name="grab" d="M102.4 614.4v102.4h819.2v-102.4h-819.2zM102.4 358.4v102.4h819.2v-102.4h-819.2zM102.4 102.4v102.4h819.2v-102.4h-819.2z" />
|
||||
<glyph unicode="♫" glyph-name="audio" d="M307.2 640l460.8 128v-486.4c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128 8.765 0 17.326-0.881 25.6-2.56v156.16l-256-76.8v-307.2c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128 8.767 0 17.328-0.881 25.6-2.56v335.36z" />
|
||||
<glyph unicode="⚠" glyph-name="warning" d="M556.626 791.067c-19.574 34.798-69.677 34.798-89.251 0l-373.256-663.564c-19.198-34.13 5.466-76.303 44.624-76.303h746.509c39.163 0 63.826 42.173 44.626 76.303l-373.253 663.564zM512 614.4c28.278 0 51.2-22.923 51.2-51.2v-204.8c0-28.278-22.922-51.2-51.2-51.2s-51.2 22.922-51.2 51.2v204.8c0 28.277 22.923 51.2 51.2 51.2zM563.2 204.8c0-28.278-22.922-51.2-51.2-51.2s-51.2 22.922-51.2 51.2c0 28.278 22.923 51.2 51.2 51.2s51.2-22.922 51.2-51.2z" />
|
||||
<glyph unicode="✀" glyph-name="cut" d="M566.308 282.885l216.689-216.689c19.994-19.994 52.413-19.994 72.407 0s19.994 52.413 0 72.407l-216.689 216.689-72.407-72.407zM281.6 716.8c-42.416 0-76.8-34.384-76.8-76.8s34.384-76.8 76.8-76.8c42.416 0 76.8 34.384 76.8 76.8s-34.384 76.8-76.8 76.8zM102.4 640c0 98.97 80.23 179.2 179.2 179.2s179.2-80.23 179.2-179.2c0-30.861-7.801-59.9-21.539-85.253l72.739-72.739 270.996 270.996c19.994 19.995 52.413 19.995 72.407 0s19.994-52.413 0-72.408l-416.143-416.143c13.738-25.354 21.539-54.39 21.539-85.253 0-98.97-80.23-179.2-179.2-179.2s-179.2 80.23-179.2 179.2c0 98.97 80.23 179.2 179.2 179.2 30.861 0 59.9-7.803 85.253-21.54l72.739 72.74-72.739 72.739c-25.353-13.738-54.392-21.539-85.253-21.539-98.97 0-179.2 80.23-179.2 179.2zM281.6 256c-42.416 0-76.8-34.386-76.8-76.8s34.384-76.8 76.8-76.8c42.416 0 76.8 34.386 76.8 76.8s-34.384 76.8-76.8 76.8z" />
|
||||
<glyph unicode="❓" glyph-name="marker-help" d="M563.2 204.8c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 563.2c-28.277 0-51.2-22.923-51.2-51.2s-22.923-51.2-51.2-51.2c-28.277 0-51.2 22.923-51.2 51.2 0 84.831 68.769 153.6 153.6 153.6 84.833 0 153.6-68.769 153.6-153.6 0-58.214-32.404-108.785-79.913-134.794-8.919-4.884-15.647-10.184-19.574-14.766-2.038-2.381-2.719-3.799-2.913-4.352v-16.584c0-28.278-22.922-51.2-51.2-51.2-28.277 0-51.2 22.922-51.2 51.2v16.896c0 29.716 12.942 53.629 27.583 70.702 14.419 16.813 32.244 29.23 48.131 37.926 16.010 8.766 26.685 25.659 26.685 44.972 0 28.277-22.922 51.2-51.2 51.2zM563.128 357.811c-0.005 0 0.005 0.072 0.051 0.21-0.020-0.138-0.041-0.205-0.051-0.21z" />
|
||||
<glyph unicode="❗" glyph-name="marker-warning" d="M563.2 256c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 614.4c28.278 0 51.2-22.923 51.2-51.2v-170.496c0-28.278-22.922-51.2-51.2-51.2-28.277 0-51.2 22.922-51.2 51.2v170.496c0 28.277 22.923 51.2 51.2 51.2z" />
|
||||
<glyph unicode="⤓" glyph-name="pull" d="M512 819.2c28.278 0 51.2-22.923 51.2-51.2v-388.393l117.396 117.397c19.994 19.995 52.413 19.995 72.407 0s19.994-52.413 0-72.408l-204.8-204.799c-19.994-19.994-52.412-19.994-72.408 0l-204.8 204.799c-19.995 19.995-19.995 52.413 0 72.408s52.413 19.995 72.408 0l117.396-117.397v388.393c0 28.277 22.923 51.2 51.2 51.2zM563.2 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM358.4 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2zM768 51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2z" />
|
||||
<glyph unicode="⬇" glyph-name="drop-big" d="M512 25.6c-226.217 0-409.6 183.383-409.6 409.6s183.383 409.6 409.6 409.6c226.217 0 409.6-183.383 409.6-409.6s-183.383-409.6-409.6-409.6zM563.2 665.6c0 28.277-22.922 51.2-51.2 51.2s-51.2-22.923-51.2-51.2v-337.193l-142.996 142.996c-19.994 19.996-52.413 19.996-72.407 0-19.995-19.994-19.995-52.413 0-72.407l230.4-230.4c19.994-19.996 52.413-19.996 72.407 0l230.4 230.4c19.996 19.994 19.996 52.413 0 72.407-19.994 19.996-52.413 19.996-72.407 0l-142.996-142.996v337.193z" />
|
||||
<glyph unicode="" glyph-name="end" d="M716.8 716.8c-28.278 0-51.2-22.923-51.2-51.2v-42.666c0-28.277 22.922-51.2 51.2-51.2s51.2 22.923 51.2 51.2v42.666c0 28.277-22.922 51.2-51.2 51.2zM716.8 503.466c-28.278 0-51.2-22.923-51.2-51.2v-85.331c0-28.278 22.922-51.2 51.2-51.2s51.2 22.922 51.2 51.2v85.331c0 28.277-22.922 51.2-51.2 51.2zM716.8 247.465c-28.278 0-51.2-22.922-51.2-51.2v-42.665c0-28.278 22.922-51.2 51.2-51.2s51.2 22.922 51.2 51.2v42.665c0 28.278-22.922 51.2-51.2 51.2zM270.996 650.604c-19.995-19.995-19.995-52.413 0-72.408l168.596-168.596-168.596-168.596c-19.995-19.994-19.995-52.413 0-72.407s52.413-19.994 72.408 0l204.799 204.8c19.994 19.994 19.994 52.412 0 72.408l-204.799 204.8c-19.995 19.995-52.413 19.995-72.408 0z" />
|
||||
<glyph unicode="🎼" glyph-name="lyrics" d="M819.2 870.4c56.556 0 102.4-45.846 102.4-102.4v-97.891l-102.4-30.72v128.611h-614.4v-716.8h206.206c4.157-37.601 17.363-72.479 37.392-102.4h-243.598c-56.554 0-102.4 45.844-102.4 102.4v716.8c0 56.554 45.846 102.4 102.4 102.4h614.4zM768 332.8v-256c0-70.692-57.308-128-128-128s-128 57.308-128 128c0 70.692 57.308 128 128 128 8.765 0 17.326-0.881 25.6-2.56v284.16l256 76.8v-179.2l-153.6-51.2zM307.2 614.4c0 28.277 22.923 51.2 51.2 51.2h256c28.278 0 51.2-22.923 51.2-51.2s-22.922-51.2-51.2-51.2h-256c-28.277 0-51.2 22.923-51.2 51.2zM307.2 409.6c0 28.277 22.923 51.2 51.2 51.2h153.6c28.278 0 51.2-22.923 51.2-51.2 0-28.278-22.922-51.2-51.2-51.2h-153.6c-28.277 0-51.2 22.922-51.2 51.2zM307.2 204.8c0 28.278 22.923 51.2 51.2 51.2h51.2c28.277 0 51.2-22.922 51.2-51.2s-22.923-51.2-51.2-51.2h-51.2c-28.277 0-51.2 22.922-51.2 51.2z" />
|
||||
<glyph unicode="💽" glyph-name="cover" d="M548.204 714.227c59.986 59.984 157.24 59.984 217.221 0 59.986-59.984 59.986-157.239 0-217.223l-36.204-36.204 36.204-36.204c59.986-59.985 59.986-157.24 0-217.226-59.981-59.981-157.235-59.981-217.221 0l-36.204 36.209-36.204-36.204c-59.984-59.986-157.239-59.986-217.223 0-59.984 59.981-59.984 157.235 0 217.221l36.204 36.204-36.204 36.204c-59.984 59.984-59.984 157.239 0 217.223s157.239 59.984 217.224 0l36.203-36.204 36.204 36.204zM512 358.4c56.556 0 102.4 45.844 102.4 102.4 0 56.554-45.844 102.4-102.4 102.4-56.554 0-102.4-45.846-102.4-102.4 0-56.556 45.846-102.4 102.4-102.4zM102.4 921.6c-56.554 0-102.4-45.846-102.4-102.4v-819.2c0-56.556 45.846-102.4 102.4-102.4h819.2c56.556 0 102.4 45.844 102.4 102.4v819.2c0 56.554-45.844 102.4-102.4 102.4h-819.2zM102.4 819.2h819.2v-716.8h-819.2v716.8z" />
|
||||
<glyph unicode="📃" glyph-name="config" d="M614.4 819.2h-358.4c-28.277 0-51.2-22.923-51.2-51.2v-665.6c0-28.278 22.923-51.2 51.2-51.2h512c28.278 0 51.2 22.922 51.2 51.2v512l-204.8 204.8zM640 665.6c14.136 0 25.6-11.462 25.6-25.6s-11.464-25.6-25.6-25.6h-132.37c-10.543-29.829-38.991-51.2-72.43-51.2s-61.887 21.371-72.43 51.2h-81.17c-14.138 0-25.6 11.462-25.6 25.6s11.462 25.6 25.6 25.6h81.17c10.543 29.829 38.991 51.2 72.43 51.2s61.887-21.371 72.43-51.2h132.37zM256 435.2c0 14.138 11.462 25.6 25.6 25.6h234.772c10.542 29.829 38.989 51.2 72.428 51.2s61.885-21.371 72.428-51.2h81.172c14.136 0 25.6-11.462 25.6-25.6s-11.464-25.6-25.6-25.6h-81.172c-10.542-29.829-38.989-51.2-72.428-51.2s-61.885 21.371-72.428 51.2h-234.772c-14.138 0-25.6 11.462-25.6 25.6zM256 230.4c0 14.136 11.462 25.6 25.6 25.6h81.17c10.543 29.829 38.991 51.2 72.43 51.2s61.887-21.371 72.43-51.2h234.77c14.136 0 25.6-11.464 25.6-25.6s-11.464-25.6-25.6-25.6h-234.77c-10.543-29.829-38.991-51.2-72.43-51.2s-61.887 21.371-72.43 51.2h-81.17c-14.138 0-25.6 11.464-25.6 25.6z" />
|
||||
|
|
@ -36,8 +42,13 @@
|
|||
<glyph unicode="🔈" glyph-name="volume-none" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8z" />
|
||||
<glyph unicode="🔉" glyph-name="volume-low" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8zM665.6 409.6c0-28.278-22.922-51.2-51.2-51.2v-102.4c84.833 0 153.6 68.767 153.6 153.6 0 84.831-68.767 153.6-153.6 153.6v-102.4c28.278 0 51.2-22.923 51.2-51.2z" />
|
||||
<glyph unicode="🔊" glyph-name="volume-high" d="M256 563.2h-204.8v-307.2h204.8l204.8-204.8h51.2v716.8h-51.2l-204.8-204.8zM870.4 409.6c0 141.385-114.616 256-256 256v102.4c197.939 0 358.4-160.461 358.4-358.4s-160.461-358.4-358.4-358.4v102.4c141.384 0 256 114.616 256 256zM665.6 409.6c0-28.278-22.922-51.2-51.2-51.2v-102.4c84.833 0 153.6 68.767 153.6 153.6 0 84.831-68.767 153.6-153.6 153.6v-102.4c28.278 0 51.2-22.923 51.2-51.2z" />
|
||||
<glyph unicode="🔒" glyph-name="lock" d="M307.2 563.2c0 113.108 91.692 204.8 204.8 204.8 113.106 0 204.8-91.692 204.8-204.8v-51.2c28.278 0 51.2-22.923 51.2-51.2v-307.2c0-28.278-22.922-51.2-51.2-51.2h-409.6c-28.277 0-51.2 22.922-51.2 51.2v307.2c0 28.277 22.923 51.2 51.2 51.2v51.2zM512 665.6c-56.554 0-102.4-45.846-102.4-102.4v-51.2h204.8v51.2c0 56.554-45.844 102.4-102.4 102.4zM563.2 332.8c0 28.278-22.922 51.2-51.2 51.2-28.277 0-51.2-22.922-51.2-51.2v-51.2c0-28.278 22.923-51.2 51.2-51.2s51.2 22.922 51.2 51.2v51.2z" />
|
||||
<glyph unicode="🔓" glyph-name="lock-file" d="M307.2 614.4c0 113.108 91.692 204.8 204.8 204.8 113.106 0 204.8-91.692 204.8-204.8v-102.4h25.6c42.414 0 76.8-34.384 76.8-76.8v-358.4c0-42.414-34.386-76.8-76.8-76.8h-460.8c-42.416 0-76.8 34.386-76.8 76.8v358.4c0 42.416 34.384 76.8 76.8 76.8h25.6v102.4zM512 716.8c-56.554 0-102.4-45.846-102.4-102.4v-102.4h204.8v102.4c0 56.554-45.844 102.4-102.4 102.4zM563.2 307.2c0 28.278-22.922 51.2-51.2 51.2-28.277 0-51.2-22.922-51.2-51.2v-102.4c0-28.278 22.923-51.2 51.2-51.2s51.2 22.922 51.2 51.2v102.4z" />
|
||||
<glyph unicode="🕓" glyph-name="duration" d="M512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 665.6c28.278 0 51.2-22.923 51.2-51.2v-183.592l87.404-87.404c19.994-19.994 19.994-52.413 0-72.407s-52.413-19.994-72.407 0l-102.401 102.4c-9.265 9.267-14.996 22.067-14.996 36.204v204.8c0 28.277 22.923 51.2 51.2 51.2z" />
|
||||
<glyph unicode="🕛" glyph-name="duration-preview" d="M563.2 563.2c0 28.277-22.922 51.2-51.2 51.2-28.277 0-51.2-22.923-51.2-51.2v-153.6c0-6.943 1.382-13.563 3.885-19.599 2.499-6.036 6.202-11.694 11.111-16.604l76.801-76.8c19.994-19.994 52.413-19.994 72.407 0s19.994 52.413 0 72.407l-61.804 61.804v132.392zM468.262 816.888c14.387 1.529 28.98 2.312 43.738 2.312 14.756 0 29.353-0.783 43.74-2.312 28.119-2.989 48.486-28.207 45.496-56.325-2.985-28.119-28.206-48.49-56.325-45.501-10.793 1.148-21.775 1.738-32.911 1.738s-22.116-0.59-32.913-1.738c-28.119-2.989-53.336 17.382-56.326 45.501s17.382 53.336 45.501 56.325zM697.042 720.827c17.756 22.007 49.992 25.453 71.997 7.696 22.764-18.366 43.52-39.12 61.885-61.883 17.756-22.007 14.31-54.241-7.695-71.997-22.011-17.757-54.241-14.311-71.997 7.696-13.798 17.1-29.394 32.693-46.495 46.491-22.006 17.756-25.452 49.991-7.695 71.997zM326.957 720.827c17.757-22.007 14.311-54.241-7.696-71.997-17.1-13.797-32.693-29.39-46.491-46.491-17.756-22.007-49.991-25.453-71.997-7.696s-25.453 49.991-7.696 71.997c18.366 22.763 39.12 43.516 61.883 61.883 22.007 17.756 54.241 14.31 71.997-7.696zM161.037 498.839c28.119-2.99 48.49-28.207 45.501-56.326-1.148-10.798-1.738-21.777-1.738-32.913s0.59-22.118 1.738-32.911c2.989-28.119-17.382-53.34-45.501-56.325-28.119-2.99-53.336 17.377-56.325 45.496-1.529 14.387-2.312 28.984-2.312 43.74 0 14.758 0.783 29.351 2.312 43.738 2.989 28.119 28.207 48.49 56.325 45.501zM862.961 498.839c28.119 2.989 53.34-17.382 56.325-45.501 1.531-14.387 2.314-28.98 2.314-43.738 0-14.756-0.783-29.353-2.314-43.74-2.985-28.119-28.206-48.486-56.325-45.496-28.119 2.985-48.486 28.206-45.496 56.325 1.147 10.793 1.736 21.775 1.736 32.911s-0.589 22.116-1.736 32.913c-2.99 28.119 17.377 53.336 45.496 56.326zM200.773 224.558c22.007 17.756 54.241 14.31 71.997-7.695 13.797-17.101 29.39-32.696 46.491-46.495 22.007-17.756 25.453-49.987 7.696-71.997-17.756-22.006-49.991-25.452-71.997-7.695-22.763 18.365-43.516 39.122-61.883 61.885-17.756 22.006-14.31 54.241 7.696 71.997zM823.229 224.558c22.006-17.756 25.452-49.992 7.695-71.997-18.365-22.764-39.122-43.52-61.885-61.885-22.006-17.756-54.241-14.31-71.997 7.695-17.756 22.011-14.31 54.241 7.695 71.997 17.101 13.798 32.696 29.394 46.495 46.495 17.756 22.006 49.987 25.452 71.997 7.695zM422.761 58.639c2.99 28.119 28.207 48.486 56.326 45.496 10.798-1.147 21.777-1.736 32.913-1.736s22.118 0.589 32.911 1.736c28.119 2.99 53.34-17.377 56.325-45.496 2.99-28.119-17.377-53.34-45.496-56.325-14.387-1.531-28.984-2.314-43.74-2.314-14.758 0-29.351 0.783-43.738 2.314-28.119 2.985-48.49 28.206-45.501 56.325z" />
|
||||
<glyph unicode="🖹" glyph-name="text" d="M614.4 768l204.8-204.8v-460.8c0-28.278-22.922-51.2-51.2-51.2h-512c-28.277 0-51.2 22.922-51.2 51.2v614.4c0 28.277 22.923 51.2 51.2 51.2h358.4zM358.4 665.6c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2h204.8c28.278 0 51.2 22.923 51.2 51.2s-22.922 51.2-51.2 51.2h-204.8zM307.2 409.6c0-28.278 22.923-51.2 51.2-51.2h307.2c28.278 0 51.2 22.922 51.2 51.2 0 28.277-22.922 51.2-51.2 51.2h-307.2c-28.277 0-51.2-22.923-51.2-51.2zM358.4 256c-28.277 0-51.2-22.922-51.2-51.2s22.923-51.2 51.2-51.2h307.2c28.278 0 51.2 22.922 51.2 51.2s-22.922 51.2-51.2 51.2h-307.2z" />
|
||||
<glyph unicode="🖼" glyph-name="image" d="M921.6 102.4l-307.2 460.8-204.8-307.2-102.4 153.6-204.8-307.2h819.2zM358.4 614.4c0-56.554-45.846-102.4-102.4-102.4s-102.4 45.846-102.4 102.4c0 56.554 45.846 102.4 102.4 102.4s102.4-45.846 102.4-102.4z" />
|
||||
<glyph unicode="🗉" glyph-name="info" d="M921.6 768c0 56.554-45.844 102.4-102.4 102.4h-614.4c-56.554 0-102.4-45.846-102.4-102.4v-716.8c0-56.556 45.846-102.4 102.4-102.4h614.4c56.556 0 102.4 45.844 102.4 102.4v716.8zM204.8 768h614.4v-716.8h-614.4v716.8zM307.2 614.4c0 28.277 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.923 51.2-51.2s-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.923-51.2 51.2zM307.2 409.6c0 28.277 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.923 51.2-51.2 0-28.278-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.922-51.2 51.2zM307.2 204.8c0 28.278 22.923 51.2 51.2 51.2h307.2c28.278 0 51.2-22.922 51.2-51.2s-22.922-51.2-51.2-51.2h-307.2c-28.277 0-51.2 22.922-51.2 51.2z" />
|
||||
<glyph unicode="🗑" glyph-name="trash" horiz-adv-x="973" d="M153.6 665.6v102.4h153.6l51.2 51.2h256l51.2-51.2h153.6v-102.4h-665.6zM768 614.4v-512c0-56.556-45.844-102.4-102.4-102.4h-358.4c-56.554 0-102.4 45.844-102.4 102.4v512h563.2zM358.4 512h-51.2v-409.6h51.2v409.6zM614.4 512v-409.6h51.2v409.6h-51.2zM512 512h-51.2v-409.6h51.2v409.6z" />
|
||||
<glyph unicode="🛈" glyph-name="marker-info" d="M460.8 563.2c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2c0-28.277-22.923-51.2-51.2-51.2s-51.2 22.923-51.2 51.2zM512 716.8c-169.662 0-307.2-137.538-307.2-307.2s137.538-307.2 307.2-307.2c169.661 0 307.2 137.539 307.2 307.2s-137.539 307.2-307.2 307.2zM102.4 409.6c0 226.216 183.384 409.6 409.6 409.6s409.6-183.384 409.6-409.6c0-226.217-183.383-409.6-409.6-409.6s-409.6 183.383-409.6 409.6zM512 204.8c-28.277 0-51.2 22.922-51.2 51.2v170.496c0 28.277 22.923 51.2 51.2 51.2s51.2-22.923 51.2-51.2v-170.496c0-28.278-22.922-51.2-51.2-51.2z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue