feat: option to set seconds to jump before recorded time

resolves #30
byteyilabs · May 27, 2020 · 9e849cc · 9e849cc
1 parent 0b2bf1f
commit 9e849cc
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 5 deletions.
diff --git a/extension/_locales/en/messages.json b/extension/_locales/en/messages.json
@@ -141,6 +141,15 @@
   "options_settings_title": {
     "message": "Settings"
   },
+  "options_settings_video_title": {
+    "message": "Video"
+  },
+  "options_settings_video_description": {
+    "message": "Settings to customize video playback behaviours"
+  },
+  "options_settings_seek_label": {
+    "message": "Seconds to jump before recoreded time"
+  },
   "options_settings_exportAndImport_title": {
     "message": "Export and Import"
   },

diff --git a/extension/src/constants.js b/extension/src/constants.js
@@ -16,6 +16,8 @@ export const NODE_ENV_PLAYGROUND = 'playground';
 
 export const QUERY_AUTO_JUMP = 'yinotetimestamp';
 
+export const KEY_VIDEO_SEEK_SECONDS = 'video_seek_seconds';
+
 export const REST_BASE_URL =
   process.env.NODE_ENV === 'production'
     ? process.env.REST_BASE_URL_PROD

diff --git a/extension/src/options/containers/Settings/ExportAndImport/index.js b/extension/src/options/containers/Settings/ExportAndImport/index.js
@@ -59,7 +59,7 @@ const ExportAndImport = () => {
   };
 
   return (
-    <Grid container direction="column" spacing={4}>
+    <Grid container direction="column" spacing={3}>
       <Grid item container spacing={1} direction="column">
         <Grid item>
           <Typography variant="h6">

diff --git a/extension/src/options/containers/Settings/Video/index.js b/extension/src/options/containers/Settings/Video/index.js
@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Grid, Typography, Divider, Select, MenuItem } from '@material-ui/core';
+import { KEY_VIDEO_SEEK_SECONDS } from '../../../../constants';
+
+const Video = () => {
+  const { t } = useTranslation('options');
+  const [seekSecond, setSeekSecond] = useState(0);
+
+  useEffect(() => {
+    browser.storage.local.get('settings').then(data => {
+      const settings = data.settings || {};
+      setSeekSecond(settings[KEY_VIDEO_SEEK_SECONDS] || 0);
+    });
+  }, []);
+
+  const handleSecondChange = e => {
+    const { value } = e.target;
+    browser.storage.local
+      .get('settings')
+      .then(data => {
+        const settings = data.settings || {};
+        settings[KEY_VIDEO_SEEK_SECONDS] = value;
+        return browser.storage.local.set({ settings });
+      })
+      .then(() => {
+        setSeekSecond(value);
+      });
+  };
+
+  return (
+    <Grid container direction="column" spacing={3}>
+      <Grid item container spacing={1} direction="column">
+        <Grid item>
+          <Typography variant="h6">{t('settings.video.title')}</Typography>
+        </Grid>
+        <Grid item>
+          <Divider />
+        </Grid>
+        <Grid item>
+          <Typography variant="body1" color="textSecondary">
+            {t('settings.video.description')}
+          </Typography>
+        </Grid>
+      </Grid>
+      <Grid item container spacing={4} alignItems="center">
+        <Grid item>
+          <Typography variant="subtitle1">
+            {t('settings.seek.label')}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Select value={seekSecond} onChange={handleSecondChange}>
+            <MenuItem value={0}>0</MenuItem>
+            <MenuItem value={5}>5</MenuItem>
+            <MenuItem value={10}>10</MenuItem>
+            <MenuItem value={15}>15</MenuItem>
+          </Select>
+        </Grid>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Video;
diff --git a/extension/src/options/containers/Settings/index.js b/extension/src/options/containers/Settings/index.js
@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useStoreActions } from 'easy-peasy';
+import { Grid } from '@material-ui/core';
+import Video from './Video';
 import ExportAndImport from './ExportAndImport';
 
 const Settings = () => {
@@ -13,7 +15,16 @@ const Settings = () => {
     setTitle(t('settings.title'));
   }, [setTitle, t]);
 
-  return <ExportAndImport />;
+  return (
+    <Grid container spacing={6}>
+      <Grid item container>
+        <Video />
+      </Grid>
+      <Grid item container>
+        <ExportAndImport />
+      </Grid>
+    </Grid>
+  );
 };
 
 export default Settings;
diff --git a/extension/src/ui/services/player/HTML5Player.js b/extension/src/ui/services/player/HTML5Player.js
@@ -32,7 +32,8 @@ export default class HTML5Player extends Player {
   }
 
   seek(timestamp) {
-    this.video.currentTime = timestamp;
+    const timeToSeek = timestamp - this.seekSeconds;
+    this.video.currentTime = timeToSeek >= 0 ? timeToSeek : 0;
   }
 
   async getCurrentTime() {

diff --git a/extension/src/ui/services/player/Player.js b/extension/src/ui/services/player/Player.js
@@ -1,5 +1,12 @@
+import { KEY_VIDEO_SEEK_SECONDS } from '../../../constants';
+
 export default class Player {
-  constructor(options) {}
+  constructor() {
+    browser.storage.local.get('settings').then(data => {
+      const settings = data.settings || {};
+      this.seekSeconds = +settings[KEY_VIDEO_SEEK_SECONDS] || 0;
+    });
+  }
 
   getVideoElement() {
     logger.warn('Method need to be implemented');

diff --git a/extension/src/ui/services/player/YoutubeIframePlayer.js b/extension/src/ui/services/player/YoutubeIframePlayer.js
@@ -41,7 +41,8 @@ export default class YoutubeIframePlayer extends Player {
   }
 
   seek(timestamp) {
-    this.#player.seekTo(timestamp);
+    const timeToSeek = timestamp - this.seekSeconds;
+    this.#player.seekTo(timeToSeek >= 0 ? timeToSeek : 0);
   }
 
   async getCurrentTime() {