Merge pull request #130 from lexesjan/add-skip-preview-behaviour-option

Add skip preview behaviour option

package.json

@@ -1,7 +1,7 @@
 {
   "name": "typescript-aniskip-extension",
   "extensionName": "Aniskip",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "An extension which gives the option to skip anime opening and endings on various streaming sites",
   "repository": "https://github.com/lexesjan/typescript-aniskip-extension",
   "contributors": [

src/components/AnimeSearchModal/AnimeSearchModal.tsx

@@ -180,7 +180,7 @@ export function AnimeSearchModal({
             type="button"
             onClick={onClose}
           >
-            Esc
+            Escape
           </Keyboard>
         </div>
         <hr />

src/components/Keyboard/Keyboard.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import {
-  HiArrowDown,
-  HiArrowLeft,
-  HiArrowRight,
-  HiArrowUp,
-} from 'react-icons/hi';
-import { DEFAULT_KEYBOARD_TAG, KeyboardProps } from './Keyboard.types';
+  DEFAULT_KEYBOARD_TAG,
+  KeyboardProps,
+  KEYBOARD_DISPLAY,
+} from './Keyboard.types';
 
 export function Keyboard<
   TTag extends React.ElementType = typeof DEFAULT_KEYBOARD_TAG
@@ -23,20 +21,7 @@ export function Keyboard<
       return children;
     }
 
-    switch (children) {
-      case 'ArrowLeft':
-        return <HiArrowLeft />;
-      case 'ArrowRight':
-        return <HiArrowRight />;
-      case 'ArrowUp':
-        return <HiArrowUp />;
-      case 'ArrowDown':
-        return <HiArrowDown />;
-      default:
-      // no default
-    }
-
-    return children;
+    return KEYBOARD_DISPLAY[children] ?? children;
   };
 
   return React.createElement(

src/components/Keyboard/Keyboard.types.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {
+  HiArrowDown,
+  HiArrowLeft,
+  HiArrowRight,
+  HiArrowUp,
+} from 'react-icons/hi';
+import { ComponentPropsWithAs } from '../../utils';
+
+export type KeyboardProps<TTag extends React.ElementType> =
+  ComponentPropsWithAs<TTag>;
+
+export const DEFAULT_KEYBOARD_TAG = 'span' as const;
+
+export const KEYBOARD_DISPLAY: Record<string, React.ReactNode> = {
+  ArrowUp: <HiArrowUp />,
+  ArrowDown: <HiArrowDown />,
+  ArrowLeft: <HiArrowLeft />,
+  ArrowRight: <HiArrowRight />,
+  Control: 'Ctrl',
+  Backspace: '⌫',
+  Delete: 'Del',
+  Escape: 'Esc',
+  PageUp: 'PgUp',
+  PageDown: 'PgDn',
+  Space: '␣',
+} as const;

src/components/SubmitMenu/SubmitMenu.tsx

@@ -44,6 +44,8 @@ import {
   previewSkipTimeRemoved,
   previewSkipTimeIntervalUpdated,
   selectPlayerControlsListenerType,
+  selectIsPreviewButtonEmulatingAutoSkip,
+  isPreviewButtonEmulatingAutoSkipUpdated,
 } from '../../data';
 import { FRAME_RATE } from '../../players/base-player.types';
 
@@ -74,6 +76,9 @@ export function SubmitMenu(): JSX.Element {
   const playerControlsEventListenerType = useSelector(
     selectPlayerControlsListenerType
   );
+  const isPreviewButtonEmulatingAutoSkip = useSelector(
+    selectIsPreviewButtonEmulatingAutoSkip
+  );
   const player = usePlayerRef();
   const dispatch = useDispatch();
 
@@ -309,8 +314,16 @@ export function SubmitMenu(): JSX.Element {
   ): Promise<void> => {
     event.currentTarget.blur();
 
-    if (currentInputFocus === 'start-time') {
+    if (isPreviewButtonEmulatingAutoSkip) {
       player?.setCurrentTime(timeStringToSeconds(startTime) - 2);
+      player?.play();
+
+      return;
+    }
+
+    if (currentInputFocus === 'start-time') {
+      // Ensure that it does not auto skip.
+      player?.setCurrentTime(timeStringToSeconds(startTime) + 0.001);
     } else {
       player?.setCurrentTime(timeStringToSeconds(endTime));
     }
@@ -490,6 +503,11 @@ export function SubmitMenu(): JSX.Element {
           syncOptions.changeCurrentTimeLargeLength
         )
       );
+      dispatch(
+        isPreviewButtonEmulatingAutoSkipUpdated(
+          syncOptions.isPreviewButtonEmulatingAutoSkip
+        )
+      );
     })();
   }, []);
 

