Merge pull request #1 from kebien6020/feature/persist-open-state

Feature - Persist open state
kebien6020 · Aug 29, 2020 · 282efd3 · 282efd3
2 parents 2fe003b + 82be720
commit 282efd3
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,8 @@ You will find a new icon near "Up next" which will toggle the translation box.
   match into the translation box.
 - Works for live chat and chat replay.
 - Follows your configured light/dark theme.
+- Will remember whether you had the translation box open or closed last time you
+  used it.
 
 ## License
 
@@ -43,6 +45,9 @@ This proyect is licensed under the [WTFPL](http://www.wtfpl.net/). See the
 
 ## Changelog
 
+### 1.0.2
+- Persist translation box open or closed state
+
 ### 1.0.1
 - Follow light/dark theme of Youtube.
 

diff --git a/dist/live-translate.meta.js b/dist/live-translate.meta.js
@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name        Live Translate
-// @version     1.0.1
+// @version     1.0.2
 // @author      u/BakuhatsuK
 // @description Get streaming translation comments easily. Based on extension made by u/konokalahola
 // @supportURL  https://github.com/kebien6020/live-translate-userscript

diff --git a/dist/live-translate.user.js b/dist/live-translate.user.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "live-translate-userscript",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "main": "webpack.config.js",
   "dependencies": {

diff --git a/src/components/App.js b/src/components/App.js
@@ -12,6 +12,7 @@ import Messages from './Messages';
 import { ThemeProvider, createMuiTheme } from '@material-ui/core';
 import useYoutubeDarkMode from '../hooks/useYoutubeDarkMode';
 import baseTheme from '../theme';
+import { SettingsProvider, useSetting } from '../context/Settings';
 
 const Providers = ({ children }) => {
     const ytIsDark = useYoutubeDarkMode();
@@ -28,16 +29,18 @@ const Providers = ({ children }) => {
 
     return (
         <ThemeProvider theme={theme}>
-            {children}
+            <SettingsProvider>
+                {children}
+            </SettingsProvider>
         </ThemeProvider>
     );
 };
 
-const App = () => {
+const Main = () => {
     const [isWatchPage, setIsWatchPage] = useState(false);
     const [messages, setMessages] = useState([]);
     const [containers, setContainers] = useState(null);
-    const [showMessages, setShowMessages] = useState(false);
+    const [showMessages, setShowMessages] = useSetting('showMessages', false);
     const toggleMessages = () => setShowMessages(prev => !prev);
 
     // Detect when we arrive at the watch page
@@ -121,28 +124,30 @@ const App = () => {
         }
     }, [messages]);
 
-    return (
-        <Providers>
-            {containers && <>
-                {ReactDOM.createPortal(
-                    <Buttons
-                        onToggleMessages={toggleMessages}
-                        messagesAreShown={showMessages}
-                    />,
-                    containers.buttonContainer,
-                )}
-                {ReactDOM.createPortal(
-                    <Messages
-                        show={showMessages}
-                        messages={messages}
-                        forwardRef={messagesRef}
-                        bottomOfChatRef={bottomOfChatRef}
-                    />,
-                    containers.msgContainer,
-                )}
-            </>}
-        </Providers>
-    );
+    return (containers && <>
+        {ReactDOM.createPortal(
+            <Buttons
+                onToggleMessages={toggleMessages}
+                messagesAreShown={showMessages}
+            />,
+            containers.buttonContainer,
+        )}
+        {ReactDOM.createPortal(
+            <Messages
+                show={showMessages}
+                messages={messages}
+                forwardRef={messagesRef}
+                bottomOfChatRef={bottomOfChatRef}
+            />,
+            containers.msgContainer,
+        )}
+    </>);
 };
 
+const App = () => (
+    <Providers>
+        <Main />
+    </Providers>
+);
+
 export default App;
diff --git a/src/context/Settings.js b/src/context/Settings.js
@@ -0,0 +1,52 @@
+import React, { useState, useContext } from 'react';
+
+const SettingsContext = React.createContext({});
+
+const LOCAL_STORAGE_KEY = 'live_translate_settings';
+
+export const SettingsProvider = ({ children }) => {
+    const [settings, setSettings] = useState(() => {
+        // Restore previous settings
+        const value = window.localStorage.getItem(LOCAL_STORAGE_KEY);
+
+        try {
+            return JSON.parse(value);
+        } catch (err) {
+            return {};
+        }
+    });
+
+    const setAndSaveSetting = (name, value) => {
+        const newSettings = { ...settings, [name]: value };
+        setSettings(newSettings);
+
+        window.localStorage.setItem(
+            LOCAL_STORAGE_KEY,
+            JSON.stringify(newSettings),
+        );
+    };
+
+    const context = {
+        settings,
+        setAndSaveSetting,
+    };
+
+    return (
+        <SettingsContext.Provider value={context}>
+            {children}
+        </SettingsContext.Provider>
+    );
+};
+
+export const useSetting = (name, def) => {
+    const { settings, setAndSaveSetting } = useContext(SettingsContext);
+    const value = (settings && name in settings) ? settings[name] : def;
+    const setSetting = (newVal) => {
+        // Handle function expecting old value
+        if (typeof newVal === 'function')
+            newVal = newVal(value);
+
+        setAndSaveSetting(name, newVal);
+    };
+    return [value, setSetting];
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -37,8 +37,8 @@ module.exports = {
                 include: 'https://*.youtube.com/*',
                 'run-at': 'document-start',
                 supportURL: 'https://github.com/kebien6020/live-translate-userscript',
-                downloadURL: 'https://github.com/kebien6020/live-translate-userscript/raw/master/dist/live-translate.user.js',
-                updateURL: 'https://github.com/kebien6020/live-translate-userscript/raw/master/dist/live-translate.user.js',
+                downloadURL: dev ? undefined : 'https://github.com/kebien6020/live-translate-userscript/raw/master/dist/live-translate.user.js',
+                updateURL: dev ? undefined : 'https://github.com/kebien6020/live-translate-userscript/raw/master/dist/live-translate.user.js',
             },
             proxyScript: {
                 enable: () => dev,