Added audio notification on skip to options menu

src/components/SkipNoticeComponent.tsx

@@ -32,6 +32,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
     contentContainer: ContentContainer;
 
     amountOfPreviousNotices: number;
+    audio: any;
     
     idSuffix: any;
 
@@ -44,6 +45,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         this.UUID = props.UUID;
         this.manualSkip = props.manualSkip;
         this.contentContainer = props.contentContainer;
+        this.audio = null;
     
         let noticeTitle = chrome.i18n.getMessage("noticeTitle");
     
@@ -79,6 +81,12 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
         }
     }
 
+    componentDidMount() {
+        if (Config.config.audioNotificationOnSkip && this.audio) {
+            this.audio.play();
+        }
+    }
+
     render() {
         let noticeStyle: React.CSSProperties = {
             zIndex: 50 + this.amountOfPreviousNotices
@@ -96,6 +104,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

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

src/options.ts

@@ -65,6 +65,10 @@ async function init() {
                                 showNoticeSwitch.checked = true;
                             }
 
+                            break;
+                        case "audioNotificationOnSkip":
+                            let audioNotificationOnSkip = <HTMLInputElement> document.querySelector("[sync-option='audioNotificationOnSkip'] > label > label > input");
+                            audioNotificationOnSkip.checked = Config.config[option];
                             break;
                     }
                 });