"); 58 | 59 | s.on("title", (t: string) => { 60 | if (t !== undefined && t !== "") { 61 | this.$content.append(`setting title to: ${t}
`); 62 | document.title = t; 63 | } 64 | }); 65 | 66 | s.on("toggle-server-log", () => { 67 | this.f1Handler(); 68 | }); 69 | 70 | s.on("toggle-fullscreen", () => { 71 | this.f11Handler(); 72 | }); 73 | 74 | s.on("get-server-log", () => { 75 | s.emit("server-log", { log: this.serverLog }); 76 | }); 77 | 78 | s.emit("toby-version", { 79 | title: pkgJSON.title, 80 | version: `${titleCase(pkgJSON.name)}-${pkgJSON.version}` 81 | }); 82 | }); 83 | 84 | this.snapToPlayerCodeBlock = `var actualCode = '(' + function() { 85 | snapToPlayer(); 86 | } + ')();'; 87 | var script = document.createElement('script'); 88 | script.textContent = actualCode; 89 | (document.head||document.documentElement).appendChild(script); 90 | script.parentNode.removeChild(script); 91 | `; 92 | 93 | this.redirectOutput(this.node.stdout); 94 | this.redirectOutput(this.node.stderr); 95 | 96 | let checkServerRunning = setInterval(() => { 97 | request(AppConfig.serverURL, (error, response, body) => { 98 | if (!error && response.statusCode === 200) { 99 | this.$webview.attr("src", AppConfig.serverURL); 100 | $("#loading").css("display", "none"); 101 | this.$webview.css("display", "block"); 102 | clearInterval(checkServerRunning); 103 | } 104 | }); 105 | }, 1000); 106 | this.setup(); 107 | } 108 | private setup(): void { 109 | key("f1", this.f1Handler); 110 | key("f11", this.f11Handler); 111 | 112 | if (navigator.userAgent.indexOf("node-webkit") > -1) { 113 | let win = nw.Window.get(); 114 | 115 | win.on("loaded", () => { 116 | // win.showDevTools(); 117 | win.show(); 118 | }); 119 | 120 | win.on("restore", () => { 121 | this.webview.executeScript({ code: this.snapToPlayerCodeBlock }); 122 | }); 123 | 124 | win.on("new-win-policy", (_frame, _url, policy) => { 125 | policy.ignore(); 126 | }); 127 | 128 | win.on("close", () => { 129 | win.hide(); 130 | 131 | this.$webview.remove(); 132 | 133 | $.ajax({ 134 | type: "POST", 135 | url: "/api/app/close", 136 | async: false 137 | }); 138 | 139 | win.close(true); 140 | }); 141 | 142 | this.webview.addEventListener( 143 | "newwindow", 144 | this.newWindowHandler.bind(this) 145 | ); 146 | } 147 | 148 | window.addEventListener("resize", e => { 149 | this.resizeContent(); 150 | }); 151 | 152 | this.resizeContent(); 153 | 154 | if ( 155 | navigator.userAgent.indexOf("node-webkit") > -1 || 156 | navigator.userAgent.indexOf("Electron") > -1 157 | ) { 158 | this.webview.addEventListener("permissionrequest", (e: any) => { 159 | if (e.permission === "fullscreen") { 160 | e.request.allow(); 161 | } 162 | }); 163 | } 164 | 165 | if (navigator.userAgent.indexOf("Electron") > -1) { 166 | this.webview.addEventListener( 167 | "new-window", 168 | this.newWindowHandler.bind(this) 169 | ); 170 | 171 | window.addEventListener("beforeunload", () => { 172 | $.ajax({ 173 | type: "POST", 174 | url: "/api/app/close", 175 | async: false 176 | }); 177 | }); 178 | 179 | // this.webview.addEventListener("dom-ready", () => { 180 | // this.webview.openDevTools(); 181 | // }); 182 | 183 | let browserWindow = require("electron").remote.getCurrentWindow(); 184 | 185 | this.webview.addEventListener("enter-html-full-screen", () => { 186 | if (!browserWindow.isFullScreen()) { 187 | browserWindow.setFullScreen(true); 188 | } 189 | }); 190 | 191 | browserWindow.on("leave-full-screen", () => { 192 | this.webview.executeJavaScript(this.snapToPlayerCodeBlock); 193 | }); 194 | } 195 | } 196 | private resizeContent(): void { 197 | this.$content.css("width", window.innerWidth - 20); 198 | this.$content.css("height", window.innerHeight - 20); 199 | } 200 | private strip(s: string): string { 201 | // regex from: http://stackoverflow.com/a/29497680/170217 202 | return s.replace( 203 | /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, 204 | "" 205 | ); 206 | } 207 | private redirectOutput(x: stream.Readable): void { 208 | let lineBuffer = ""; 209 | 210 | x.on("data", data => { 211 | lineBuffer += data.toString(); 212 | let lines = lineBuffer.split("\n"); 213 | 214 | _.forEach(lines, l => { 215 | if (l !== "") { 216 | // console.log(this.strip(l)); 217 | let strippedData = this.strip(l); 218 | this.$content.append(`${strippedData}
`); 219 | this.serverLog.push(strippedData); 220 | } 221 | }); 222 | 223 | lineBuffer = lines[lines.length - 1]; 224 | }); 225 | } 226 | private newWindowHandler(e: any): void { 227 | // Looks like we can differentiate between clicking the YouTube icon 228 | // in the player where we want it to open an external browser and clicking 229 | // a suggested video link after a video is played. 230 | // 231 | // When clicking the YouTube link "time_continue" is present in the url. 232 | // {url: "https://www.youtube.com/watch?time_continue=1&v=ctrZdbExVrk"} 233 | // 234 | // When clicking on a suggested video the link is just an ordinary YouTube 235 | // video link with video ID. 236 | // {url: "https://www.youtube.com/watch?v=4nYMdMtGsPo"} 237 | 238 | // NOTE: What I said above is only partially true, the video has to start 239 | // playing for the time_continue to be present in the URL. You cannot 240 | // click the YouTube link and have it open an external browser if the 241 | // video has not started to play. 242 | 243 | e.preventDefault(); 244 | 245 | const url = e.targetUrl || e.url; 246 | 247 | if (url.indexOf("?v=") > -1) { 248 | // the id extraction is almost verbatim from: 249 | // http://stackoverflow.com/a/3452617/170217 250 | let video_id = url.split("v=")[1]; 251 | let ampersandPosition = video_id.indexOf("&"); 252 | if (ampersandPosition !== -1) { 253 | video_id = video_id.substring(0, ampersandPosition); 254 | } 255 | // ------------------------------------------ 256 | 257 | this.$content.append(`emitting: play-video for ${video_id}
`); 258 | this.socket.emit("play-video", video_id); 259 | } else { 260 | if (navigator.userAgent.indexOf("node-webkit") > -1) { 261 | nw.Shell.openExternal(url); 262 | } else if (navigator.userAgent.indexOf("Electron") > -1) { 263 | const { shell } = require("electron"); 264 | shell.openExternal(url); 265 | } 266 | } 267 | } 268 | private f1Handler(): void { 269 | let $content = $("#content"), 270 | $webview = $("#webview"); 271 | 272 | if ($content.css("visibility") === "hidden") { 273 | $content.css("visibility", "visible"); 274 | $webview.css("visibility", "hidden"); 275 | } else { 276 | $content.css("visibility", "hidden"); 277 | $webview.css("visibility", "visible"); 278 | } 279 | } 280 | private f11Handler(): void { 281 | if (navigator.userAgent.indexOf("node-webkit") > -1) { 282 | let win = nw.Window.get(); 283 | 284 | if (win.isFullscreen) { 285 | win.leaveFullscreen(); 286 | } else { 287 | win.enterFullscreen(); 288 | } 289 | } else if (navigator.userAgent.indexOf("Electron") > -1) { 290 | const browserWindow = require("electron").remote.getCurrentWindow(); 291 | 292 | if (browserWindow.isFullScreen()) { 293 | browserWindow.setFullScreen(false); 294 | this.webview.executeJavaScript(this.snapToPlayerCodeBlock); 295 | } else { 296 | browserWindow.setFullScreen(true); 297 | } 298 | } 299 | } 300 | } 301 | 302 | $(document).ready(function() { 303 | Platform.bootstrap(); 304 | }); 305 | -------------------------------------------------------------------------------- /src/react-components/command-input-ui.tsx: -------------------------------------------------------------------------------- 1 | // command-input-ui.tsx - The command line input component for Toby 2 | // Author(s): Frank Hale
120 | >
129 |
130 | );
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/src/react-components/dropdown-ui.tsx:
--------------------------------------------------------------------------------
1 | // dropdown-ui.tsx
2 | // Author(s): Frank Hale
61 | {this.state.log.map((l, i) => {
62 | return
65 | );
66 | }
67 |
68 | return null;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/react-components/toby-ui.tsx:
--------------------------------------------------------------------------------
1 | // toby-ui.tsx - Front end code React component for Toby
2 | // Author(s): Frank Hale {l}
;
63 | })}
64 |
451 |
466 | );
467 | }
468 | }
469 |
470 | $(document).ready(() => {
471 | ReactDOM.render({view}
456 | {this.state.info}
;
57 | }
58 |
59 | return null;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/react-components/video-list-grid-ui.tsx:
--------------------------------------------------------------------------------
1 | // video-list-grid-ui.tsx - A video list grid React component for Toby
2 | // Author(s): Frank Hale
75 | {this.state.data.map((d, i) => {
76 | return (
77 | 
84 | );
85 | })}
86 |
87 | );
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/react-components/video-list-ui.tsx:
--------------------------------------------------------------------------------
1 | // video-list-ui.tsx - A vertical video list React component for Toby
2 | // Author(s): Frank Hale
304 |
305 | {videoResults}
306 |
307 |
308 | );
309 | }
310 | }
311 |
--------------------------------------------------------------------------------
/src/react-components/youtube-ui.tsx:
--------------------------------------------------------------------------------
1 | // youtube-ui.tsx - YouTube player React component for Toby
2 | // Author(s): Frank Hale