Merge pull request #114 from lexesjan/add-player-control-keybinds

Add player control keybinds

package.json

@@ -1,7 +1,7 @@
 {
   "name": "typescript-aniskip-extension",
   "extensionName": "Aniskip",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "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/api/aniskip-http-client/aniskip-http-client.ts

@@ -6,7 +6,7 @@ import {
   SkipType,
   VoteType,
 } from './aniskip-http-client.types';
-import { BaseHttpClient } from '../base-http-client';
+import { BaseHttpClient, Response } from '../base-http-client';
 import { AniskipHttpClientError } from './error';
 
 export class AniskipHttpClient extends BaseHttpClient {
@@ -48,7 +48,11 @@ export class AniskipHttpClient extends BaseHttpClient {
     const route = `/relation-rules/${animeId}`;
     const response = await this.request(route, 'GET');
 
-    return response.data;
+    if (response.ok) {
+      return response.data;
+    }
+
+    throw this.getError(response);
   }
 
   /**
@@ -94,24 +98,7 @@ export class AniskipHttpClient extends BaseHttpClient {
       return json;
     }
 
-    switch (response.status) {
-      case 429:
-        throw new AniskipHttpClientError(
-          json.message,
-          'skip-times/rate-limited'
-        );
-      case 400:
-        throw new AniskipHttpClientError(
-          json.message,
-          'skip-times/parameter-error'
-        );
-      case 500:
-      default:
-        throw new AniskipHttpClientError(
-          'Internal Server Error',
-          'skip-times/internal-server-error'
-        );
-    }
+    throw this.getError(response);
   }
 
   /**
@@ -155,4 +142,30 @@ export class AniskipHttpClient extends BaseHttpClient {
   async downvote(skipId: string): Promise<PostResponseFromSkipTimesVote> {
     return this.vote(skipId, 'downvote');
   }
+
+  /**
+   * Returns an appropriate error when the response is not ok.
+   *
+   * @param response Response of the HTTP request.
+   */
+  getError(response: Response): AniskipHttpClientError {
+    switch (response.status) {
+      case 429:
+        return new AniskipHttpClientError(
+          response.data.message,
+          'skip-times/rate-limited'
+        );
+      case 400:
+        return new AniskipHttpClientError(
+          response.data.message,
+          'skip-times/parameter-error'
+        );
+      case 500:
+      default:
+        return new AniskipHttpClientError(
+          'Internal Server Error',
+          'skip-times/internal-server-error'
+        );
+    }
+  }
 }

src/api/aniskip-http-client/aniskip-http-client.types.ts

@@ -1,7 +1,6 @@
 export const SKIP_TYPE_NAMES: Record<SkipType, string> = {
   op: 'Opening',
   ed: 'Ending',
-  preview: 'Preview',
   'mixed-op': 'Mixed opening',
   'mixed-ed': 'Mixed ending',
   recap: 'Recap',
@@ -10,7 +9,6 @@ export const SKIP_TYPE_NAMES: Record<SkipType, string> = {
 export const SKIP_TYPES = [
   'op',
   'ed',
-  'preview',
   'mixed-op',
   'mixed-ed',
   'recap',
@@ -28,6 +26,11 @@ export type SkipTime = {
   episodeLength: number;
 };
 
+export type PreviewSkipTime = {
+  interval: SkipTime['interval'];
+  episodeLength: SkipTime['episodeLength'];
+};
+
 export type GetResponseFromSkipTimes = {
   found: boolean;
   results: SkipTime[];

src/components/SkipButtonContainer/SkipButtonContainer.tsx

@@ -59,7 +59,7 @@ export function SkipButtonContainer(): JSX.Element | null {
       const { skipType } = skipTime;
       const isAutoSkip = skipOptions[skipType] === 'auto-skip';
 
-      if (skipType === 'preview' || isAutoSkip) {
+      if (isAutoSkip) {
         return;
       }
 

src/components/SkipTimeIndicatorContainer/SkipTimeIndicatorContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { browser } from 'webextension-polyfill-ts';
-import { selectSkipTimes } from '../../data';
+import { selectPreviewSkipTime, selectSkipTimes } from '../../data';
 import {
   DEFAULT_SKIP_TIME_INDICATOR_COLOURS,
   SkipTimeIndicatorColours,
@@ -11,6 +11,7 @@ import { SkipTimeIndicator } from '../SkipTimeIndicator';
 export function SkipTimeIndicatorContainer(): JSX.Element {
   const [skipTimeIndicatorColours, setSkipTimeIndicatorColours] =
     useState<SkipTimeIndicatorColours>(DEFAULT_SKIP_TIME_INDICATOR_COLOURS);
+  const previewSkipTime = useSelector(selectPreviewSkipTime);
   const skipTimes = useSelector(selectSkipTimes);
   const variant = useVariantRef();
   const player = usePlayerRef();
@@ -34,22 +35,14 @@ export function SkipTimeIndicatorContainer(): JSX.Element {
   return (
     <>
       {skipTimes.map((skipTime) => {
-        const isPreview = skipTime.skipType === 'preview';
-        if (isPreview) {
-          return null;
-        }
-
         const { startTime, endTime } = skipTime.interval;
         const { episodeLength } = skipTime;
         const offset = videoDuration - skipTime.episodeLength;
 
         return (
           <SkipTimeIndicator
             style={{
-              backgroundColor:
-                skipTimeIndicatorColours[
-                  skipTime.skipType as keyof SkipTimeIndicatorColours
-                ],
+              backgroundColor: skipTimeIndicatorColours[skipTime.skipType],
             }}
             startTime={startTime + offset}
             endTime={endTime + offset}
@@ -59,6 +52,18 @@ export function SkipTimeIndicatorContainer(): JSX.Element {
           />
         );
       })}
+      {previewSkipTime && (
+        <SkipTimeIndicator
+          style={{
+            backgroundColor: skipTimeIndicatorColours.preview,
+          }}
+          startTime={previewSkipTime.interval.startTime}
+          endTime={previewSkipTime.interval.endTime}
+          episodeLength={previewSkipTime.episodeLength}
+          key="skip-time-indicator-preview"
+          variant={variant}
+        />
+      )}
     </>
   );
 }