Merge pull request #1 from smonist/main

Add Settings for YouTube API Key
bbonch · Nov 3, 2024 · 24015e6 · 24015e6
2 parents 96309c6 + 52aac69
commit 24015e6
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 4 deletions.
diff --git a/src/css/settings.scss b/src/css/settings.scss
@@ -17,4 +17,45 @@
             padding-left: 15px;
         }
     }
+
+
+    .settings-api-wrapper {
+        margin-top: 30px;
+
+        display: flex;
+        flex-direction: column;
+
+        .api-token {
+            margin-top: 10px;
+            width: 350px;
+        }
+
+        details {
+            margin-top: 10px;
+            width: fit-content;
+
+            border: 1px solid #aaa;
+            border-radius: 4px;
+            padding: 0.5em 0.5em 0;
+
+            font-size: 1.2em;
+        }
+
+        summary {
+            margin: -0.5em -0.5em 0;
+            padding: 0.5em;
+
+            cursor: pointer;
+        }
+
+        details[open] {
+            padding: 0.5em;
+        }
+
+        details[open] summary {
+            border-bottom: 1px solid #aaa;
+            margin-bottom: 0.5em;
+        }
+
+    }
 }
diff --git a/src/js/sfd/components/ds-youtube.tsx b/src/js/sfd/components/ds-youtube.tsx
@@ -22,7 +22,7 @@ const DSYouTube: (props: DSYouTubeProps) => JSX.Element = ({ settings, dsIcon, d
 
     useEffect(() => {
         chrome.runtime.sendMessage({
-            url: constants.youTube.api.replace("{q}", dsTitle).replace("{key}", constants.youTube.key),
+            url: constants.youTube.api.replace("{q}", dsTitle).replace("{key}", settings.apiToken || constants.youTube.key),
             type: "GET",
             method: "getQueryResult",
             referrer: window.location.origin

diff --git a/src/js/sfd/settings.tsx b/src/js/sfd/settings.tsx
@@ -29,7 +29,7 @@ const Setting: (props: SettingProps) => JSX.Element = ({ name, type, onChange, c
 const Settings: (props: SettingsProps) => JSX.Element = (props) => {
     const [settings, setSettings] = useState<DSSettings>(props.settings)
 
-    const settingChanged = (name: string, value: number | boolean | null) => {
+    const settingChanged = (name: string, value: number | string | boolean | null) => {
         if (value == null)
             return;
 
@@ -82,6 +82,32 @@ const Settings: (props: SettingsProps) => JSX.Element = (props) => {
             checked={settings.defaultSearchSource == constants.searchSources.deezer.value}
             onChange={settingChanged}
         />
+
+        <div className='settings-api-wrapper'>
+            <div className='settings-title'>API Key</div>
+
+            <input
+                type='text'
+                className='api-token'
+                value={settings.apiToken ?? ''}
+                onChange={(event) => {
+                    settingChanged('apiToken', event.target.value)
+                }}
+            />
+
+
+            <details>
+                <summary>Why you may need to enter your own API Key</summary>
+                There is a usage quote imposed by Google that limits each API Key to 100 searches per day.<br />
+                This extension comes with an API Key that is shared among all users.<br />
+                If you are experiencing issues with the extension, you may need to enter your own API Key.<br />
+                This is a free and simple process that requires a Google account and can be done by following the steps below:<br />
+                <a href="https://blog-proxy.rapidapi.com/how-to-get-youtube-api-key/" target="_blank">
+                    How to get your own YouTube API key
+                </a>
+            </details>
+
+        </div>
     </div>;
 }
 

diff --git a/src/js/sfd/utils/chromeStorage.ts b/src/js/sfd/utils/chromeStorage.ts
@@ -2,7 +2,8 @@ export const getSettings = (value: DSStorageSettings) => {
     const settings: DSSettings = {
         defaultSearchSource: constants.searchSources.youTube.value,
         autoPlayTrack: true,
-        autoPlayRelease: true
+        autoPlayRelease: true,
+        apiToken: constants.youTube.key
     }
 
     if (value.settings == null || value.settings == "") {

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -61,6 +61,7 @@ interface DSSettings {
     defaultSearchSource: number,
     autoPlayTrack: boolean,
     autoPlayRelease: boolean
+    apiToken: string | null
 }
 
 interface DSStorageSettings {

diff --git a/tests/sfd.test.tsx b/tests/sfd.test.tsx
@@ -10,7 +10,8 @@ const testSrc = 'some-src'
 const settings: DSSettings = {
   defaultSearchSource: constants.searchSources.youTube.value,
   autoPlayRelease: true,
-  autoPlayTrack: true
+  autoPlayTrack: true,
+  apiToken: null
 }
 
 beforeAll(() => {