-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
121 lines (116 loc) · 6.37 KB
/
index.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
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
<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wavearea</title>
<link href="./main.css" rel="stylesheet" />
<body>
<div class="wavearea" :onpopstate.window="e => goto(e.state)"
:onmousedown.document..onmouseup.document="e=> (isMouseDown = true, e=> isMouseDown = false)">
<div class="w-container"
:onselectionchange.document="e => (!playing && (e.stopImmediatePropagation(), selecting = false, handleCaret()))"
:onkeydown.arrow="e=>raf(handleCaret)"
:onselectstart..onselectionchange.document.once="e => (selecting = true, () => (selecting = false, handleCaret()))">
<div class="w-waveform wavefont" :ref="waveform" :style="{
'--cols': cols,
'--carety': (caretY - waveform.getBoundingClientRect().top) + 'px',
'--caretx': (caretX - waveform.getBoundingClientRect().left) + 'px'
}">
<button class="w-play" :ref="playButton"
:title="loading ? loading : `${playing ? 'Pause' : 'Play'} (Space)`"
:class="{'w-loading':loading}" :hidden="!segments.length"
:onclick..onclick="() => play()"
:onkeydown.document.space..onkeyup.document.space="e=>playButton.click(e)"
tabindex="-1"
:onfocus="e => (e.relatedTarget ? e.relatedTarget.focus() : e.target.blur())"
:style="{
position: !caretOffscreen ? 'absolute' : 'fixed',
...(!caretOffscreen ? {} : caretOffscreen > 0 ? {top:0} : {bottom:0,top:'auto'})
}">
<span class="w-play-clickarea"></span>
<svg :hidden="playing" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M8 5v14l11-7L8 5z" />
</svg>
<svg :hidden="!playing" xmlns="http://www.w3.org/2000/svg"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
</svg>
</button>
<span class="w-caret-line"></span>
<div class="w-loader" :if="loading" :ref="loader" :with="{str:''}"
:="clearInterval(loader._id), loading ? (loader._id = setInterval(()=>(str+='.'), 50)) : str = ''"
:text="str">
...</div>
<div class="w-opener" :if="!segments.length && !loading">
<input id="w-file" class="w-file" type="file"
accept="audio/x-m4a,audio/mp3,audio/amr,audio/aiff,audio/wav,audio/*"
:onchange="handleFile" />
<label for="w-file" title="Open file">
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" height="24px" width="24px"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v12m6-6H6" />
</svg>
</label>
<!-- <button class="w-record">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><circle cx="12" cy="12" r="8"/></svg>
Record
</button> -->
</div>
<div class="w-status" :if="!segments.length" :text="loading || ''">
</div>
<div contenteditable inputmode="none" :ref="editarea"
class="w-editarea wavefont" :class="{'w-playing':playing}"
:fx="/* remove blank textnodes */[...editarea.childNodes].forEach(node => node.nodeValue && !node.nodeValue.trim() && node.remove());"
:ondblclick.prevent
:oninput="e => (handleCaret(e), updateTimecodes())"
:onbeforeinput="handleBeforeInput"
:ondragenter..ondragleave:ondragenter..ondrop="e=>(editarea.classList.add('w-dragover'),e=>editarea.classList.remove('w-dragover'))"
:ondrop="e=>e.preventDefault()">
<p class="w-segment" :each="segment, id1 in segments" :text="segment"
:data="{id:id1-1}"></p>
</div>
<div class="w-timecodes"></div>
</div>
<!--
<div class="w-playback" :if="false">
<button class="w-play"
:title="loading ? loading : `${playing ? 'Pause' : 'Play'} (Space)`"
:class="{'w-loading':loading}"
:disabled="loading"
:hidden="!segments.length"
:onclick.toggle="play"
:onkeydown.document.space="e=>this.click(e)">
<span class="w-play-clickarea"></span>
<svg :hidden="playing" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 5v14l11-7L8 5z"/></svg>
<svg :hidden="!playing" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
<span class="w-time" title="Current time" :text="timecode(caretOffset, 2)"></span>
<span style="opacity: .25">/</span>
<span class="w-time" title="Time until the end" :text="'‒' + timecode(total - caretOffset, 2)"></span>
</div>
-->
</div>
<!--
<dialog class="w-info-dialog" id="info-dialog" :ref="info" :onclick="e => {
if (e.offsetX < 0 || e.offsetX > e.target.offsetWidth || e.offsetY < 0 || e.offsetY > e.target.offsetHeight) {
info.close();
}
}">
<h3 align="center" style="margin-bottom:.4rem">Wavearea</h3>
<p align="center"><a href="https://github.com/dy/wavearea">Github</a></p>
<p align="center"><a href="https://krishnized.github.io/license/">ॐ</a></p>
</dialog>
<button class="w-info-button" id="show-info-dialog" :onclick="e => info.showModal();">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="32" height="32">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12m-9-3.75h.008v.008H12V8.25z" />
</svg>
</button>
-->
<a class="w-krsnzd" href="https://krishnized.github.io/license/">ॐ</a>
</div>
<script type="module" src="./dist/wavearea.js"></script>
</body>