tune/template.html at master · malceore/tune · GitHub

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html>
<head>
	<title>Tune v0.8</title>
</head>
<body style="border-width:0px; color:grey;">
	<nav style="width:100%; padding:1em;"><h3>Tune</h3></nav>
	<div id="display" style="width:100%; height:700px; text-align:center; margin:50px;">
	    <div style="display:inline-block; padding:1em;">
		<div id="player" style="width:640px; height:390px;"></div>
		<br><br>
		Video Url: <input type="text" id="textbox">
		<input type="submit" value="Play" onclick="textboxPlay()">
		<input type="submit" value="Queue" onclick="textboxQueue()">
	    </div>
	</div>
	<footer style="width:100%; padding:1em; text-align:center; ">Tune @ 2019</footer>
</body>
<script>
      // https://stackoverflow.com/questions/5957916/how-to-handle-youtube-video-events-started-finished-etc-in-uiwebview-ios
      var WS;
      let VIDEOTIME = -1;
      let STATE = "PAUSED";
      const TEXTBOX = document.getElementById("textbox");
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var PLAYER;

      function onYouTubeIframeAPIReady() {
        PLAYER = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'dQw4w9WgXcQ',
          playerVars: {rel: 0, showinfo: 0, ecver: 2},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // After everything is loaded we configure the interval, websocket and such here.
      function onPlayerReady(event) {
        WS = new WebSocket("ws://" + window.location.hostname + ":3434/ws");
        console.log("Connecting to server..");
        WS.onmessage = function (e) {onWebsocketEvent(e.data);}
	setInterval(updateTimeChanges, 1000);
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
	    websocketEvent("PLAYING", 0);
        } else if (event.data == YT.PlayerState.PAUSED) {
	    websocketEvent("PAUSED", 0);
        } else if (event.data == YT.PlayerState.ENDED) {
	    websocketEvent("STOPPED", 0);
	    STATE="STOPPED";
        }
      }

      function onWebsocketEvent(data){
	    console.log("Received from websocket::" + data);
	    var msg = JSON.parse(data);
	    if (msg.Event == "PAUSED"){
		PLAYER.pauseVideo();
		STATE="PAUSE";

	    }else if (msg.Event == "HELLO"){
		PLAYER.loadVideoByUrl(msg.URL);
                PLAYER.playVideo();
		let duration = PLAYER.getDuration();
		PLAYER.seekTo(msg.value+1, true);
		STATE="PLAYING";

	    }else if (msg.Event == "PLAYING"){
		PLAYER.playVideo();
		STATE="PLAYING";

	    }else if (msg.Event == "UPDATE"){
		var duration = PLAYER.getDuration();
		PLAYER.seekTo(msg.Value, true);

	    }else if (msg.Event == "VIDEO"){
		console.log("VIDEO RECEIVED!");
		PLAYER.loadVideoByUrl(msg.URL);
		PLAYER.playVideo();
		STATE="PLAYING";

	    }else if (msg.Event == "SYNC"){
		pushTimeChanges(PLAYER.getCurrentTime());
	    }
      }

      // When you clikc submit, this takes value from text box to change the video.
      function textboxPlay(){
	    var videoCode=(TEXTBOX.value).split('?')[1].slice(2);
	    let URL = "http://www.youtube.com/v/" + videoCode + "?version=3";
	    //console.log(URL);
	    websocketEvent("VIDEO", URL);
	    PLAYER.loadVideoByUrl(URL);
	    TEXTBOX.value = "";
      }

      // When you clikc submit, this takes value from text box to change the video.
      function textboxQueue(){
	    var videoCode=(TEXTBOX.value).split('?')[1].slice(2);
	    let URL = "http://www.youtube.com/v/" + videoCode + "?version=3";
	    websocketEvent("QUEUE", URL);
	    TEXTBOX.value = "";
      }

      function updateTimeChanges(){
	    if(STATE=="PLAYING"){
		    VIDEOTIME++;
	            var newTime = PLAYER.getCurrentTime();
		    if (Math.floor(VIDEOTIME) < Math.floor(newTime-1) || Math.floor(VIDEOTIME) > Math.floor(newTime+1) ){
	 	         console.log("Seek must have occured! : " + Math.floor(VIDEOTIME) + "!=" + Math.floor(newTime));
			 pushTimeChanges(newTime);
		    }
	    }
      }

      function pushTimeChanges(newTime){
            VIDEOTIME=newTime+1;
	    websocketEvent("UPDATE", VIDEOTIME);
      }

      function websocketEvent(event, input){
	    // hokey code, we check wether it's a float or a string because Golang
	    //	    does not have an easy memory safe generic to my understanding.
	    let value = 0;
	    let url = "";
	    if(isNaN(input)){
		  url = input;
	    } else {
		  value = input;
	    }
	    //console.log("LOG::" + event + " " + value);
	    var msg = {
    		Event: event,
    		Value: value,
		URL: url,
    		Date: Date.now()
  	    };
	    WS.send(JSON.stringify(msg));
      }

</script>
</html>