#28 Implement feature to keep video and audio in sync

src/manifest.json

@@ -5,7 +5,7 @@
  "page": "background.html"
  },
 
- "browser_action": {
+ "page_action": {
  "default_icon": {
  "32": "assets/img/disabled.png"
  },

src/pages/content/lib/AudioSync.ts

@@ -0,0 +1,53 @@
+import ConfigProvider from "../../shared/configProvider";
+import debug from '../../shared/debug';
+import SilenceSkipper from './SilenceSkipper';
+
+/**
+ * Audio Synchronizer
+ * This will help to keep Audio and Video in sync on Chromium based browsers
+ * 
+ * Related: https://github.com/vantezzen/skip-silence/issues/28
+ */
+export default class AudioSync {
+ // Parent skipper
+ skipper : SilenceSkipper;
+
+ // Is the loop currently running
+ isActive = false;
+
+ /**
+ * Set up the class
+ * 
+ * @param config Config to use
+ */
+ constructor(skipper : SilenceSkipper) {
+ this.skipper = skipper;
+ this.sync = this.sync.bind(this);
+
+ this.skipper.config.onUpdate(() => {
+ if (this.skipper.config.get('keep_audio_sync') && !this.isActive) {
+ // Start the loop
+ this.sync();
+ }
+ });
+
+ this.sync();
+ }
+
+ /**
+ * Synchronize the audio and video of the media element
+ */
+ private sync() {
+ if (this.skipper.config.get('keep_audio_sync')) {
+ this.isActive = true;
+ this.skipper.element.currentTime = this.skipper.element.currentTime;
+ debug("AudioSync: Synced audio");
+
+ setTimeout(this.sync, 5000);
+ } else {
+ debug('AudioSync: Stopping because option was disabled');
+
+ this.isActive = false;
+ }
+ }
+}

src/pages/content/lib/SilenceSkipper.ts

@@ -3,6 +3,7 @@ import { MediaElement } from '../../shared/types';
 import debug from '../../shared/debug';
 import ConfigProvider from '../../shared/configProvider';
 import DynamicThresholdCalculator from "./DynamicThresholdCalculator";
+import AudioSync from "./AudioSync";
 
 /**
  * Silence Skipper: This class is doing the job of actually inspecting media elements and
@@ -34,6 +35,7 @@ export default class SilenceSkipper {
 
  // Dependencies
  dynamicThresholdCalculator : DynamicThresholdCalculator;
+ audioSync : AudioSync;
 
  /**
  * Add silence skipper to element
@@ -54,6 +56,7 @@ export default class SilenceSkipper {
  }
  }
  this.dynamicThresholdCalculator = new DynamicThresholdCalculator(config);
+ this.audioSync = new AudioSync(this);
 
  // Attach our config listener
  this.config.onUpdate(() => this._onConfigUpdate());

src/pages/popup/Popup.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, Component } from 'react';
-import { Power, Play, FastForward, BarChart2, Volume2, Columns, Volume, Circle, PieChart } from 'react-feather';
+import { Power, Play, FastForward, BarChart2, Volume2, Columns, Volume, Circle, PieChart, Speaker } from 'react-feather';
 import { CSSTransition } from 'react-transition-group';
 import { browser } from 'webextension-polyfill-ts';
 import './Popup.css';
@@ -20,6 +20,8 @@ import verifyLicense from '../shared/license';
 import PlusInfo from './components/plusInfo';
 import HelpModal from './components/helpModal';
 
+const isChromium = navigator.userAgent.includes("Chrome");
+
 class Popup extends Component {
  config : ConfigProvider;
  isComponentMounted = false;
@@ -280,6 +282,26 @@ class Popup extends Component {
  )}
  />
 
+ {isChromium && (
+ <Switch
+ name="keep_audio_sync"
+ label={(<><Speaker className="setting-icon" /> Keep Audio in Sync{!this.state.isPlus ? ' ★' : ''}</>)}
+ config={this.config}
+ plusDisabled={!this.state.isPlus}
+ openPlusPopup={() => this.showPlusPopup()}
+ info={(
+ <HelpModal>
+ <h2>Keep Audio in Sync</h2>
+ <p>
+ Chrome and Browsers that base on Chromium (e.g. Edge) currently have a bug that will result in audio and video getting out of sync when changing the speed often.<br />
+ As "Skip Silence" will change the video speed often, you might experience this issue.<br />
+ When this setting is activated, Skip Silence will try to fix this issue by periodically putting them back into sync. 
+ </p>
+ </HelpModal>
+ )}
+ />
+ )}
+
  <Switch
  name="is_bar_icon_enabled"
  label={(<><Circle className="setting-icon" /> Enable Command Bar Icon</>)}

src/pages/shared/components/switch.tsx

@@ -1,11 +1,12 @@
 import React, { ChangeEvent } from 'react';
+import defaultConfig from '../config';
 import ConfigProvider from '../configProvider';
 
 import "./switch.scss";
 
 interface SwitchProps {
  label: string | React.ReactNode,
- name: "enabled" | "mute_silence" | "is_bar_icon_enabled" | "allow_analytics" | "dynamic_silence_threshold",
+ name: keyof typeof defaultConfig,
  config: ConfigProvider,
  plusDisabled?: boolean,
  openPlusPopup?: () => void,

src/pages/shared/config.ts

@@ -12,7 +12,9 @@ const defaultConfig = {
  silence_speed: 3,
  silence_speed_is_custom: false,
 
+ // Other features
  mute_silence: false,
+ keep_audio_sync: false,
 
  // Command Bar
  is_bar_icon_enabled: true,

src/pages/shared/configProvider.ts

@@ -18,6 +18,7 @@ const storedKeys : (keyof typeof defaultConfig)[] = [
  "silence_speed_is_custom",
 
  "mute_silence",
+ "keep_audio_sync",
 
  "is_bar_icon_enabled",
  "is_bar_collapsed",