diff --git a/src/manifest.json b/src/manifest.json index 617d991..8602d52 100755 --- a/src/manifest.json +++ b/src/manifest.json @@ -5,7 +5,7 @@ "page": "background.html" }, - "browser_action": { + "page_action": { "default_icon": { "32": "assets/img/disabled.png" }, diff --git a/src/pages/content/lib/AudioSync.ts b/src/pages/content/lib/AudioSync.ts new file mode 100644 index 0000000..37fe610 --- /dev/null +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/pages/content/lib/SilenceSkipper.ts b/src/pages/content/lib/SilenceSkipper.ts index 3da43e9..04d7eda 100644 --- a/src/pages/content/lib/SilenceSkipper.ts +++ b/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()); diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx index e8d9b9b..e208663 100644 --- a/src/pages/popup/Popup.tsx +++ b/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 && ( + Keep Audio in Sync{!this.state.isPlus ? ' ★' : ''})} + config={this.config} + plusDisabled={!this.state.isPlus} + openPlusPopup={() => this.showPlusPopup()} + info={( + +

Keep Audio in Sync

+

+ 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.
+ As "Skip Silence" will change the video speed often, you might experience this issue.
+ When this setting is activated, Skip Silence will try to fix this issue by periodically putting them back into sync. +

+
+ )} + /> + )} + Enable Command Bar Icon)} diff --git a/src/pages/shared/components/switch.tsx b/src/pages/shared/components/switch.tsx index 653cdab..d35f14e 100644 --- a/src/pages/shared/components/switch.tsx +++ b/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, diff --git a/src/pages/shared/config.ts b/src/pages/shared/config.ts index 9242460..43b74ca 100644 --- a/src/pages/shared/config.ts +++ b/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, diff --git a/src/pages/shared/configProvider.ts b/src/pages/shared/configProvider.ts index 52322f9..3455532 100644 --- a/src/pages/shared/configProvider.ts +++ b/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",