Fix subtitles in fullscreen mode, Added Close button

Readme.md

@@ -13,7 +13,7 @@ The Chrome extension can be installed from [Chrome Web Store](https://chrome.goo
 npm install
 
 # Build JS
-webpack
+./node_modules/.bin/webpack
 ```
 
 ## Deploy a new version

dist/assets/css/style.css

@@ -4,6 +4,7 @@
     height: 100px;
     bottom: 15%;
     color: white;
+    z-index: 1;
 }
 
 .amazon-subtitles-drop-files {
@@ -34,4 +35,19 @@
     background-color: transparent;
     line-height: 1.3;
     font-size: 2vv;
-}
+}
+
+.amazon-subtitles-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    line-height: 1;
+    padding: 3px 10px;
+    z-index: 9999999999;
+}
+
+.amazon-subtitles-close-icon {
+    display: block;
+    font-size: 20px;
+    transform: rotate(45deg);
+}

dist/assets/js/script.js

@@ -104,21 +104,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const FileHandler_1 = __webpack_require__(1);
 const SrtParserHandler_1 = __webpack_require__(2);
 const PlaybackHandler_1 = __webpack_require__(4);
+const CloseHandler_1 = __webpack_require__(6);
 const View_1 = __webpack_require__(5);
-const Utils_1 = __webpack_require__(7);
-const RegisterHandlers_1 = __webpack_require__(8);
+const Utils_1 = __webpack_require__(8);
+const RegisterHandlers_1 = __webpack_require__(9);
 class AmazonPrimeSubtitles {
     onLoad(document) {
         const registerHandlers = new RegisterHandlers_1.RegisterHandlers(document);
         registerHandlers.registerHandler(FileHandler_1.FileHandler.EVENT_NAME, new FileHandler_1.FileHandler(document));
         registerHandlers.registerHandler(SrtParserHandler_1.SrtParserHandler.EVENT_NAME, new SrtParserHandler_1.SrtParserHandler(document));
         registerHandlers.registerHandler(PlaybackHandler_1.PlaybackHandler.EVENT_NAME, new PlaybackHandler_1.PlaybackHandler(document));
+        registerHandlers.registerHandler(CloseHandler_1.CloseHandler.EVENT_NAME, new CloseHandler_1.CloseHandler(document));
         const view = new View_1.View(document);
         view.display();
     }
 }
 const amazonPrimeSubtitles = new AmazonPrimeSubtitles();
-Utils_1.Utils.onReady(amazonPrimeSubtitles.onLoad, document);
+const webPlayerQuery = '.' + View_1.View.WEB_PLAYER_ELEMENT_CLASS;
+Utils_1.Utils.waitForElementExists(webPlayerQuery, amazonPrimeSubtitles.onLoad, [document]);
 
 
 /***/ }),
@@ -130,7 +133,7 @@ Utils_1.Utils.onReady(amazonPrimeSubtitles.onLoad, document);
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileHandler = void 0;
 const SrtParserHandler_1 = __webpack_require__(2);
-const EventWithData_1 = __webpack_require__(6);
+const EventWithData_1 = __webpack_require__(7);
 class FileHandler {
     constructor(document) {
         this.document = document;
@@ -160,7 +163,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SrtParserHandler = void 0;
 const OneSubtitle_1 = __webpack_require__(3);
 const PlaybackHandler_1 = __webpack_require__(4);
-const EventWithData_1 = __webpack_require__(6);
+const EventWithData_1 = __webpack_require__(7);
 class SrtParserHandler {
     constructor(document) {
         this.SECONDS_IN_HOUR = 3600;
@@ -278,21 +281,22 @@ PlaybackHandler.SHOW_INTERVAL = 200;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.View = void 0;
 const FileHandler_1 = __webpack_require__(1);
-const EventWithData_1 = __webpack_require__(6);
+const CloseHandler_1 = __webpack_require__(6);
+const EventWithData_1 = __webpack_require__(7);
 class View {
     constructor(document) {
         this.document = document;
     }
     display() {
         const amazonSubtitlesElement = this.createSubtitlesElement();
-        const webPlayerElemet = this.document.getElementById(View.WEB_PLAYER_ELEMENT_ID);
+        const webPlayerElemet = this.document.getElementsByClassName(View.WEB_PLAYER_ELEMENT_CLASS)[0];
         webPlayerElemet.appendChild(amazonSubtitlesElement);
     }
     createSubtitlesElement() {
         const dropFilesElement = this.createDropFilesElement();
         const subtitlesContentElement = this.createSubtitlesContentEleent();
         const amazonSubtitlesElement = this.document.createElement("div");
-        amazonSubtitlesElement.className = 'amazon-subtitles';
+        amazonSubtitlesElement.className = View.AMAZON_SUBTITLES_CLASS;
         amazonSubtitlesElement.appendChild(dropFilesElement);
         amazonSubtitlesElement.appendChild(subtitlesContentElement);
         return amazonSubtitlesElement;
@@ -301,6 +305,8 @@ class View {
         const dropFilesElement = this.document.createElement("div");
         dropFilesElement.className = 'amazon-subtitles-drop-files';
         dropFilesElement.innerHTML = 'Drag a *.srt File Here<br>';
+        const closeElement = this.createCloseElement();
+        dropFilesElement.appendChild(closeElement);
         const dropFileInputElement = this.document.createElement("input");
         dropFileInputElement.className = 'amazon-subtitles-drop-file-input';
         dropFileInputElement.type = 'file';
@@ -313,15 +319,29 @@ class View {
         dropFilesElement.appendChild(dropFileInputElement);
         return dropFilesElement;
     }
+    createCloseElement() {
+        const closeIconElement = this.document.createElement("span");
+        closeIconElement.className = 'amazon-subtitles-close-icon';
+        closeIconElement.innerHTML = '+';
+        const closeElement = this.document.createElement("div");
+        closeElement.className = 'amazon-subtitles-close';
+        closeElement.appendChild(closeIconElement);
+        closeElement.addEventListener('click', () => {
+            const closeEvent = new EventWithData_1.EventWithData(CloseHandler_1.CloseHandler.EVENT_NAME);
+            this.document.dispatchEvent(closeEvent);
+        });
+        return closeElement;
+    }
     createSubtitlesContentEleent() {
         const subtitlesContentElement = this.document.createElement("div");
         subtitlesContentElement.className = View.SUBTITLES_CONTENT_ELEMENT_CLASS;
         return subtitlesContentElement;
     }
 }
 exports.View = View;
-View.WEB_PLAYER_ELEMENT_ID = 'dv-web-player';
+View.WEB_PLAYER_ELEMENT_CLASS = 'scalingVideoContainer';
 View.SUBTITLES_CONTENT_ELEMENT_CLASS = 'amazon-subtitles-content';
+View.AMAZON_SUBTITLES_CLASS = 'amazon-subtitles';
 
 
 /***/ }),
@@ -330,6 +350,28 @@ View.SUBTITLES_CONTENT_ELEMENT_CLASS = 'amazon-subtitles-content';
 
 "use strict";
 
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseHandler = void 0;
+const View_1 = __webpack_require__(5);
+class CloseHandler {
+    constructor(document) {
+        this.document = document;
+    }
+    handle(event) {
+        const subtitlesContetnElement = this.document.getElementsByClassName(View_1.View.AMAZON_SUBTITLES_CLASS)[0];
+        subtitlesContetnElement.remove();
+    }
+}
+exports.CloseHandler = CloseHandler;
+CloseHandler.EVENT_NAME = 'amazonPrimeSubtitlesClose';
+
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EventWithData = void 0;
 class EventWithData extends Event {
@@ -338,7 +380,7 @@ exports.EventWithData = EventWithData;
 
 
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -356,12 +398,25 @@ class Utils {
             fn(document);
         }
     }
+    static waitForElementExists(selector, callback, attributes) {
+        (function loopSearch() {
+            if (document.querySelector(selector) != null) {
+                callback(...attributes);
+                return;
+            }
+            else {
+                setTimeout(function () {
+                    loopSearch();
+                }, 1000);
+            }
+        })();
+    }
 }
 exports.Utils = Utils;
 
 
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

dist/manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 2,
     "name": "Amazon Prime Video Subtitles",
     "description": "Adding subtitles to Amazon Prime Video",
-    "version": "1.0",
+    "version": "1.1",
     "icons": {
         "128": "assets/images/icon_128.png"
     },

src/AmazonPrimeSubtitles.ts

@@ -1,6 +1,7 @@
 import { FileHandler } from './lib/Handler/FileHandler'
 import { SrtParserHandler } from './lib/Handler/SrtParserHandler'
 import { PlaybackHandler } from './lib/Handler/PlaybackHandler'
+import { CloseHandler } from './lib/Handler/CloseHandler'
 import { View } from './lib/View'
 import { Utils } from './lib/Utils'
 import { RegisterHandlers } from './lib/RegisterHandlers'
@@ -11,11 +12,13 @@ class AmazonPrimeSubtitles {
         registerHandlers.registerHandler(FileHandler.EVENT_NAME, new FileHandler(document));
         registerHandlers.registerHandler(SrtParserHandler.EVENT_NAME, new SrtParserHandler(document));
         registerHandlers.registerHandler(PlaybackHandler.EVENT_NAME, new PlaybackHandler(document));
+        registerHandlers.registerHandler(CloseHandler.EVENT_NAME, new CloseHandler(document));
 
         const view = new View(document);
         view.display()
     }
 }
 
 const amazonPrimeSubtitles = new AmazonPrimeSubtitles()
-Utils.onReady(amazonPrimeSubtitles.onLoad, document)
+const webPlayerQuery = '.'+View.WEB_PLAYER_ELEMENT_CLASS
+Utils.waitForElementExists(webPlayerQuery, amazonPrimeSubtitles.onLoad, [document])

src/lib/Handler/CloseHandler.ts

@@ -0,0 +1,19 @@
+import { EventWithData } from '../EventWithData';
+import { HandlerInterface } from './HandlerInterface';
+import { View } from '../View';
+
+export class CloseHandler implements HandlerInterface {
+
+    static readonly EVENT_NAME = 'amazonPrimeSubtitlesClose';
+
+    private document: HTMLDocument;
+
+    constructor(document: HTMLDocument) {
+        this.document = document;
+    }
+
+    handle(event: EventWithData): void {
+        const subtitlesContetnElement = this.document.getElementsByClassName(View.AMAZON_SUBTITLES_CLASS)[0];
+        subtitlesContetnElement.remove();
+    }
+}

src/lib/Utils.ts

@@ -1,11 +1,14 @@
-export class Utils {
-    static onReady(fn: Function, document: HTMLDocument): void {
-        if (/in/.test(document.readyState)) {
-            setTimeout(function() {
-                Utils.onReady(fn, document);
-            }, 100)
-        } else {
-            fn(document)
-        }
+export class Utils {    
+    static waitForElementExists(selector: string, callback: Function, attributes: Array<any>) {
+        (function loopSearch() {
+            if (document.querySelector(selector) != null) {
+                callback(...attributes);
+                return;
+            } else {
+            setTimeout(function () {
+                loopSearch();
+            }, 1000);
+            }
+        })();
     }
 }

src/lib/View.ts

@@ -1,13 +1,15 @@
 import { FileHandler } from './Handler/FileHandler'
+import { CloseHandler } from './Handler/CloseHandler'
 import { EventWithData } from './EventWithData'
 
 interface HTMLInputEvent extends Event {
     target: HTMLInputElement & EventTarget;
 }
 
 export class View {
-    static readonly WEB_PLAYER_ELEMENT_ID = 'dv-web-player'
+    static readonly WEB_PLAYER_ELEMENT_CLASS = 'scalingVideoContainer'
     static readonly SUBTITLES_CONTENT_ELEMENT_CLASS = 'amazon-subtitles-content'
+    static readonly AMAZON_SUBTITLES_CLASS = 'amazon-subtitles'
 
     private document: HTMLDocument;
 
@@ -17,7 +19,7 @@ export class View {
 
     public display(): void {
         const amazonSubtitlesElement = this.createSubtitlesElement();
-        const webPlayerElemet = this.document.getElementById(View.WEB_PLAYER_ELEMENT_ID);
+        const webPlayerElemet = this.document.getElementsByClassName(View.WEB_PLAYER_ELEMENT_CLASS)[0];
         webPlayerElemet.appendChild(amazonSubtitlesElement);
     }
 
@@ -26,7 +28,7 @@ export class View {
         const subtitlesContentElement = this.createSubtitlesContentEleent();
 
         const amazonSubtitlesElement = this.document.createElement("div");
-        amazonSubtitlesElement.className = 'amazon-subtitles'
+        amazonSubtitlesElement.className = View.AMAZON_SUBTITLES_CLASS
         amazonSubtitlesElement.appendChild(dropFilesElement)
         amazonSubtitlesElement.appendChild(subtitlesContentElement)
 
@@ -38,6 +40,9 @@ export class View {
         dropFilesElement.className = 'amazon-subtitles-drop-files'
         dropFilesElement.innerHTML = 'Drag a *.srt File Here<br>';
 
+        const closeElement = this.createCloseElement();
+        dropFilesElement.appendChild(closeElement);
+
         const dropFileInputElement = this.document.createElement("input");
         dropFileInputElement.className = 'amazon-subtitles-drop-file-input'
         dropFileInputElement.type = 'file'
@@ -49,11 +54,28 @@ export class View {
             this.document.dispatchEvent(dropFileEvent);
         });
 
-        dropFilesElement.appendChild(dropFileInputElement)
+        dropFilesElement.appendChild(dropFileInputElement);
 
         return dropFilesElement;
     }
 
+    private createCloseElement(): HTMLDivElement {
+        const closeIconElement = this.document.createElement("span");
+        closeIconElement.className = 'amazon-subtitles-close-icon'
+        closeIconElement.innerHTML = '+';
+
+        const closeElement = this.document.createElement("div");
+        closeElement.className = 'amazon-subtitles-close'
+        closeElement.appendChild(closeIconElement)
+
+        closeElement.addEventListener('click', () => {
+            const closeEvent = new EventWithData(CloseHandler.EVENT_NAME);
+            this.document.dispatchEvent(closeEvent);
+        });
+
+        return closeElement;
+    }
+
     private createSubtitlesContentEleent(): HTMLDivElement {
         const subtitlesContentElement = this.document.createElement("div");
         subtitlesContentElement.className = View.SUBTITLES_CONTENT_ELEMENT_CLASS;