Merge pull request #97 from OMGDuke/add-extras-section

Add a new extras section with some links

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdh-gamethememusic",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Play theme songs on your game pages",
   "type": "module",
   "scripts": {
@@ -52,6 +52,7 @@
   "dependencies": {
     "@decky/api": "^1.1.2",
     "localforage": "^1.10.0",
+    "qrcode.react": "^4.1.0",
     "react-icons": "^5.3.0",
     "tslib": "^2.8.1"
   },

rollup.config.js

@@ -1,7 +1,8 @@
+import { readFileSync } from 'fs'
 import externalGlobals from 'rollup-plugin-external-globals'
 import deckyPlugin from '@decky/rollup'
 
-import pkg from './package.json' assert { type: 'json' }
+const pkg = JSON.parse(readFileSync('./package.json', 'utf8'))
 
 export default deckyPlugin({
   output: {

src/components/changeTheme/aboutPage.tsx

@@ -1,13 +1,21 @@
+import { PanelSection } from '@decky/ui'
 import useTranslations from '../../hooks/useTranslations'
+import PanelSocialButton from '../settings/socialButton'
+import { SiCrowdin, SiDiscord, SiGithub, SiKofi } from 'react-icons/si'
 
 export default function AboutPage() {
   const t = useTranslations()
   return (
     <div>
       <h1>{t('aboutLabel')}</h1>
       <p>{t('aboutDescription')}</p>
-      <h2>{t('supportLabel')}</h2>
-      <p>{t('supportDescription')}</p>
+      <h2>{t('extras')}</h2>
+      <PanelSection>
+        <PanelSocialButton icon={<SiKofi fill="#FF5E5B" />} url="https://ko-fi.com/OMGDuke">Ko-fi</PanelSocialButton>
+        <PanelSocialButton icon={<SiDiscord fill="#5865F2" />} url="https://deckbrew.xyz/discord">Discord</PanelSocialButton>
+        <PanelSocialButton icon={<SiGithub fill="#f5f5f5" />} url="https://github.com/OMGDuke/SDH-GameThemeMusic/">Github</PanelSocialButton>
+        <PanelSocialButton icon={<SiCrowdin fill="#FFFFFF" />} url="https://crowdin.com/project/sdh-gamethememusic">{t('helpTranslate')}</PanelSocialButton>
+      </PanelSection>
     </div>
   )
 }

src/components/settings/index.tsx

@@ -15,6 +15,7 @@ import {
   ToggleField
 } from '@decky/ui'
 import { useMemo } from 'react'
+import { SiCrowdin, SiDiscord, SiGithub, SiKofi } from "react-icons/si";
 import { useSettings } from '../../hooks/useSettings'
 import useTranslations from '../../hooks/useTranslations'
 import {
@@ -23,7 +24,7 @@ import {
   FaSave,
   FaVolumeMute,
   FaVolumeUp,
-  FaYoutube
+  FaYoutube,
 } from 'react-icons/fa'
 import {
   clearCache,
@@ -36,6 +37,7 @@ import {
 import useInvidiousInstances from '../../hooks/useInvidiousInstances'
 import { toaster } from '@decky/api'
 import { getResolver } from '../../actions/audio'
+import PanelSocialButton from './socialButton'
 
 export default function Index() {
   const {
@@ -315,6 +317,12 @@ export default function Index() {
           </ButtonItem>
         </PanelSectionRow>
       </PanelSection>
+      <PanelSection title={t('extras')}>
+        <PanelSocialButton icon={<SiKofi fill="#FF5E5B" />} url="https://ko-fi.com/OMGDuke">Ko-fi</PanelSocialButton>
+        <PanelSocialButton icon={<SiDiscord fill="#5865F2" />} url="https://deckbrew.xyz/discord">Discord</PanelSocialButton>
+        <PanelSocialButton icon={<SiGithub fill="#f5f5f5" />} url="https://github.com/OMGDuke/SDH-GameThemeMusic/">Github</PanelSocialButton>
+        <PanelSocialButton icon={<SiCrowdin fill="#FFFFFF" />} url="https://crowdin.com/project/sdh-gamethememusic">{t('helpTranslate')}</PanelSocialButton>
+      </PanelSection>
     </div>
   )
 }

src/components/settings/showQrModal.tsx

@@ -0,0 +1,19 @@
+import { showModal, ModalRoot } from '@decky/ui';
+import { QRCodeSVG } from 'qrcode.react';
+
+const showQrModal = (url: string) => {
+  showModal(
+    <ModalRoot>
+      <QRCodeSVG
+        style={{ margin: '0 auto 1.5em auto' }}
+        value={url}
+        includeMargin
+        size={256}
+      />
+      <span style={{ textAlign: 'center', wordBreak: 'break-word' }}>{url}</span>
+    </ModalRoot>,
+    window
+  );
+};
+
+export default showQrModal;

src/components/settings/socialButton.tsx

@@ -0,0 +1,81 @@
+import {
+  PanelSectionRow,
+  DialogButton,
+  Field,
+  Focusable,
+  Navigation,
+} from '@decky/ui';
+import { FC, ReactNode } from 'react';
+import { HiQrCode } from 'react-icons/hi2';
+import useTranslations from '../../hooks/useTranslations'
+
+import showQrModal from './showQrModal';
+
+
+const navLink = (url: string) => {
+  Navigation.CloseSideMenus();
+  Navigation.NavigateToExternalWeb(url);
+};
+
+const PanelSocialButton: FC<{
+  icon: ReactNode;
+  url: string;
+  children: string,
+}> = ({ icon, children, url }) => {
+    const t = useTranslations()
+  return (
+  <PanelSectionRow>
+    <Field
+      bottomSeparator="none"
+      icon={null}
+      label={null}
+      childrenLayout={undefined}
+      inlineWrap="keep-inline"
+      padding="none"
+      spacingBetweenLabelAndChild="none"
+      childrenContainerWidth="max"
+    >
+      <Focusable style={{ display: 'flex' }}>
+        <div
+          style={{
+            display: 'flex',
+            fontSize: '1.5em',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginRight: '.5em',
+          }}
+        >
+          {icon}
+        </div>
+        <DialogButton
+          onClick={() => navLink(url)}
+          onSecondaryButton={() => showQrModal(url)}
+          onSecondaryActionDescription={t('showQrCode')}
+          style={{
+            padding: '10px',
+            fontSize: '14px',
+          }}
+        >
+          {children}
+        </DialogButton>
+        <DialogButton
+          onOKActionDescription={t('showQrCode')}
+          onClick={() => showQrModal(url)}
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '10px',
+            maxWidth: '40px',
+            minWidth: 'auto',
+            marginLeft: '.5em',
+          }}
+        >
+          <HiQrCode />
+        </DialogButton>
+      </Focusable>
+    </Field>
+  </PanelSectionRow>
+)};
+
+export default PanelSocialButton;

src/localisation/en.json

@@ -25,12 +25,14 @@
     "downloadFailedDetail": "Could not download this music.",
     "downloadRestoreSuccessful": "Downloads successful",
     "downloadRestoreSuccessfulDetails": "All missing songs have been downloaded.",
+    "extras": "Extras",
     "gameSettings": "Game Settings",
     "gameVolumeDescription": "Adjust music volume for this game",
-    "noMusicLabel": "No Music",
-    "overrides": "Overrides",
+    "helpTranslate": "Help translate",
     "invidiousInstance": "Invidious Instance",
     "invidiousInstanceDescription": "Which Invidious instance would you like to use for searching and getting audio?",
+    "noMusicLabel": "No Music",
+    "overrides": "Overrides",
     "play": "Play",
     "reset": "Reset",
     "resetVolume": "Reset",
@@ -39,8 +41,8 @@
     "restoreDownloadsConfirmDescription": "This will download up to {num} songs and might take a while.",
     "restoreDownloadsDescription": "Download all songs from manually set overrides that haven't been downloaded yet.",
     "restoreDownloadsLabel": "Restore missing downloads",
-    "restoreDownloadsOperationTitle": "Downloading missing songs...",
     "restoreDownloadsOperation": "Downloading {current}/{total}...",
+    "restoreDownloadsOperationTitle": "Downloading missing songs...",
     "restoreOverrides": "Select backup",
     "restoreOverridesConfirm": "Restore this backup?",
     "restoreOverridesConfirmDetails": "This will overwrite all your current overrides!",
@@ -51,11 +53,12 @@
     "select": "Select",
     "selected": "Selected",
     "settings": "Settings",
+    "showQrCode": "Show QR Code",
     "stop": "Stop",
     "supportDescription": "Visit the Steam Deck Homebrew Discord deckbrew.xyz/discord",
     "supportLabel": "Support",
     "useYtDlp": "Use yt-dlp",
     "useYtDlpDescription": "Access YouTube directly without Invidious",
     "volume": "Music Volume",
     "volumeDescription": "Adjust music volume"
-}
+}