${guest.username}
58 | 
71 |
88 |
107 |
89 |
93 |
90 | 
91 |
92 |
94 |
104 |
106 |
95 | ${o.title}
96 |
97 |
98 |
103 |
99 | ${o.publisher_metadata?.artist || 'Unknown'}
100 |
101 | ${o.publisher_metadata?.album_title || ''}
102 |
8 |
80 |
81 | 
71 | 
74 |
82 |
167 |
83 |
98 |
105 |
109 |
106 |
107 |
108 |
110 |
111 |
112 |
149 |
113 | ![]()
114 |
115 |
116 |
148 |
117 |
133 |
118 |
119 |
120 |
121 |
131 |
132 |
134 |
135 |
146 |
147 |
136 |
145 |
137 | 3D Cube Chat Music Player
138 |
139 |
140 |
141 | 
142 |
143 |
144 |
142 |
143 |
150 |
166 |
151 | May
152 |
153 | 01
154 | ,
155 |
156 | 2022
157 |
158 |
159 | 00
160 | :
161 | 00
162 | :
163 | 00
164 |
165 |
168 |
216 |
169 |
195 |
170 | Close
171 |
194 |
172 |
180 |
173 |
175 |
178 |
179 |
181 |
193 | -
182 |
184 |
192 |
185 | 
186 |
187 |
186 | No Result Found.
188 |
189 | I am sorry for what you're looking for.
Maybe try another keyword? 190 |
191 | Maybe try another keyword? 190 |
196 |
204 |
205 |
197 |
198 |
201 | Close
202 |
203 |
206 |
215 |
207 |
208 |
212 | Close
213 |
214 |
217 |
219 |
220 |
221 |
233 |
234 |
235 |
--------------------------------------------------------------------------------
/src/ts/main.ts:
--------------------------------------------------------------------------------
1 | import { Base } from './class/base';
2 | import { io, Socket } from 'socket.io-client';
3 | import { trim } from 'lodash';
4 | import { ShowScreenTargets } from './interface';
5 | import { createElementFromHTML } from './util/function';
6 | import { doAlert, doConfirm, playViaIframe, pointerEvent, searchMusic } from './util/service';
7 |
8 | class Main extends Base {
9 | private wrapper: Element = document.querySelector('#wrapper');
10 | private chatBlock: Element = document.querySelector('#chat-block');
11 | private rotationLock: Element = this.chatBlock.querySelector('#rotation-lock');
12 | private curtainCall: Element = document.querySelector('#curtain-call');
13 | private chatBlockActive = false;
14 | private socket: Socket;
15 | private myName: string;
16 | private path = 'https://3d-cube-chat.fly.dev';
17 | // private path = 'http://192.168.1.101:5500';
18 | constructor(canvas: HTMLCanvasElement, domCanvas: HTMLElement, domBundle: HTMLElement) {
19 | super(canvas, domCanvas, domBundle);
20 | this.init();
21 | }
22 |
23 | private init() {
24 | this.initCurtainCall();
25 | this.initChatUI();
26 | this.initMusicUI();
27 | }
28 |
29 |
30 | toggleRotationLockFromUI(): void {
31 | const status = this.getRotationLockStatus();
32 | if (status) {
33 | this.rotationLock.classList.remove('chat-block__rotation-lock--active');
34 | }
35 | else {
36 | this.rotationLock.classList.add('chat-block__rotation-lock--active');
37 | }
38 | this.setRotationLock(!status)
39 | }
40 |
41 | setRotationLockFromUI(status: boolean): void {
42 | if (status) {
43 | this.rotationLock.classList.add('chat-block__rotation-lock--active');
44 | }
45 | else {
46 | this.rotationLock.classList.remove('chat-block__rotation-lock--active');
47 | }
48 |
49 | this.setRotationLock(status)
50 | }
51 |
52 | private initCurtainCall() {
53 | this.playground.on('env-ready', () => {
54 | this.curtainCall.classList.add('curtain-call--hide');
55 | })
56 | }
57 |
58 | private initChatUI() {
59 | const toggler = this.chatBlock.querySelector('#chat-block-toggler');
60 | const loginBtn = this.chatBlock.querySelector('#login-button');
61 | const sendBtn = this.chatBlock.querySelector('#send-message-button');
62 | const logoutBtn = this.chatBlock.querySelector('#logout-button');
63 | const panelToggle = () => {
64 | let showTarget: ShowScreenTargets
65 | if (this.chatBlockActive) {
66 | //準備關閉側選單
67 | this.wrapper.classList.remove('wrapper--active');
68 | showTarget = this.getLoginStatus() ? 'chatMainInner' : 'loginGuide';
69 | this.setRotationLockFromUI(false);
70 | }
71 | else {
72 | //準備開啟側選單
73 | this.wrapper.classList.add('wrapper--active');
74 | showTarget = this.getLoginStatus() ? 'guestList' : 'loginGuide';
75 | this.setRotationLockFromUI(true);
76 | this.playground.showChat();
77 | }
78 | this.playground.domCube.chat.showScreen(showTarget)
79 | this.chatBlockActive = !this.chatBlockActive;
80 | }
81 | const panelSet = (status: boolean) => {
82 | let showTarget: ShowScreenTargets
83 | if (status == true) {
84 | //準備開啟側選單
85 | this.wrapper.classList.add('wrapper--active');
86 | showTarget = this.getLoginStatus() ? 'guestList' : 'loginGuide';
87 | if (this.getLoginStatus()) {
88 | this.setRotationLockFromUI(true);
89 | }
90 | this.playground.showChat();
91 | }
92 | else {
93 | //準備關閉側選單
94 | this.wrapper.classList.remove('wrapper--active');
95 | showTarget = this.getLoginStatus() ? 'chatMainInner' : 'loginGuide';
96 | this.setRotationLockFromUI(false);
97 | }
98 | this.playground.domCube.chat.showScreen(showTarget)
99 | this.chatBlockActive = status;
100 |
101 | }
102 |
103 | toggler.addEventListener(pointerEvent, panelToggle)
104 |
105 | this.playground.on('ready', () => {
106 | this.playground.domCube.chat.showScreen('loginGuide');
107 | this.playground.domCube.chat.on('cube-login-button-click', () => {
108 | this.setRotationLockFromUI(true);
109 | panelSet(true);
110 | })
111 | })
112 |
113 |
114 | this.rotationLock.addEventListener(pointerEvent, this.toggleRotationLockFromUI.bind(this))
115 |
116 | loginBtn.addEventListener(pointerEvent, () => {
117 | this.myName = trim((this.chatBlock.querySelector('#login-name') as HTMLInputElement).value);
118 | if (this.myName) {
119 | /*發送事件*/
120 | this.socket = io(this.path);
121 | this.initChatSocket();
122 | this.socket.emit('login', { username: this.myName })
123 | } else {
124 | doAlert('Please enter a name :)')
125 | }
126 | })
127 |
128 | sendBtn.addEventListener(pointerEvent, () => {
129 | this.sendMessage();
130 | })
131 |
132 | logoutBtn.addEventListener(pointerEvent, async () => {
133 | let leave = await doConfirm('Are you sure you want to leave the chat?')
134 | if (leave) {
135 | /*觸發 logout 事件*/
136 | this.socket.emit('logout', { username: this.myName });
137 | }
138 | })
139 |
140 |
141 |
142 | document.addEventListener('keydown', (evt: KeyboardEvent) => {
143 | if (evt.keyCode == 13) {
144 | this.sendMessage()
145 | }
146 | })
147 |
148 | }
149 |
150 | private initMusicUI() {
151 | const musicBtn = this.chatBlock.querySelector('#search-music-button');
152 | let stopRotationTimeOut: any;
153 |
154 | musicBtn.addEventListener(pointerEvent, async () => {
155 |
156 | this.setRotationLockFromUI(true);
157 | this.playground.showMusic();
158 |
159 | await searchMusic().then((data) => {
160 | if (data) {
161 | playViaIframe(data).then(() => {
162 | clearTimeout(stopRotationTimeOut);
163 | stopRotationTimeOut = setTimeout(() => {
164 | this.setRotationLockFromUI(false);
165 | }, 1000)
166 | });
167 | } else {
168 | this.setRotationLockFromUI(false);
169 | }
170 | })
171 |
172 |
173 | })
174 | }
175 |
176 | private initChatSocket() {
177 | /*登入成功*/
178 | this.socket.on('loginSuccess', (data) => {
179 | if (data.username === this.myName) {
180 | this.checkIn(data)
181 | } else {
182 | doAlert('Wrong username:( Please try again!')
183 | }
184 | })
185 |
186 | /*登入失敗*/
187 | this.socket.on('loginFail', () => {
188 | doAlert('Duplicate name already exists :(')
189 | })
190 |
191 | /*加入聊天室提示*/
192 | this.socket.on('add', (data) => {
193 | var html = `
222 |
232 |
223 | 
224 |
225 |
224 |
226 | 3D-CUBE-CHAT
227 |
228 |
229 |
230 |
231 | ${data.username} 加入聊天室
` 194 | // $('.chat-con').append(html); 195 | this.playground.domCube.chat.setGuestNumber(data.userCount); 196 | this.playground.domCube.chat.refreshGuestList(data?.users); 197 | }) 198 | 199 | //離開成功 200 | this.socket.on('leaveSuccess', () => { 201 | this.checkOut() 202 | }) 203 | 204 | //退出提示 205 | this.socket.on('leave', (data) => { 206 | if (data.username != null) { 207 | this.playground.domCube.chat.refreshGuestList(data?.users) 208 | let html = `${data.username} 退出聊天室
`; 209 | // $('.chat-con').append(html); 210 | this.playground.domCube.chat.setGuestNumber(data.userCount) 211 | } 212 | }) 213 | 214 | //收到訊息 215 | this.socket.on('receiveMessage', (data) => { 216 | 217 | this.showMessage(data) 218 | }) 219 | } 220 | private checkIn(data: any) { 221 | const loginWrapper = this.chatBlock.querySelector('#login'); 222 | const userNameEle = this.chatBlock.querySelector('#my-name'); 223 | userNameEle.innerHTML = data.username; 224 | loginWrapper.classList.add('login--logined'); 225 | this.setRotationLockFromUI(true); 226 | this.setLoginStatus(true); 227 | this.playground.showChat(); 228 | } 229 | 230 | private checkOut() { 231 | const loginWrapper = this.chatBlock.querySelector('#login'); 232 | loginWrapper.classList.remove('login--logined'); 233 | this.playground.domCube.chat.showScreen('loginGuide'); 234 | this.chatBlock.querySelector('#chat-main').innerHTML = ''; 235 | this.setLoginStatus(false); 236 | } 237 | 238 | private sendMessage() { 239 | const inputEle = this.chatBlock.querySelector('#message-input'); 240 | const message = (inputEle as HTMLInputElement).value; 241 | (inputEle as HTMLInputElement).value = '' 242 | if (message) { 243 | /*觸發 sendMessage 事件*/ 244 | this.socket.emit('sendMessage', { username: this.myName, message: message }); 245 | } 246 | } 247 | 248 | private showMessage(data: any) { 249 | let html; 250 | if (data.username === this.myName) { 251 | html = `
252 |
255 | `;
256 | } else {
257 | html = `You
253 | ${data.message}
254 |
258 |
261 | `;
262 | }
263 | const ele = createElementFromHTML(html)
264 | const containerMain = this.chatBlock.querySelector('#chat-main');
265 | const containerCube = this.wrapper.querySelector('#chat-main-cube .chat-main__inner#chat-main-inner');
266 | containerMain.appendChild(ele);
267 | containerCube.appendChild(ele.cloneNode(true));
268 | containerMain.parentElement.scrollTop = containerMain.scrollHeight;
269 | containerCube.scrollTop = containerCube.scrollHeight;
270 | }
271 |
272 |
273 | }
274 |
275 |
276 | (() => {
277 | const cvs = document.querySelector('#canvas');
278 | const dcvs = document.querySelector('#dom-canvas');
279 | const domBundle = document.querySelector('#dom-bundle');
280 | const instance = new Main(cvs as HTMLCanvasElement, dcvs as HTMLElement, domBundle as HTMLElement);
281 | })()
--------------------------------------------------------------------------------
/src/scss/components/_modal.scss:
--------------------------------------------------------------------------------
1 | .img-replace {
2 | /* replace text with an image */
3 | display: inline-block;
4 | overflow: hidden;
5 | text-indent: 100%;
6 | color: transparent;
7 | white-space: nowrap;
8 | }
9 |
10 |
11 | /* --------------------------------
12 |
13 | xpopup
14 |
15 | -------------------------------- */
16 | .modal-prompt {
17 | @include modalBase();
18 |
19 | &__inner {
20 | position: relative;
21 | width: 90%;
22 | max-width: 400px;
23 | margin: 4em auto;
24 | background: #FFF;
25 | border-radius: .25em .25em .4em .4em;
26 | text-align: center;
27 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
28 | transform: translateY(-40px);
29 | backface-visibility: hidden;
30 | transition: transform 0.3s;
31 |
32 | p {
33 | padding: 3em 1em;
34 | }
35 | }
36 |
37 | &--active &__inner {
38 | transform: translateY(0);
39 | }
40 |
41 |
42 |
43 | &__buttons {
44 | user-select: none;
45 | display: flex;
46 |
47 | li {
48 | flex: 1;
49 | width: 50%;
50 | list-style: none;
51 | }
52 |
53 | a {
54 | display: block;
55 | height: 60px;
56 | line-height: 60px;
57 | text-transform: uppercase;
58 | color: #FFF;
59 | -webkit-transition: background-color 0.2s;
60 | -moz-transition: background-color 0.2s;
61 | transition: background-color 0.2s;
62 | text-decoration: none;
63 | }
64 |
65 | li:first-child a {
66 | background: #595959;
67 | border-radius: 0 0 0 .25em;
68 | }
69 |
70 | @include hasHover() {
71 | li:first-child a:hover {
72 | background-color: #656565;
73 | }
74 | }
75 |
76 |
77 | li:last-child a {
78 | background: #9b9b9b;
79 | border-radius: 0 0 .25em 0;
80 | }
81 |
82 | @include hasHover() {
83 | li:last-child a:hover {
84 | background-color: #8d8d8d;
85 | }
86 | }
87 | }
88 | }
89 |
90 | .modal-music-search {
91 | @include modalBase();
92 |
93 | &__inner {
94 | position: absolute;
95 | width: calc(100% - 40px);
96 | height: calc(100% - 100px);
97 | max-width: 1024px;
98 | max-height: 1024px;
99 | margin: auto;
100 | top: 0;
101 | bottom: 0;
102 | left: 0;
103 | right: 0;
104 | background: rgba(31, 31, 31, 0.9);
105 | border-radius: 20px;
106 | text-align: center;
107 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
108 | transform: translateY(-40px);
109 | backface-visibility: hidden;
110 | transition: transform 0.3s;
111 | display: flex;
112 | flex-direction: column;
113 |
114 | }
115 |
116 | &--active &__inner {
117 | transform: translateY(0);
118 | }
119 |
120 | &__inner &__close {
121 | background-color: rgb(42, 42, 42);
122 | height: 40px;
123 | width: 40px;
124 | right: 0;
125 | top: 0;
126 | transform: translate(30%, -30%);
127 | border-radius: 50%;
128 |
129 | @include rwd($screen-pad-portrait) {
130 | width: 30px;
131 | height: 30px;
132 | }
133 |
134 | &:before,
135 | &:after {
136 | background-color: #fff;
137 | height: 50%;
138 | }
139 | }
140 |
141 | &__header {
142 | padding: 30px;
143 | background-color: rgba(128, 128, 128, 0.482);
144 | border-top-left-radius: 20px;
145 | border-top-right-radius: 20px;
146 |
147 | @include rwd($screen-pad-portrait) {
148 | padding: 20px;
149 | }
150 | }
151 |
152 | &__header .input-block {
153 | max-width: 600px;
154 | position: relative;
155 | margin: 0 auto;
156 |
157 | input {
158 | font-size: 1.5rem;
159 |
160 | @include rwd($screen-pad-portrait) {
161 | font-size: 1rem;
162 | }
163 | }
164 |
165 | }
166 |
167 | &__header .input-block__button {
168 | width: 30px;
169 | height: 30px;
170 |
171 | @include rwd($screen-pad-portrait) {
172 | width: 20px;
173 | height: 20px;
174 | }
175 | }
176 |
177 | &__body {
178 | border-top: 1px solid gray;
179 | display: flex;
180 | align-items: center;
181 | justify-content: center;
182 | overflow: hidden;
183 |
184 | }
185 |
186 |
187 | &__inner &__header {
188 | flex: none;
189 | }
190 |
191 | &__inner &__body {
192 | flex: 1;
193 | }
194 |
195 |
196 |
197 | &__no-result {
198 | display: none;
199 | }
200 |
201 | &__ul:not(:empty) {
202 | padding-left: 50px;
203 | padding-right: 50px;
204 | height: 100%;
205 | width: 100%;
206 | overflow: auto;
207 | @include custom-scroll();
208 |
209 | @include rwd($screen-pad-portrait) {
210 | padding-left: 20px;
211 | padding-right: 20px;
212 | }
213 |
214 |
215 | &:before,
216 | &:after {
217 | content: '';
218 | display: block;
219 | height: 50px;
220 | width: 100%;
221 |
222 | @include rwd($screen-pad-portrait) {
223 | height: 30px;
224 | }
225 |
226 | }
227 | }
228 |
229 | &__ul:empty {
230 | height: auto;
231 | }
232 |
233 | &__ul:empty+&__no-result {
234 | display: block;
235 | }
236 |
237 | &__li {
238 | opacity: 0;
239 | animation: fadeIndownSmall 500ms forwards;
240 |
241 | &--loading {
242 | position: relative;
243 | top: calc(50% - 50px);
244 | width: 200px;
245 | height: 200px;
246 | left: 50%;
247 | transform: translate(-50%, -50%);
248 | animation: none;
249 | opacity: 0.35;
250 | }
251 | }
252 |
253 | &__li+&__li {
254 | border-top: 1px solid rgba(255, 255, 255, 0.1);
255 | }
256 |
257 |
258 | }
259 |
260 | .music-search-item {
261 | user-select: none;
262 |
263 | &__inner {
264 | display: flex;
265 | padding: 20px;
266 | align-items: center;
267 |
268 | @include rwd($screen-pad-portrait) {
269 | padding-left: 0;
270 | padding-right: 0;
271 | }
272 | }
273 |
274 | &__img {
275 | width: 100px;
276 | border-radius: 50%;
277 | opacity: 0.5;
278 | transition: opacity 500ms;
279 | overflow: hidden;
280 | flex: none;
281 | position: relative;
282 |
283 | @include rwd($screen-pad-portrait) {
284 | width: 50px;
285 | }
286 |
287 | &:after {
288 | content: '';
289 | display: block;
290 | padding-bottom: 100%;
291 | }
292 |
293 | img {
294 | position: absolute;
295 | left: 0;
296 | top: 0;
297 | width: 100%;
298 | }
299 | }
300 |
301 | &__img--not-found {
302 | background-image: url(~@img/not-found.jpg);
303 | background-size: cover;
304 | background-position: center;
305 |
306 | img {
307 | opacity: 0;
308 | }
309 | }
310 |
311 | @include hasHover() {
312 | &:hover &__img {
313 | opacity: 1;
314 | }
315 | }
316 |
317 | &__head {
318 | flex: none;
319 | }
320 |
321 | &__head+&__body {
322 | margin-left: 50px;
323 |
324 | @include rwd($screen-pad-portrait) {
325 | margin-left: 20px;
326 | }
327 |
328 | }
329 |
330 | &__body {
331 | text-align: left;
332 | flex: 1;
333 | overflow: hidden;
334 | }
335 |
336 | &__body+&__play {
337 | margin-left: 50px;
338 |
339 | @include rwd($screen-pad-portrait) {
340 | margin-left: 20px;
341 | }
342 | }
343 |
344 | &__play {
345 | width: 30px;
346 | height: 30px;
347 | flex: none;
348 | border-radius: 50%;
349 | background-image: url(~@img/play.svg);
350 | background-size: cover;
351 | opacity: 0.35;
352 | transition: opacity 500ms;
353 | background-color: transparent;
354 | border: none;
355 | cursor: pointer;
356 | }
357 |
358 | @include hasHover() {
359 | &:hover &__play {
360 | opacity: 0.5;
361 | }
362 | }
363 |
364 |
365 | &__title {
366 | position: relative;
367 | display: inline-flex;
368 | font-size: 1.25rem;
369 | color: rgba(255, 255, 255, 1);
370 | font-family: 'Roboto Condensed';
371 | font-weight: 300;
372 | text-align: left;
373 | opacity: 0.5;
374 | transition: opacity 500ms;
375 | width: 100%;
376 |
377 | span {
378 | overflow: hidden;
379 | text-overflow: ellipsis;
380 | white-space: nowrap;
381 | }
382 |
383 | @include rwd($screen-pad-portrait) {
384 | font-size: 1rem;
385 | }
386 | }
387 |
388 | @include hasHover() {
389 | &:hover &__title {
390 | opacity: 0.75;
391 | }
392 | }
393 |
394 | @include hasHover() {
395 | &__title:hover {
396 | @include rwd($screen-pad-portrait) {
397 | span {
398 | text-overflow: clip;
399 | overflow: visible;
400 | display: inline-block;
401 | animation: marquee 10s linear infinite;
402 | }
403 |
404 | }
405 | }
406 | }
407 |
408 | &__title+&__descrp {
409 | margin-top: 20px;
410 |
411 | @include rwd($screen-pad-portrait) {
412 | margin-top: 10px;
413 | }
414 | }
415 |
416 | &__descrp {
417 | display: flex;
418 | align-items: center;
419 | color: $white;
420 | }
421 |
422 | &__artist,
423 | &__album-title {
424 | font-size: 14px;
425 | opacity: 0.5;
426 | transition: opacity 500ms;
427 | white-space: nowrap;
428 | text-overflow: ellipsis;
429 | overflow: hidden;
430 | max-width: 12em;
431 |
432 | @include rwd($screen-pad-portrait) {
433 | font-size: 12px;
434 | }
435 | }
436 |
437 |
438 | @include hasHover() {
439 |
440 | &:hover &__artist,
441 | &:hover &__album-title {
442 | opacity: 0.75;
443 | }
444 | }
445 |
446 | &__artist+&__album-title:not(:empty) {
447 | display: flex;
448 | align-items: center;
449 |
450 | &:before {
451 | content: '-';
452 | display: block;
453 | font-size: 1rem;
454 | margin: 0 10px;
455 |
456 | @include rwd($screen-pad-portrait) {
457 | margin: 0 3px;
458 | }
459 | }
460 | }
461 | }
--------------------------------------------------------------------------------
/src/scss/util/_mixins.scss:
--------------------------------------------------------------------------------
1 | // -----------------------------------------------------------------------------
2 | // This file contains all application-wide Sass mixins.
3 | // -----------------------------------------------------------------------------
4 |
5 | /// @example 若某元素有滑鼠互動特效時導入
6 | /// @param {Bool} $self [false] - 當值為 false時，不將本身納入樣式有效對象, 也就是說當值為true時, compile出來的css會是 .element,.element:hover,element:active,.element:focus{...}
7 | @mixin on-event($self: false) {
8 | @if $self {
9 |
10 | &,
11 | &:hover,
12 | &:active,
13 | &:focus {
14 | @content;
15 | }
16 | }
17 |
18 | @else {
19 |
20 | &:hover,
21 | &:active,
22 | &:focus {
23 | @content;
24 | }
25 | }
26 | }
27 |
28 | /// @example 單行字數若溢出容器最大寬度，將超出的字轉換為...
29 | /// @param {None} none
30 | @mixin text-ellipsis {
31 | text-overflow: ellipsis;
32 | white-space: nowrap;
33 | overflow: hidden;
34 | }
35 |
36 | /// @example 多行字數若溢出容器最大尺寸，將超出的字轉換為...(IE無效)
37 | /// @param {Num} howManyLine 參數請填段落最大行數(整數)
38 | @mixin multi-line-ellipsis($how-many-line: 3) {
39 | display: -webkit-box;
40 | -webkit-line-clamp: $how-many-line;
41 | -webkit-box-orient: vertical;
42 | overflow: hidden;
43 | }
44 |
45 | /// @example 將字體大小的px單位轉換為Rem單位
46 | /// @param {Num} size 參數請填瀏覽器字體需要成為的字體大小(數字)
47 | /// @param {Num} base 參數請填瀏覽器字體基準大小(數字)
48 | @mixin px-to-rem($size: 16, $base: 16) {
49 | font-size: $size; // fallback for old browsers
50 | font-size: $size / $base * 1rem;
51 | }
52 |
53 | /// @example 快速創建固定間距寬度(寬度可為各種長度單位)的flex grid system
54 | /// @param {Num} column-number 參數請填數字，grid欄數
55 | /// @param {Size} column-gutter 參數請填長度單位(px,rem,em,%,vw,...,etc), grid容器內部子容器的水平間距
56 | /// @param {Size} vertical-gutter 參數請填長度單位(px,rem,em,%,vw,...,etc), grid容器內部子容器的垂直間距, 預設等於column-gutter
57 | /// @param {String} grid-child-selector 參數請填gird容器內部子容器想要的class名稱, 預設為'*'
58 | /// @param {String} max-width 參數請填長度單位，gird容器的最大寬度
59 | /// @param {Size} box-sizing-fix 這個變數是為了要應對在Ie的flex bug, IE在flex-basis為純值的狀況下
60 | /// 會忽略掉boxing-sizing:border-box的設定，因此padding和border並不會被計算在flex-basis的範圍內，變成必須要手動扣除，這邊請填寫padding-left/padding-right ＆ border-left/border-right的總和
61 | /// @param {String} min-screen-width 參數請填長度單位，呈現出這個 mixin 參數所導出的grid樣式時，其最小視窗寬度，預設為0
62 | @mixin fixed-gutter-flex-grid($column-number: 3,
63 | $column-gutter: 30px,
64 | $vertical-gutter: $column-gutter,
65 | $grid-child-selector: "*",
66 | $box-sizing-fix: 0px,
67 | $max-width: 100%,
68 | $min-screen-width: 0px,
69 | $max-screen-width: 999999px) {
70 | @media screen and (min-width: $min-screen-width) and (max-width: $max-screen-width) {
71 | width: 100%;
72 | display: inline-flex;
73 | max-width: $max-width;
74 | font-size: 0;
75 | flex-wrap: wrap;
76 |
77 | >#{$grid-child-selector} {
78 | display: inline-block;
79 | flex: none;
80 | flex-grow: 0;
81 | flex-shrink: 0;
82 | flex-basis: calc((100% - (#{$column-number} - 1) * #{$column-gutter}) /#{$column-number});
83 | width: calc((100% - (#{$column-number} - 1) * #{$column-gutter}) /#{$column-number});
84 | margin-right: #{$column-gutter};
85 | margin-bottom: #{$vertical-gutter};
86 |
87 | &:nth-child(#{$column-number}n) {
88 | margin-right: 0;
89 | }
90 |
91 | // @for $i from 1 through $column-number {
92 | // &:nth-last-child(#{$i}) {
93 | // margin-bottom: 0;
94 | // }
95 | // }
96 |
97 | }
98 | }
99 |
100 | @media all and (-ms-high-contrast: none) and (min-width: $min-screen-width) and (max-width: $max-screen-width) {
101 | >#{$grid-child-selector} {
102 | flex-basis: calc(((99.99% - (#{$column-number} - 1) * #{$column-gutter}) /#{$column-number}) - #{$box-sizing-fix});
103 | width: calc(((99.99% - (#{$column-number} - 1) * #{$column-gutter}) /#{$column-number}) - #{$box-sizing-fix});
104 | }
105 |
106 | }
107 | }
108 |
109 | /// @example 快速創建固定欄位寬度(寬度可為各種長度單位)的flex grid system
110 | /// @param {Num} column-number 參數請填數字，grid欄數
111 | /// @param {Size} vertical-gutter 參數請填長度單位(px,rem,em,%,vw,...,etc), gird容器內部子容器的垂直間距
112 | /// @param {Size} column-width 參數請填長度單位(px,rem,em,%,vw,...,etc), gird容器內部子容器的固定寬度
113 | /// @param {String} grid-child-selector 參數請填gird容器內部子容器想要的class名稱, 預設為'*'
114 | /// @param {Size} box-sizing-fix 這個變數是為了要應對在Ie的flex bug, IE在flex-basis為純值的狀況下
115 | /// 會忽略掉boxing-sizing:border-box的設定，因此padding和border並不會被計算在flex-basis的範圍內，變成必須要手動扣除，這邊請填寫padding-left/padding-right ＆ border-left/border-right的總和
116 | /// @param {String} max-width 參數請填長度單位，gird容器的最大寬度
117 | /// @param {String} min-screen-width 參數請填長度單位。呈現出這個 mixin 參數所導出的grid樣式時，其最小視窗寬度，預設為0
118 |
119 | @mixin fixed-column-flex-grid($column-number: 3,
120 | $column-width: 50px,
121 | $vertical-gutter: 30px,
122 | $grid-child-selector: "*",
123 | $max-width: 100%,
124 | $box-sizing-fix: 0px,
125 | $min-screen-width: 0px,
126 | $max-screen-width: 9999999px) {
127 | $gutter-num: ($column-number - 1);
128 |
129 | @media screen and (min-width:#{$min-screen-width}) and (max-width:#{$max-screen-width}) {
130 | width: 100%;
131 | display: inline-flex;
132 | max-width: #{$max-width};
133 | font-size: 0;
134 | flex-wrap: wrap;
135 |
136 | >#{$grid-child-selector} {
137 | display: inline-block;
138 | flex: none;
139 | flex-grow: 0;
140 | flex-shrink: 0;
141 | flex-basis: #{$column-width};
142 | width: #{$column-width};
143 | margin-right: calc((100% - #{$column-number} * #{$column-width}) / #{$gutter-num});
144 | margin-bottom: #{$vertical-gutter};
145 |
146 | &:nth-child(#{$column-number}n) {
147 | margin-right: 0;
148 | }
149 |
150 | // @for $i from 1 through $column-number {
151 | // &:nth-last-child(#{$i}) {
152 | // margin-bottom: 0;
153 | // }
154 | // }
155 | }
156 | }
157 |
158 | ///修正ie異常狀況
159 | @media screen and (-ms-high-contrast: none) and (min-width:#{$min-screen-width}) and (max-width:#{$max-screen-width}) {
160 | >#{$grid-child-selector} {
161 | margin-right: calc((99.99% - #{$column-number} * #{$column-width}) / #{$gutter-num});
162 | flex-basis: calc(#{$column-width} - #{$box-sizing-fix});
163 | width: calc(#{$column-width} - #{$box-sizing-fix});
164 |
165 | }
166 | }
167 | }
168 |
169 | /// @example 快速創建CSS border 三角形
170 | /// @param {String}
171 |
172 | @mixin gen-triangle($orientation: "top", $arrow-width: 15px, $arrow-size: 20px, $arrow-color: #000) {
173 | width: 0;
174 | height: 0;
175 | border-style: solid;
176 | border-width: 0;
177 | border-color: transparent;
178 | display: inline-block;
179 |
180 | @if ($orientation=="left") {
181 | border-width: $arrow-width $arrow-size $arrow-width 0;
182 | border-right-color: $arrow-color;
183 | }
184 |
185 | @else if($orientation=="right") {
186 | border-width: $arrow-width 0 $arrow-size $arrow-width;
187 | border-left-color: $arrow-color;
188 | }
189 |
190 | @else if($orientation=="top") {
191 | border-width: 0 $arrow-width $arrow-size $arrow-width;
192 | border-bottom-color: $arrow-color;
193 | }
194 |
195 | @else if($orientation=="bottom") {
196 | border-width: $arrow-width $arrow-size 0 $arrow-width;
197 | border-top-color: $arrow-color;
198 | }
199 | }
200 |
201 | /// @example 快速創建CSS 半圓形
202 | /// @param {String} diameter 參數請填寬度(px)
203 |
204 | @mixin semi-circle-btm($diameter: 30px) {
205 | height: $diameter/2;
206 | width: $diameter;
207 | border-radius: 0 0 $diameter $diameter;
208 | padding: 0;
209 | }
210 |
211 | /// @example 快速創建禁用樣式
212 | /// @param {String} opacity 參數請填透明度小數
213 |
214 | @mixin status-disable($opacity: 0.3) {
215 | cursor: not-allowed;
216 | opacity: $opacity;
217 |
218 | * {
219 | pointer-events: none !important;
220 | }
221 | }
222 |
223 | /// @example 上下左右箭頭
224 | /// @param {String} $arrow-type 參數請填箭頭方向名稱，預設為'down'
225 | /// @param {Color} $arrow-border-color 參數請填箭頭顏色
226 | @mixin arrow($arrow-type: down, $arrow-border-color: 2px solid #f09813) {
227 | display: block;
228 | position: relative;
229 | cursor: pointer;
230 |
231 | &:after {
232 | position: absolute;
233 | content: "";
234 | top: 50%;
235 | transform: translateY(-50%);
236 | right: 0;
237 | width: 12px;
238 | height: 12px;
239 | border-right: transparent;
240 | border-top: transparent;
241 | border-bottom: $arrow-border-color;
242 | border-left: $arrow-border-color;
243 | }
244 |
245 | @if $arrow-type==down {
246 | &:after {
247 | transform: translateY(-50%) rotate(-45deg);
248 | }
249 | }
250 |
251 | @else if $arrow-type==top {
252 | &:after {
253 | transform: translateY(-50%) rotate(135deg);
254 | }
255 | }
256 |
257 | @else if $arrow-type==right {
258 | &:after {
259 | transform: translateY(-50%) rotate(225deg);
260 | }
261 | }
262 |
263 | @else if $arrow-type==left {
264 | &:after {
265 | transform: translateY(-50%) rotate(45deg);
266 | }
267 | }
268 |
269 | @else {
270 | @error "請填寫$arrow-type正確參數：top／left／bottom／right";
271 | }
272 | }
273 |
274 | /// @example 製作圓角方塊
275 | /// @param {Size} $width 參數請填寬度，預設為'27px'
276 | /// @param {Size} $height 參數請填高度，預設為'27px'
277 | /// @param {Size} $border-radius 參數請填圓角，預設為'0px 0 5px 0'
278 | /// @param {Color} $background 參數請填背景顏色
279 |
280 | @mixin squareArrow($width: 27px, $height: 27px, $border-radius: 0px 0 5px 0, $background: #f09813) {
281 | width: $width;
282 | height: $height;
283 | border-radius: $border-radius;
284 | background: $background;
285 | }
286 |
287 | /// @example 製作圓形
288 | /// @param {Size} $circle-size 參數請填圓形設定尺寸(寬/高/行高設定均相同)，預設為'75px'
289 | /// @param {Size} $background 參數請填背景顏色
290 |
291 | @mixin circle($circle-size: 75px, $background: #f09813) {
292 | border-radius: 50%;
293 | width: $circle-size;
294 | height: $circle-size;
295 | line-height: $circle-size;
296 | background: $background;
297 | }
298 |
299 |
300 | /// @example 製作叉叉
301 | /// @param {Size} $block-width 參數請填產生叉叉的方塊的寬
302 | /// @param {Size} $block-height 參數請填產生叉叉的方塊的高
303 | /// @param {Size} $line-width:2px 參數請填叉叉的線寬
304 | /// @param {Size} $line-length:80% 參數請填叉叉的線長
305 | /// @param {Color} $line-color 參數請填叉叉的線色
306 |
307 | @mixin genCross($block-width: 50px, $block-height: 50px, $line-width: 2px, $line-length: 80%, $line-color: green) {
308 | position: relative;
309 | width: $block-width;
310 | height: $block-height;
311 |
312 | &:after,
313 | &:before {
314 | content: '';
315 | display: block;
316 | height: $line-length;
317 | width: $line-width;
318 | position: absolute;
319 | left: 0;
320 | right: 0;
321 | margin: 0 auto;
322 | top: 50%;
323 | background-color: $line-color;
324 | transform-origin: 50% 50%;
325 | }
326 |
327 | &:after {
328 | transform: translateY(-50%) rotate(-45deg);
329 | }
330 |
331 | &:before {
332 | transform: translateY(-50%) rotate(45deg);
333 | }
334 | }
335 |
336 |
337 |
338 | @mixin flex-width($width: 0px, $box-sizing-fix: 0px) {
339 | flex-basis: $width;
340 | width: $width;
341 | flex-grow: 0;
342 | flex-shrink: 0;
343 |
344 | @media all and (-ms-high-contrast: none) {
345 | flex-basis: calc(#{$width} - #{$box-sizing-fix});
346 | }
347 | }
348 |
349 | @mixin flex-height($height: 0px, $box-sizing-fix: 0px) {
350 | flex-basis: $height;
351 | height: $height;
352 | flex-grow: 0;
353 | flex-shrink: 0;
354 |
355 | @media all and (-ms-high-contrast: none) {
356 | flex-basis: calc(#{$height} - #{$box-sizing-fix});
357 | }
358 | }
359 |
360 | /// @example 快速創建Device Width Media Query規則
361 | /// @param {String} $breakpoint 參數請填長度單位，裝置斷點寬度
362 |
363 | @mixin rwd($breakpoint) {
364 | @media (max-width: $breakpoint) {
365 | @content;
366 | }
367 | }
368 |
369 |
370 | @mixin min-rwd($breakpoint) {
371 | @media (min-width: $breakpoint) {
372 | @content;
373 | }
374 | }
375 |
376 |
377 | @mixin between-rwd($min-screen-width, $max-screen-width) {
378 | @media screen and (min-width:$min-screen-width) and (max-width: $max-screen-width) {
379 | @content;
380 | }
381 | }
382 |
383 | @mixin gradient-border( //
384 | $padding: 10px,
385 | // padding-box 留白量
386 | $border-width: 3px,
387 | //邊框寬度
388 | $border-radius: 10px,
389 | //圓角
390 | $backdrop-filter: none,
391 | //padding-box 的backdrop-filter屬性
392 | $outer-shadow: none,
393 | // 外光暈
394 | $inner-shadow: none,
395 | //內光暈 inner shadow 要記得補 inset
396 | $border-image: // border的漸層或是顏色
397 | radial-gradient(circle, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%),
398 | $inner-image: // 內部 padding-box的漸層或是顏色
399 |
400 | rgb(28, 28, 31)) {
401 | position: relative;
402 | padding: $padding;
403 | background: $inner-image;
404 | border-radius: $border-radius;
405 | box-shadow: $outer-shadow;
406 |
407 | @if ($backdrop-filter) {
408 | backdrop-filter: $backdrop-filter;
409 | -webkit-backdrop-filter: $backdrop-filter;
410 | }
411 |
412 | &:before {
413 | pointer-events: none;
414 | content: "";
415 | position: absolute;
416 | top: 0;
417 | left: 0;
418 | right: 0;
419 | bottom: 0;
420 | inset: 0;
421 | display: block;
422 | border-radius: $border-radius;
423 | padding: $border-width;
424 | background: $border-image border-box;
425 | -webkit-mask: linear-gradient(#fff 0 0) content-box,
426 | linear-gradient(#fff 0 0);
427 | -webkit-mask-composite: xor;
428 | mask-composite: exclude;
429 | pointer-events: none;
430 | }
431 |
432 | &:after {
433 | pointer-events: none;
434 | content: "";
435 | display: block;
436 | position: absolute;
437 | top: 0;
438 | left: 0;
439 | right: 0;
440 | bottom: 0;
441 | border-radius: $border-radius;
442 | border: $border-width solid transparent;
443 | box-shadow: $inner-shadow;
444 | }
445 | }
446 |
447 |
448 | @mixin custom-scroll {
449 | scrollbar-width: auto;
450 | scrollbar-color: #7e7a7f #ffffff;
451 |
452 | /* Chrome, Edge, and Safari */
453 | &::-webkit-scrollbar {
454 | width: 16px;
455 |
456 | @include rwd($screen-pad-portrait) {
457 | width: 5px;
458 | }
459 | }
460 |
461 | &::-webkit-scrollbar-track {
462 | background: transparent;
463 | }
464 |
465 | &::-webkit-scrollbar-thumb {
466 | background-color: #7e7a7f;
467 | border-radius: 10px;
468 | border: none;
469 | }
470 | }
471 |
472 |
473 | @mixin modalBase() {
474 | position: fixed;
475 | left: 0;
476 | top: 0;
477 | height: 100%;
478 | width: 100%;
479 | background-color: rgba(100, 100, 100, 0.482);
480 | opacity: 0;
481 | visibility: hidden;
482 | transition: opacity 0.3s 0s, visibility 0s 0.3s;
483 | z-index: 99;
484 |
485 | &--active {
486 | opacity: 1;
487 | visibility: visible;
488 | transition: opacity 0.3s 0s, visibility 0s 0s;
489 | }
490 |
491 | &__inner &__close {
492 | position: absolute;
493 | top: 10px;
494 | right: 10px;
495 | width: 15px;
496 | height: 15px;
497 | }
498 |
499 | &__close::before,
500 | &__close::after {
501 | content: '';
502 | position: absolute;
503 | left: 0;
504 | right: 0;
505 | top: 0;
506 | bottom: 0;
507 | margin: auto;
508 | width: 3px;
509 | height: 100%;
510 | background-color: #8f9cb5;
511 | transform-origin: 50% 50%;
512 | }
513 |
514 | &__close::before {
515 | transform: rotate(45deg);
516 | }
517 |
518 | &__close::after {
519 | transform: rotate(-45deg);
520 | }
521 | }
522 |
523 | @mixin hasHover() {
524 | @media(hover:hover) {
525 | @content
526 | }
527 | }
--------------------------------------------------------------------------------
/src/ts/util/waveform.ts:
--------------------------------------------------------------------------------
1 | /*This is a modified version of https://github.com/samcrosoft/waveformjs, the original one is written in coffee script, and I rewrite it into typescript*/
2 |
3 | import { EventEmitter } from "./event-emitter";
4 |
5 | interface WaveformOptions {
6 | container?: HTMLElement
7 | canvas?: HTMLCanvasElement
8 | trackLength?: number
9 | data?: number[]
10 | outerColor?: string
11 | reflection?: number
12 | interpolate?: boolean
13 | bindResize?: boolean
14 | fadeOpacity?: number
15 | width?: number
16 | height?: number
17 | gutterWidth?: number
18 | waveWidth?: number
19 | }
20 |
21 | export const DEFAULT_MAX_OPACITY = 1
22 | export const DEFAULT_MIN_OPACITY = 0.2
23 | export const WAVE_FOCUS = 'waveFocus'
24 | export const WAVE = 'wave'
25 | export const WAVE_ACTIVE = 'waveActive'
26 | export const WAVE_SELECTED = 'waveSelected'
27 | export const GUTTER = 'gutter'
28 | export const GUTTER_ACTIVE = 'gutterActive'
29 | export const GUTTER_SELECTED = 'gutterSelected'
30 | export const REFLECTION = 'reflection'
31 | export const REFLECTION_ACTIVE = 'reflectionActive'
32 | export const EVENT_READY = "ready"
33 | export const EVENT_CLICK = "click"
34 | export const EVENT_HOVER = "hover"
35 | export const EVENT_RESIZED = "hover"
36 |
37 | export class Waveform extends EventEmitter {
38 | readonly DEFAULT_MAX_OPACITY = DEFAULT_MAX_OPACITY
39 | readonly DEFAULT_MIN_OPACITY = DEFAULT_MIN_OPACITY
40 | readonly WAVE_FOCUS = WAVE_FOCUS
41 | readonly WAVE = WAVE
42 | readonly WAVE_ACTIVE = WAVE_ACTIVE
43 | readonly WAVE_SELECTED = WAVE_SELECTED
44 | readonly GUTTER = GUTTER
45 | readonly GUTTER_ACTIVE = GUTTER_ACTIVE
46 | readonly GUTTER_SELECTED = GUTTER_SELECTED
47 | readonly REFLECTION = REFLECTION
48 | readonly REFLECTION_ACTIVE = REFLECTION_ACTIVE
49 | readonly EVENT_READY = EVENT_READY
50 | readonly EVENT_CLICK = EVENT_CLICK
51 | readonly EVENT_HOVER = EVENT_HOVER
52 | readonly EVENT_RESIZED = EVENT_RESIZED
53 | private container: HTMLElement
54 | private canvas: HTMLCanvasElement
55 | private data: number[] = []
56 | private outerColor = 'transparent'
57 | private reflection = 0
58 | private interpolate = true
59 | private bindResize = false
60 | private fadeOpacity = 0.5
61 | private wavesCollection: number[] = []
62 | private context: CanvasRenderingContext2D
63 | private width = 0
64 | private height = 0
65 | private waveWidth = 2;
66 | private gutterWidth = 1;
67 | private waveOffset = 0;
68 | private reflectionHeight = 0;
69 | private waveHeight = 0;
70 | private colors: { [key: string]: (string | CanvasGradient) } = {};
71 | private active = -1;
72 | private clickPercent = 0;
73 | private selected = -1;
74 | private isPlaying = false;
75 | private hasStartedPlaying = false;
76 | private trackLength = 0;
77 | constructor(options: WaveformOptions) {
78 | super()
79 | Object.assign(this, options);
80 | if (!this.canvas) {
81 | if (this.container) {
82 | this.spawnCanvas(options.width || this.container.clientWidth, options.height || this.container.clientHeight);
83 | this.width = parseInt(this.context.canvas.width.toString(), 10);
84 | this.height = parseInt(this.context.canvas.height.toString(), 10);
85 | } else {
86 | throw 'Either canvas or container option must be passed';
87 | }
88 | }
89 |
90 | this.fadeOpacity = this.fadeOpacity || this.DEFAULT_MAX_OPACITY;
91 | if (isNaN(this.fadeOpacity)) {
92 | throw new Error('Fade Opacity Can Only Be A Number');
93 | } else if (this.fadeOpacity < this.DEFAULT_MIN_OPACITY || this.fadeOpacity > this.DEFAULT_MAX_OPACITY) {
94 | throw new Error("Fade Opacity Can Only Be A Number Between " + this.DEFAULT_MIN_OPACITY + " and " + this.DEFAULT_MAX_OPACITY);
95 | }
96 |
97 | this.initialize();
98 | }
99 |
100 | private spawnCanvas(width: number, height: number) {
101 | this.canvas = document.createElement("canvas");
102 | this.container.appendChild(this.canvas);
103 | this.canvas.width = width;
104 | this.canvas.height = height;
105 | this.context = this.canvas.getContext('2d');
106 | };
107 |
108 | private initialize() {
109 | this.updateHeight();
110 | this.setColors();
111 | this.bindEventHandlers();
112 | this.cache();
113 | this.redraw();
114 | if (this.bindResize === true) {
115 | this.bindContainerResize();
116 | }
117 | this.fireEvent(this.EVENT_READY);
118 | };
119 |
120 | private updateHeight() {
121 | this.waveOffset = Math.round(this.height - (this.height * this.reflection));
122 | this.reflectionHeight = Math.round(this.height - this.waveOffset);
123 | this.waveHeight = this.height - this.reflectionHeight;
124 | };
125 |
126 | private setColors() {
127 | this.setColor(this.WAVE_FOCUS, '#333333');
128 | this.setGradient(this.WAVE, [{ color: '#666666', offset: 0 }, { color: '#868686', offset: 1 }]);
129 | this.setGradient(this.WAVE_ACTIVE, [{ color: '#FF3300', offset: 0 }, { color: '#FF5100', offset: 1 }]);
130 | this.setGradient(this.WAVE_SELECTED, [{ color: '#993016', offset: 0 }, { color: '#973C15', offset: 1 }]);
131 | this.setGradient(this.GUTTER, [{ color: '#6B6B6B', offset: 0 }, { color: '#c9c9c9', offset: 1 }]);
132 | this.setGradient(this.GUTTER_ACTIVE, [{ color: '#FF3704', offset: 0 }, { color: '#FF8F63', offset: 1 }]);
133 | this.setGradient(this.GUTTER_SELECTED, [{ color: '#9A371E', offset: 0 }, { color: '#CE9E8A', offset: 1 }]);
134 | this.setColor(this.REFLECTION, '#999999');
135 | this.setColor(this.REFLECTION_ACTIVE, '#FFC0A0');
136 | }
137 |
138 | private setColor(name: string, color: string) {
139 | this.colors[name] = color;
140 | }
141 |
142 | private setGradient(name: string, colorObjs: { color: string, offset: number }[]) {
143 | let gradient: CanvasGradient, i: number;
144 | gradient = this.context.createLinearGradient(0, this.waveOffset, 0, 0);
145 | i = 0;
146 | while (i < colorObjs.length) {
147 | gradient.addColorStop(colorObjs[i].offset, colorObjs[i].color);
148 | i += 1;
149 | }
150 | this.colors[name] = gradient;
151 | };
152 |
153 | private getMouseClickPosition(evt: MouseEvent) {
154 | let canvas: HTMLCanvasElement, rect: DOMRect, x: number, y: number;
155 | canvas = this.canvas;
156 | rect = canvas.getBoundingClientRect();
157 | x = Math.round((evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width);
158 | y = Math.round((evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height);
159 | return [x, y];
160 | };
161 |
162 | private fireEvent(name: string, ...data: any[]) {
163 | this.trigger(name, data);
164 | };
165 |
166 | private bindEventHandlers() {
167 | this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
168 | this.canvas.addEventListener('mousemove', this.onMouseOver.bind(this));
169 | this.canvas.addEventListener('mouseout', this.onMouseOut.bind(this));
170 | };
171 |
172 | private onMouseOut(e: MouseEvent) {
173 | this.selected = -1;
174 | this.redraw();
175 | };
176 |
177 | private onMouseOver(e: MouseEvent) {
178 | let
179 | aPos: number[],//coordinate in [x,y] format
180 | mousePosTrackTime: number,
181 | waveClicked: number,
182 | x: number;
183 | if (this.hasStartedPlaying === true && this.isPaused() === true) {
184 | return true;
185 | }
186 | aPos = this.getMouseClickPosition(e);
187 | x = aPos[0];
188 | waveClicked = this.getWaveClicked(x);
189 | mousePosTrackTime = this.getMousePosTrackTime(x);
190 | this.fireEvent(this.EVENT_HOVER, mousePosTrackTime, waveClicked);
191 | this.selected = waveClicked;
192 | this.redraw();
193 | };
194 |
195 | private onMouseDown(e: MouseEvent) {
196 | let aPos: number[],//coordinate in [x,y] format
197 | x: number;
198 | aPos = this.getMouseClickPosition(e);
199 | x = aPos[0];
200 | this.clickPercent = x / this.width;
201 | this.fireEvent(this.EVENT_CLICK, this.clickPercent * 100);
202 | this.active = this.calcPercent();
203 | this.redraw();
204 | };
205 |
206 | private bindContainerResize() {
207 | window.addEventListener("resize", () => {
208 | return () => {
209 | let iContWidth: number;
210 | iContWidth = this.container.clientWidth;
211 | this.update({
212 | width: iContWidth
213 | });
214 | this.redraw();
215 | return this.trigger(this.EVENT_RESIZED, [iContWidth]);
216 | };
217 | });
218 | };
219 |
220 |
221 | private setPlaying(val = true) {
222 | this.isPlaying = val;
223 | };
224 |
225 | private setPaused() {
226 | this.setPlaying(false);
227 | };
228 |
229 | isPaused() {
230 | return this.active > 0 && this.isPlaying === false;
231 | };
232 |
233 | play(perct: number) {
234 | this.playProgress(perct);
235 | };
236 |
237 | pause() {
238 | this.setPaused();
239 | console.log("is paused is ", this.isPaused());
240 | };
241 |
242 | playProgress(perct: number) {
243 | let iActive: number;
244 | if (this.hasStartedPlaying === null) {
245 | this.hasStartedPlaying = true;
246 | }
247 | if (this.isPlaying === false) {
248 | this.setPlaying(true);
249 | }
250 | iActive = Math.round((perct / 100) * this.wavesCollection.length);
251 | this.active = iActive;
252 | this.redraw();
253 | };
254 |
255 | private calcPercent() {
256 | return Math.round(this.clickPercent * this.width / (this.waveWidth + this.gutterWidth));
257 | };
258 |
259 | private getWaveClicked(x: number) {
260 | let fReturn: number, waveClicked: number;
261 | waveClicked = Math.round(x / (this.waveWidth + this.gutterWidth));
262 | fReturn = 0;
263 | if (waveClicked > this.wavesCollection.length) {
264 | fReturn = this.wavesCollection.length;
265 | } else if (waveClicked < 0) {
266 | fReturn = 0;
267 | } else {
268 | fReturn = waveClicked;
269 | }
270 | return fReturn;
271 | };
272 |
273 | private getMousePosTrackTime(x: number) {
274 | let fReturn: number, mousePosTrackTime: number;
275 | mousePosTrackTime = this.trackLength / this.wavesCollection.length * this.getWaveClicked(x);
276 | fReturn = 0;
277 | if (mousePosTrackTime > this.trackLength) {
278 | fReturn = this.trackLength;
279 | } else if (mousePosTrackTime < 0) {
280 | fReturn = 0;
281 | } else {
282 | fReturn = mousePosTrackTime;
283 | }
284 | return fReturn;
285 | };
286 |
287 | private redraw() {
288 | requestAnimationFrame(this.render.bind(this));
289 | };
290 |
291 | private render() {
292 | let d: number, dNext: number, gutterX: number, i: number, j: number, len: number, ref: number[], reflectionHeight: number, results: number[], t: number, xPos: number, yPos: number;
293 | i = 0;
294 | ref = this.wavesCollection;
295 | t = this.width / this.data.length;
296 | xPos = 0;
297 | yPos = this.waveOffset;
298 | this.clear();
299 | j = 0;
300 | len = ref.length;
301 | results = [];
302 | while (j < len) {
303 | d = ref[j];
304 | dNext = ref[j + 1];
305 |
306 | /*
307 | Draw the wave here
308 | */
309 | if (this.selected > 0 && (this.selected <= j && j < this.active) || (this.selected > j && j >= this.active)) {
310 | this.context.fillStyle = this.colors[this.WAVE_SELECTED];
311 | } else if (this.active > j) {
312 | this.context.fillStyle = this.colors[this.WAVE_ACTIVE];
313 | } else {
314 | this.context.fillStyle = this.colors[this.WAVE_FOCUS];
315 | }
316 |
317 | this.context.fillRect(xPos, yPos, this.waveWidth, d);
318 |
319 | /*
320 | draw the gutter
321 | */
322 | if (this.selected > 0 && (this.selected <= j && j < this.active) || (this.selected > j && j >= this.active)) {
323 | this.context.fillStyle = this.colors[this.GUTTER_SELECTED];
324 | } else if (this.active > j) {
325 | this.context.fillStyle = this.colors[this.GUTTER_ACTIVE];
326 | } else {
327 | this.context.fillStyle = this.colors[this.GUTTER];
328 | }
329 | gutterX = Math.max(d, dNext);
330 | this.context.fillRect(xPos + this.waveWidth, yPos, this.gutterWidth, gutterX);
331 |
332 | /*
333 | draw the reflection
334 | */
335 | if (this.reflection > 0) {
336 | reflectionHeight = Math.abs(d) / (1 - this.reflection) * this.reflection;
337 | if (this.active > i) {
338 | this.context.fillStyle = this.colors[this.REFLECTION_ACTIVE];
339 | } else {
340 | this.context.fillStyle = this.colors[this.REFLECTION];
341 | }
342 | this.context.fillRect(xPos, yPos, this.waveWidth, reflectionHeight);
343 | }
344 | xPos += this.waveWidth + this.gutterWidth;
345 | results.push(j++);
346 | }
347 | return results;
348 | };
349 |
350 | private clear() {
351 | this.context.fillStyle = this.outerColor;
352 | this.context.clearRect(0, 0, this.width, this.height);
353 | return this.context.fillRect(0, 0, this.width, this.height);
354 | };
355 |
356 |
357 | /*
358 | Data related codes
359 | */
360 |
361 | private setData(data: number[]) {
362 | return this.data = data;
363 | };
364 |
365 | private getData() {
366 | return this.data;
367 | };
368 |
369 | private setDataInterpolated(data: number[]) {
370 | return this.setData(this.interpolateArray(data, this.width));
371 | };
372 |
373 | private setDataCropped(data: number[]) {
374 | return this.setData(this.expandArray(data, this.width));
375 | };
376 |
377 | private linearInterpolate(before: number, after: number, atPoint: number) {
378 | return before + (after - before) * atPoint;
379 | };
380 |
381 | private expandArray(data: number[], limit: number, defaultValue = 0) {
382 | let i: number, j: number, newData: number[] = [], ref: number;
383 | if (defaultValue === null) {
384 | defaultValue = 0;
385 | }
386 | if (data.length > limit) {
387 | newData = data.slice(data.length - limit, data.length);
388 | } else {
389 | i = j = 0;
390 | ref = limit - 1;
391 | while ((0 <= ref ? j <= ref : j >= ref)) {
392 | newData[i] = data[i] || defaultValue;
393 | i = (0 <= ref ? ++j : --j);
394 | }
395 | }
396 | return newData;
397 | };
398 |
399 | private interpolateArray(data: number[], fitCount: number) {
400 | let after: number, atPoint: number, before: number, i: number, newData: number[] = [], springFactor: number, tmp: number;
401 | springFactor = (data.length - 1) / (fitCount - 1);
402 | newData[0] = data[0];
403 | i = 1;
404 | while (i < fitCount - 1) {
405 | tmp = i * springFactor;
406 | before = Math.floor(tmp);
407 | after = Math.ceil(tmp);
408 | atPoint = tmp - before;
409 | newData[i] = this.linearInterpolate(data[before], data[after], atPoint);
410 | i++;
411 | }
412 | newData[fitCount - 1] = data[data.length - 1];
413 | return newData;
414 | };
415 |
416 | private putDataIntoWaveBlock() {
417 | let data: number[], fAbsValue: number, fAverage: number, fWavePoint: number, i: number, iWaveBlock: number, iWaveCount: number, j: number, key: number, newDataBlocks: number[], sum: number;
418 | iWaveBlock = this.waveWidth + this.gutterWidth;
419 | data = this.getData();
420 | newDataBlocks = [];
421 | iWaveCount = Math.ceil(data.length / iWaveBlock);
422 | i = 0;
423 | while (i < iWaveCount) {
424 | sum = 0;
425 | j = 0;
426 | while (j < iWaveBlock) {
427 | key = (i * iWaveBlock) + j;
428 | sum += data[key];
429 | j++;
430 | }
431 | fAverage = sum / iWaveBlock;
432 | fAbsValue = fAverage * this.waveHeight;
433 | fWavePoint = Math.floor(-Math.abs(fAbsValue));
434 | newDataBlocks.push(fWavePoint);
435 | i++;
436 | }
437 | return newDataBlocks;
438 | };
439 |
440 | private cache() {
441 | if (this.interpolate === false) {
442 | this.setDataCropped(this.data);
443 | } else {
444 | this.setDataInterpolated(this.data);
445 | }
446 | this.wavesCollection = this.putDataIntoWaveBlock();
447 | };
448 |
449 |
450 | /*
451 | Data update details here
452 | */
453 |
454 | private update(options: WaveformOptions) {
455 | if (options) {
456 | if (options.gutterWidth) {
457 | this.gutterWidth = options.gutterWidth;
458 | }
459 | if (options.waveWidth) {
460 | this.waveWidth = options.waveWidth;
461 | }
462 | if (options.width) {
463 | this.width = options.width;
464 | this.canvas.width = this.width;
465 | }
466 | if (options.height) {
467 | this.height = options.height;
468 | this.canvas.height = this.height;
469 | }
470 | if (options.reflection === 0 || options.reflection) {
471 | this.reflection = options.reflection;
472 | }
473 | if (options.interpolate) {
474 | this.interpolate = options.interpolate;
475 | }
476 |
477 | /*
478 | Re-calculate the wave block formations once one of the following is altered
479 | */
480 | if (options.gutterWidth || options.waveWidth || options.width || options.height || options.reflection || options.interpolate || options.reflection === 0) {
481 | this.cache();
482 | }
483 | if (options.height || options.reflection || options.reflection === 0) {
484 | this.updateHeight();
485 | }
486 | }
487 | this.redraw();
488 | };
489 |
490 |
491 | }
492 |
--------------------------------------------------------------------------------
${data.username}
259 | ${data.message}
260 |