src/components/Toggle/Toggle.tsx

@@ -0,0 +1,35 @@
+import { Switch } from '@headlessui/react';
+import React from 'react';
+import { FaCheck, FaTimes } from 'react-icons/fa';
+import { ToggleProps } from './Toggle.types';
+
+export function Toggle({
+  className = '',
+  checked,
+  onChange,
+  children,
+}: ToggleProps): JSX.Element {
+  return (
+    <Switch
+      className={`${
+        checked ? 'bg-green-600' : 'bg-gray-500'
+      } transition-colors relative inline-flex flex-shrink-0 items-center h-6 rounded-full w-10 ${className}`}
+      checked={checked}
+      onChange={onChange}
+    >
+      {children}
+      <span
+        aria-hidden="true"
+        className={`${
+          checked ? 'translate-x-[1.125em]' : 'translate-x-1'
+        } transition absolute flex items-center justify-center w-[1.125em] h-[1.125em] transform bg-white rounded-full`}
+      >
+        {checked ? (
+          <FaCheck className="text-green-600 w-3 h-3" />
+        ) : (
+          <FaTimes className="text-gray-500 w-4- h-4" />
+        )}
+      </span>
+    </Switch>
+  );
+}

src/components/Toggle/Toggle.types.ts

@@ -0,0 +1,6 @@
+export type ToggleProps = {
+  className?: string;
+  checked: boolean;
+  onChange: (value: boolean) => void;
+  children?: React.ReactNode;
+};

src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export * from './Toggle';
+export * from './Toggle.types';

src/components/index.ts

@@ -15,5 +15,6 @@ export * from './SkipTimeIndicator';
 export * from './SkipTimeIndicatorContainer';
 export * from './SubmitMenu';
 export * from './SubmitMenuButton';
+export * from './Toggle';
 export * from './VoteMenu';
 export * from './VoteMenuButton';

src/data/settings/slice.ts

@@ -34,6 +34,8 @@ const initialSettingsState: SettingsState = {
   animeTitleLanguage: DEFAULT_SYNC_OPTIONS.animeTitleLanguage,
   isChangelogNotificationVisible:
     DEFAULT_SYNC_OPTIONS.isChangelogNotificationVisible,
+  isPreviewButtonEmulatingAutoSkip:
+    DEFAULT_SYNC_OPTIONS.isPreviewButtonEmulatingAutoSkip,
   isUserEditingKeybind: Object.assign(
     {},
     ...KEYBIND_TYPES.map((type) => ({ [type]: false }))
@@ -88,6 +90,11 @@ export const selectIsChangelogNotificationVisible: Selector<
   boolean
 > = (state) => state.settings.isChangelogNotificationVisible;
 
+export const selectIsPreviewButtonEmulatingAutoSkip: Selector<
+  StateSlice<SettingsState, 'settings'>,
+  boolean
+> = (state) => state.settings.isPreviewButtonEmulatingAutoSkip;
+
 /**
  * Slice definition.
  */
@@ -154,6 +161,12 @@ const settingsStateSlice = createSlice({
     changelogNotificationDismissed: (state) => {
       state.isChangelogNotificationVisible = false;
     },
+    isPreviewButtonEmulatingAutoSkipUpdated: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.isPreviewButtonEmulatingAutoSkip = action.payload;
+    },
   },
 });
 
@@ -171,5 +184,6 @@ export const {
   isUserEditingKeybindUpdated,
   changelogNotificationUpdated,
   changelogNotificationDismissed,
+  isPreviewButtonEmulatingAutoSkipUpdated,
 } = settingsStateSlice.actions;
 export default settingsStateSlice.reducer;

src/options/components/SettingsPage/SettingsPage.tsx

@@ -41,10 +41,13 @@ import {
   changeCurrentTimeLargeLengthUpdated,
   animeTitleLanguageUpdated,
   selectAnimeTitleLanguage,
+  isPreviewButtonEmulatingAutoSkipUpdated,
+  selectIsPreviewButtonEmulatingAutoSkip,
 } from '../../../data';
 import { ColourPicker } from '../ColourPicker';
 import { serialiseKeybind, useDispatch, useSelector } from '../../../utils';
 import { Setting } from '../Setting';
