-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
128 lines (120 loc) · 3.89 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
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Inter">
</head>
<body>
<h1 id="title"></h1>
<div id="player"></div>
<div id="bar">
-
<span id="playstate">-</span>
<span id="mousemarker">-</span>
</div>
<span id ="time"></span>
<script>
var bar = document.getElementById("bar");
var tag = document.createElement("script");
var playstate = document.getElementById("playstate");
var mousemarker = document.getElementById("mousemarker")
var title = document.getElementById("title")
var timeTag = document.getElementById("time")
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
bar.addEventListener("mouseenter",(e)=>{
mousemarker.style.visibility = "visible";
})
bar.addEventListener("mouseleave",(e)=>{
mousemarker.style.visibility = "hidden";
})
bar.addEventListener("mousemove",(e)=>{
mousemarker.style.left = e.clientX - bar.getBoundingClientRect().left-3 + "px"
})
bar.addEventListener("click",(e)=>{
console.log(e)
})
fetch("./sentence_translations.json")
.then((res) => res.json())
.then((json) => {
for (let s of json) {
let m = document.createElement("div");
m.classList.add("marker");
m.textContent = "s";
let dur = s.time_range[1] - s.time_range[0];
let l =
(s.time_range[0] / json[json.length - 1].time_range[1]) * 100 +
"%";
m.style.left = l;
m.style.width =
(dur / json[json.length - 1].time_range[1]) * 100 + "%";
m.dataset.original = s.input;
document.getElementById("bar").appendChild(m);
}
})
.catch((e) => console.error(e));
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("player", {
height: "360",
width: "640",
videoId: "xJwkj25fFK4",
playerVars: {
controls: 0,
},
events: {
onReady: onPlayerReady,
//onStateChange: onPlayerStateChange,
},
});
}
function onPlayerReady(event) {
title.textContent = player.videoTitle;
//console.log(player.videoTitle)
let dur = player.getDuration();
console.log(dur)
let durminutes = Math.floor(dur/60)
let durseconds = Math.floor(dur - durminutes * 60);
setInterval(() => {
let time = player.getCurrentTime();
let pos = time / dur;
let minutes = Math.floor(time/60);
let seconds = Math.floor(time - minutes * 60);
timeTag.innerText = minutes + ":" + seconds + "/" + durminutes + ":" + durseconds
playstate.style.left = pos * 100 + "%";
addClosestClass(playstate)
},100);
}
// var done = false;
// function onPlayerStateChange(event) {
// if (event.data == YT.PlayerState.PLAYING && !done) {
// done = true;
// }
// }
// function onStateChange(event) {
// console.log(event);
// }
// function stopVideo() {
// player.stopVideo();
// }
function addClosestClass(original) {
var bbox = original.getBoundingClientRect()
var closestMarker = null;
var minDistanceX = Number.MAX_SAFE_INTEGER;
document.querySelectorAll('.marker').forEach(function(marker) {
var markerB = marker.getBoundingClientRect()
if (bbox.left > markerB.left && bbox.right < markerB.right){
closestMarker = marker;
closestMarker.classList.add('chover');
}
});
document.querySelectorAll('.marker').forEach(function(marker) {
if (marker !== closestMarker) {
marker.classList.remove('chover');
}
});
}
</script>
</body>
</html>