-
Notifications
You must be signed in to change notification settings - Fork 10
/
App.js
80 lines (67 loc) · 1.68 KB
/
App.js
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
import { $, spyOnHttp, triggerEvent, onUrlChange } from './util';
import SearchEngine from './SearchEngine';
import ControlsView from './ControlsView';
import MarksView from './MarksView';
import {
VIDEO_ELEMENT_CLASS,
SUBTITLES_BUTTON_CLASS
} from './constants';
export default class App {
constructor() {
spyOnHttp(this.httpSpy);
onUrlChange(this.removeViews);
$.on(document, 'DOMContentLoaded', this.init);
}
init = () => {
this.$videoElement = $(VIDEO_ELEMENT_CLASS);
}
createViews = () => {
this.resultView = new MarksView({
onTimeChange: this.goToTime
});
this.controlsView = new ControlsView({
onSearchQueryChange: this.onSearchQueryChange,
onClose: this.clear
});
}
removeViews = () => {
if (this.controlsView) {
this.controlsView.remove();
this.controlsView = null;
this.resultView.remove();
this.resultView = null;
}
}
onSearchQueryChange = (query) => {
this.clear();
if (query.length < 3) { return; }
const occurrences = this.searchEngine.search(query);
this.resultView.render(occurrences);
}
clear = () => {
this.resultView.clear();
}
/**
* @param {number} time
*/
goToTime = (time) => {
this.$videoElement.currentTime = time - 1;
}
/**
* @param {string} response - text that represents subtitles
*/
handleSubtitlesLoad = (response) => {
this.removeViews();
this.searchEngine = new SearchEngine(response);
this.createViews();
}
/**
* @param {XMLHttpRequest} xhr
*/
httpSpy = (xhr) => {
if (!xhr.responseURL.includes('timedtext')) {
return;
}
this.handleSubtitlesLoad(xhr.responseText);
}
}