+import { Toggle } from '../../../components/Toggle';
 
 export function SettingsPage(): JSX.Element {
   const [isSettingsLoaded, setIsSettingsLoaded] = useState<boolean>(false);
@@ -58,6 +61,9 @@ export function SettingsPage(): JSX.Element {
   );
   const animeTitleLanguage = useSelector(selectAnimeTitleLanguage);
   const isUserEditingKeybind = useSelector(selectIsUserEditingKeybind);
+  const isPreviewButtonEmulatingAutoSkip = useSelector(
+    selectIsPreviewButtonEmulatingAutoSkip
+  );
   const keybindInputRef = useRef<HTMLInputElement>(null);
   const dispatch = useDispatch();
 
@@ -242,6 +248,15 @@ export function SettingsPage(): JSX.Element {
     dispatch(animeTitleLanguageUpdated(languageType));
   };
 
+  /**
+   * Handles changes to the skip preview behavour.
+   *
+   * @param value New value to update to.
+   */
+  const onChangePreviewButtonBehaviour = (value: boolean): void => {
+    dispatch(isPreviewButtonEmulatingAutoSkipUpdated(value));
+  };
+
   /**
    * Renders a keybind. If no keybind is present, render an add keybind
    * button.
@@ -339,6 +354,11 @@ export function SettingsPage(): JSX.Element {
         )
       );
       dispatch(animeTitleLanguageUpdated(syncOptions.animeTitleLanguage));
+      dispatch(
+        isPreviewButtonEmulatingAutoSkipUpdated(
+          syncOptions.isPreviewButtonEmulatingAutoSkip
+        )
+      );
       setIsSettingsLoaded(true);
     })();
   }, []);
@@ -356,6 +376,7 @@ export function SettingsPage(): JSX.Element {
         changeCurrentTimeLength,
         changeCurrentTimeLargeLength,
         animeTitleLanguage,
+        isPreviewButtonEmulatingAutoSkip,
       });
     }
   }, [
@@ -367,6 +388,7 @@ export function SettingsPage(): JSX.Element {
     changeCurrentTimeLargeLength,
     animeTitleLanguage,
     isSettingsLoaded,
+    isPreviewButtonEmulatingAutoSkip,
   ]);
 
   return (
@@ -461,6 +483,20 @@ export function SettingsPage(): JSX.Element {
               <span className="pl-1">s</span>
             </div>
           </Setting>
+          <Setting
+            className="pt-3"
+            name="Emulate an auto skip with the preview button"
+            description="Clicking the preview button will try to emulate a user auto skipping to the end time. If disabled, the current time is simply set to the start / end time."
+          >
+            <Toggle
+              checked={isPreviewButtonEmulatingAutoSkip}
+              onChange={onChangePreviewButtonBehaviour}
+            >
+              <span className="sr-only">
+                Enable skip time emulation on preview button click
+              </span>
+            </Toggle>
+          </Setting>
         </div>
       </div>
       <h2 className="text-xl text-gray-900 font-semibold mt-8">

src/players/jw/metadata.json

@@ -17,6 +17,7 @@
     "*://kimanime.ru/AnimeIframe/*",
     "*://mcloud.to/*",
     "*://mcloud2.to/*",
+    "*://mzcloud.life/*",
     "*://rapid-cloud.ru/*",
     "*://sbembed.com/*",
     "*://sbplay.org/*",

src/players/plyr/metadata.json

@@ -15,6 +15,7 @@
     "*://kwik.cx/e/*",
     "*://scloud.online/*",
     "*://storage.googleapis.com/*",
+    "*://streamta.site/*",
     "*://streamtape.com/*"
   ]
 }

src/scripts/background/types.ts

@@ -119,6 +119,7 @@ export type SyncOptions = {
   changeCurrentTimeLargeLength: number;
   animeTitleLanguage: AnimeTitleLanguageType;
   isChangelogNotificationVisible: boolean;
+  isPreviewButtonEmulatingAutoSkip: boolean;
 };
 
 export const DEFAULT_SYNC_OPTIONS: SyncOptions = {
@@ -131,6 +132,7 @@ export const DEFAULT_SYNC_OPTIONS: SyncOptions = {
   changeCurrentTimeLargeLength: 0.25,
   animeTitleLanguage: 'english',
   isChangelogNotificationVisible: false,
+  isPreviewButtonEmulatingAutoSkip: true,
 };
 
 export type CacheEntry<T> = {