Merge pull request #315 from Joe-Dowd/react

Audio notification on skip

manifest/manifest.json

@@ -32,6 +32,7 @@
         "icons/downvote.png",
         "icons/report.png",
         "icons/close.png",
+        "icons/beep.ogg",
         "icons/PlayerInfoIconSponsorBlocker256px.png",
         "icons/PlayerDeleteIconSponsorBlocker256px.png",
         "popup.html",

public/_locales/en/messages.json

@@ -291,6 +291,12 @@
     "autoSkipDescription": {
         "message": "Auto skip will skip sponsors for you. If disabled, a notice will appear asking if you'd like to skip."
     },
+    "audioNotification": {
+        "message": "Audio Notification On Skip"
+    },
+    "audioNotificationDescription": {
+        "message": "Audio notification on skip will play a sound whenever a sponsor is skipped. If disabled (or auto skip is disabled), no sound will be played."
+    },
     "youHaveSkipped": {
         "message": "You have skipped "
     },

public/options/options.html

@@ -100,6 +100,25 @@
 
 			<br/>
 			<br/>
+
+
+			<div option-type="toggle" sync-option="audioNotificationOnSkip">
+				<label class="switch-container" label-name="__MSG_audioNotification__">
+					<label class="switch">
+						<input type="checkbox" checked>
+						<span class="slider round"></span>
+					</label>
+				</label>
+	
+				<br/>
+				<br/>
+	
+				<div class="small-description">__MSG_audioNotificationDescription__</div>
+			</div>
+
+			<br/>
+			<br/>
+	
 	
 	
 			<div option-type="keybind-change" sync-option="startSponsorKeybind">

src/components/SkipNoticeComponent.tsx

@@ -32,6 +32,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     contentContainer: ContentContainer;
 
     amountOfPreviousNotices: number;
+    audio: HTMLAudioElement;
     
     idSuffix: any;
 
@@ -44,6 +45,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.UUID = props.UUID;
         this.autoSkip = props.autoSkip;
         this.contentContainer = props.contentContainer;
+        this.audio = null;
     
         let noticeTitle = chrome.i18n.getMessage("noticeTitle");
     
@@ -79,6 +81,13 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
+    componentDidMount() {
+        if (Config.config.audioNotificationOnSkip && this.audio) {
+            this.audio.volume = this.contentContainer().v.volume * 0.1;
+            this.audio.play();
+        }
+    }
+
     render() {
         let noticeStyle: React.CSSProperties = {
             zIndex: 50 + this.amountOfPreviousNotices
@@ -96,6 +105,10 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
                 timed={true}
                 maxCountdownTime={this.state.maxCountdownTime}
                 ref={this.noticeRef}>
+                    
+                {(Config.config.audioNotificationOnSkip) && <audio ref={(source) => { this.audio = source; }}>
+                    <source src={chrome.extension.getURL("icons/beep.ogg")} type="audio/ogg"></source>
+                </audio>}
 
                 {/* Text Boxes */}
                 {this.getMessageBoxes()}

src/config.ts

@@ -24,6 +24,7 @@ interface SBConfig {
     supportInvidious: boolean,
     serverAddress: string,
     minDuration: number,
+    audioNotificationOnSkip,
     checkForUnlistedVideos: boolean,
     mobileUpdateShowCount: number,
 
@@ -121,6 +122,7 @@ var Config: SBObject = {
         supportInvidious: false,
         serverAddress: CompileConfig.serverAddress,
         minDuration: 0,
+        audioNotificationOnSkip: false,
         checkForUnlistedVideos: false,
         mobileUpdateShowCount: 0,
         categorySelections: [{