Beta release of YT extension (#9)

* Add mostly local resource loading and basic react player loading
* Button and extract handlers, time bordering, debug
* Update .gitignore
* Load YT scripts async, speed slider
* Fix spurious CORS error, prep fullscreen handler
* Implement basic new window timestamp syncingWIP
* Add extract sync, remove unneceesary header libs
* Implement extracts, window close on nav and re-open
* Update readme
* Add extract sync on delete, more closely sync with SM parent, add more advanced shortcuts
* Rearrange UI elems, sync more elems, add arrow inputs
* Update yt.htm
* Update README.md
* Update image with new UI

Co-authored-by: Alexis <[email protected]>

Author: pattontim

YouTubeReactExtension/README.md

@@ -5,14 +5,15 @@ SuperMemo YouTube extract performance improvements and extensions.
 
 ## Description
 
-Utilize a locally hosted service to remove remote requirements saving up to 500ms per card and utilize the react-player to extend the functionality of incremental video in SM-18.
+Fixes SuperMemo memleaks and slowdowns with a popup window. Utilize a locally hosted service to remove remote requirements saving up to 500ms per card and utilize the react-player to extend the functionality of incremental video in SM-18. I now consider this a beta and usable, it won't overwrite your cards under expected operation. However, I recommend that you [backup your collection](https://www.supermemo.wiki/en/supermemo/backup-guide) before starting to use this extension.
+
+![Screenshot](main-screen.png)
 
 ## Getting Started
 
 ### Dependencies
 
 * python2 or 3
-* nodejs + npm installed
 * SuperMemo 18
 * Windows
 
@@ -22,12 +23,6 @@ Utilize a locally hosted service to remove remote requirements saving up to 500m
 
 * Open the server folder in Terminal
 
-* [not neccessary, binaries already provided] Install the react player.
-
-```
-npm install react-player # or yarn add react-player
-```
-
 * Start the server to host resources. Uses port 8000 by default.
 ```
 python -m SimpleHTTPServer
@@ -38,26 +33,60 @@ python3 -m http.server
 
 * backup YouTube.htm in your install SuperMemo/bin folder
 
-* if above succeeds, replace YouTube.htm to your installs SuperMemo/bin folder with the one provided in this ZIP. Or simply replace:				
-```
-sBaseUrl = "http://localhost:8000/yt.htm?"
-```
+* if above succeeds, replace YouTube.htm to your installs SuperMemo/bin folder with the one provided in this ZIP
 
 ## Help
 
-Not currently finished.
+### One of my extract timestamps wiped!?
+
+This can rarely happen if you hold ALT+LEFT or ALT+RIGHT and cycle theough many cards quickly. You may recover the times from the title of the card.
+
+### The Player is too small, out of place, etc..
+
+Adjust top, left, width and height in sep_embed to adjust screen placement.
+
+### Known bugs
+
+- Closing a player with extracts on it and using the Reopen button will result in errors when making even more extracts.
+
+### Differences with vanilla supermemo
+
+- Extract background colour is lost (blue)
+- Clicking fields inserts current time
 
 ## Version History
 
-* 0.1 WIP
+* 0.1
     * Mark/Stop/Start buttons work
     * Loading YouTube videos
     * Loads SM scripts locally
+* 0.2
+    * Nonblocking player and hotkeys
+    * Playback speed slider
+* 0.3 BETA
+    * Bypass MEMLEAK in supermemo
+    * Load external IE window with YT player
+    * Changes reflect back to SM
+    * Extracts and navigation work
+    * Start, Stop, Mark textbox can be clicked to set times
+    * Everything in the UI works
+### Roadmap
+* Title extract verification for timing overwrite error
+* Pleasing layout
+* Window fullscreen
+* Serverside:
+    * Store playback speeds
+    * File-YT proxy for lightning fast plays
+* More shortcuts such as fullscreen, extract setting using keys, etc...
+* Visualize extracts on timeline
+- Enter to OK
+* SupermemoAssistant plugin to re-use player and make a YouTube Jukebox
+* Browser plugin and YouTube player integration
 
 ## License
 
 Inherits license in the root of the project.
 
 ## Acknowledgments
 
-* [SuperMemo yt.htm](https://www.super-memory.com/)
+* [SuperMemo yt.htm](https://www.super-memory.com/)

YouTubeReactExtension/main-screen.png

@@ -11,7 +11,40 @@
 		<input type="text" value="0:00:00" id="resumevideoat" onfocus="this.select();" ondblclick="resetAt('resume');" onchange="this.value = convertDuration2HHMMSS(convertHHMMSS2Duration(this.value));" />
 		<input type="text" value="0:00:00" id="startvideoat" onfocus="this.select();" onchange="this.value = convertDuration2HHMMSS(convertHHMMSS2Duration(this.value)); document.getElementById('imposeboundries').value = 0; updateBorder(this);" ondblclick="resetAt('start');" />
 		<input type="text" value="0:00:00" id="stopvideoat" onfocus="this.select();" onchange="this.value = convertDuration2HHMMSS(convertHHMMSS2Duration(this.value)); document.getElementById('imposeboundries').value = 0; updateBorder(this);" ondblclick="resetAt('stop');" />
+		<div class="ctrlGrp">
+			<textarea id="log" style="width: 100%"></textarea>
+		</div>
 		<script type="text/javascript">
+			            // define a new console
+            var console=(function(oldCons){
+                var oLog = document.getElementById("log");
+                return {
+                    log: function(text){
+                        //oldCons.log(text);
+                        oLog.innerHTML += '[LOG] ' + text + '\n';                    
+                    },
+                    info: function (text) {
+                        //oldCons.info(text);
+                        // Your code
+                        oLog.innerHTML += '[INFO] ' + text + '\n';                    
+                    },
+                    warn: function (text) {
+                        //oldCons.warn(text);
+                        // Your code
+                        oLog.innerHTML += '[WARN] ' + text + '\n';
+                        //alert( '[WARN] ' + text + '\n')                
+                    },
+                    error: function (text) {
+                        //oldCons.error(text);
+                        // Your code
+                        oLog.innerHTML += '[ERROR] ' + text + '\n';                    
+                    }
+                };
+            }(window.console));
+
+            //Then redefine the old console
+            window.console = console;
+
 			var buildUrlString = function() {
 					var urlString = "",
 						oTs = new Date(),
@@ -33,10 +66,31 @@
 
 					return urlString;
 				},
+				sProtocol = 'microsoft-edge',
 				sBaseUrl = "http://localhost:8000/yt.htm?",
+				sBaseHeaderUrl = "http://localhost:8000/yt_header.htm?",
 				sUrlString = buildUrlString();
-				
-			document.location.href = sBaseUrl + sUrlString;
-		</script>
+			
+			/*
+			 * Select one of the following default behaviours
+			 * A) Open in SM window (memory leak)
+			 * B) Open in new IE11 window every time
+			 * [unfinished] C) Open in Edge window  
+			 */
+
+			/*  
+			 *	A.
+			 */
+			//document.location.href = sBaseUrl + sUrlString;
+
+			/*  
+			 *	B.
+			 */
+			document.location.href = sBaseHeaderUrl + sUrlString;
+			
+			/*  
+			 *	C.
+			 will use window.open(sProtocol + ':' + sBaseUrl + sUrlString;
+			 */
     </body>
 </html>