Conditionally render different options in safari

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "drewbourne.vscode-remark-lint",
     "esbenp.prettier-vscode",
     "stylelint.vscode-stylelint",
-    "editorconfig.editorconfig"
+    "editorconfig.editorconfig",
+    "aaron-bond.better-comments"
   ]
 }

.vscode/settings.json

@@ -13,5 +13,62 @@
   },
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+
+  "better-comments.tags": [
+    {
+      "tag": "!",
+      "color": "#FF2D00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "?",
+      "color": "#3498DB",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "//",
+      "color": "#474747",
+      "strikethrough": true,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "todo",
+      "color": "#FF8C00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "*",
+      "color": "#98C379",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "#v",
+      "color": "#0000ff",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "#transparent",
+      "bold": true,
+      "italic": false
+    }
+  ]
 }

.xcode/Web Scrobbler/Web Scrobbler.xcodeproj/xcuserdata/User.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -7,12 +7,12 @@
 		<key>Web Scrobbler (iOS).xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>1</integer>
+			<integer>0</integer>
 		</dict>
 		<key>Web Scrobbler (macOS).xcscheme_^#shared#^_</key>
 		<dict>
 			<key>orderHint</key>
-			<integer>0</integer>
+			<integer>1</integer>
 		</dict>
 	</dict>
 </dict>

build.ts

@@ -1,3 +1,6 @@
+// must be imported first to set env variables
+import './scripts/set-env';
+
 import { build } from 'vite';
 import * as configs from './vite.configs';
 import { mkdir } from 'fs/promises';

package.json

@@ -44,7 +44,7 @@
     "@types/webextension-polyfill": "0.10.0",
     "@typescript-eslint/eslint-plugin": "5.59.6",
     "archiver": "5.3.1",
-    "canvas": "^2.11.2",
+    "canvas": "2.11.2",
     "chokidar": "3.5.3",
     "esbuild": "0.17.19",
     "eslint": "8.41.0",
@@ -67,6 +67,7 @@
     "stylelint-config-web-scrobbler": "0.2.0",
     "tsx": "3.12.7",
     "typescript": "5.0.4",
+    "vite-plugin-conditional-compiler": "0.1.1",
     "vite-plugin-solid": "2.7.0",
     "vite-plugin-static-copy": "0.15.0",
     "vitest": "0.31.1"

scripts/set-env.ts

@@ -0,0 +1,21 @@
+import { isDev, releaseTarget } from './util';
+
+if (isDev()) {
+	process.env.VITE_DEV = 'true';
+} else {
+	process.env.VITE_PROD = 'true';
+}
+
+switch (releaseTarget) {
+	case 'chrome':
+		process.env.VITE_CHROME = 'true';
+		break;
+	case 'firefox':
+		process.env.VITE_FIREFOX = 'true';
+		break;
+	case 'safari':
+		process.env.VITE_SAFARI = 'true';
+		break;
+	default:
+		throw new Error('Unknown release target');
+}

src/_locales/en/messages.json

@@ -391,6 +391,10 @@
         "message": "You can find the list of contributors <a href=\"https://github.com/web-scrobbler/web-scrobbler/graphs/contributors\">right on the GitHub</a>",
         "description": "'About' section text"
     },
+    "contributorsContribute": {
+        "message": "Want to contribute? See all the ways you can contribute to the project at <a href=\"https://web-scrobbler.com#contributing\" target=\"_blank\" rel=\"noopener noreferrer\">our website</a>.",
+        "description": "'About' section text"
+    },
     "showSomeLoveTitle": {
         "message": "Show some love",
         "description": "'Show some love' section"

src/ui/options/components/info.tsx

@@ -13,6 +13,8 @@ export default function InfoComponent() {
 			<h2>{t('contributorsTitle')}</h2>
 			{/* eslint-disable-next-line */}
 			<p innerHTML={t('contributorsText')}></p>
+			{/* eslint-disable-next-line */}
+			<p innerHTML={t('contributorsContribute')}></p>
 		</>
 	);
 }

src/ui/options/components/navigator.ts

@@ -25,7 +25,6 @@ import {
 	enableConnector,
 	getCurrentTab,
 } from '@/core/background/util';
-import { getConnectorByUrl } from '@/util/util-connector';
 import * as ControllerMode from '@/core/object/controller/controller-mode';
 
 /**
@@ -70,42 +69,76 @@ export type NavigatorButtonGroup = {
  */
 export type Navigator = (NavigatorButton | NavigatorButtonGroup)[];
 
+export const accountItem: NavigatorNavigationButton = {
+	namei18n: 'optionsAccounts',
+	icon: ManageAccounts,
+	element: Accounts,
+};
+
+export const optionsItem: NavigatorNavigationButton = {
+	namei18n: 'optionsOptions',
+	icon: Settings,
+	element: OptionsComponent,
+};
+
+export const editOptionsItem: NavigatorNavigationButton = {
+	namei18n: 'optionsEdits',
+	icon: Edit,
+	element: EditOptions,
+};
+
+export const connectorOverrideOptionsItem: NavigatorNavigationButton = {
+	namei18n: 'optionsConnectors',
+	icon: Extension,
+	element: ConnectorOverrideOptions,
+};
+
+export const optionsGroup: NavigatorButtonGroup = {
+	namei18n: 'optionsOptions',
+	icon: Settings,
+	group: [optionsItem, editOptionsItem, connectorOverrideOptionsItem],
+};
+
+export const contactItem: NavigatorNavigationButton = {
+	namei18n: 'contactTitle',
+	icon: Contacts,
+	element: ContactComponent,
+};
+
+export const faqItem: NavigatorNavigationButton = {
+	namei18n: 'faqTitle',
+	icon: Help,
+	element: FAQ,
+};
+
+export const aboutItem: NavigatorNavigationButton = {
+	namei18n: 'optionsAbout',
+	icon: Info,
+	element: InfoComponent,
+};
+
+export const aboutGroup: NavigatorButtonGroup = {
+	namei18n: 'optionsAbout',
+	icon: Info,
+	group: [contactItem, faqItem, aboutItem],
+};
+
+export const showSomeLoveItem: NavigatorNavigationButton = {
+	namei18n: 'showSomeLoveTitle',
+	icon: Favorite,
+	element: ShowSomeLove,
+};
+
 /**
  * All the different options pages, their sidebar labels, and icons.
  */
 export const settings: Navigator = [
-	{ namei18n: 'optionsAccounts', icon: ManageAccounts, element: Accounts },
-	{
-		namei18n: 'optionsOptions',
-		icon: Settings,
-		group: [
-			{
-				namei18n: 'optionsOptions',
-				icon: Settings,
-				element: OptionsComponent,
-			},
-			{ namei18n: 'optionsEdits', icon: Edit, element: EditOptions },
-			{
-				namei18n: 'optionsConnectors',
-				icon: Extension,
-				element: ConnectorOverrideOptions,
-			},
-		],
-	},
-	{
-		namei18n: 'optionsAbout',
-		icon: Info,
-		group: [
-			{
-				namei18n: 'contactTitle',
-				icon: Contacts,
-				element: ContactComponent,
-			},
-			{ namei18n: 'faqTitle', icon: Help, element: FAQ },
-			{ namei18n: 'optionsAbout', icon: Info, element: InfoComponent },
-		],
-	},
-	{ namei18n: 'showSomeLoveTitle', icon: Favorite, element: ShowSomeLove },
+	accountItem,
+	optionsGroup,
+	aboutGroup,
+	// #v-ifndef VITE_SAFARI
+	showSomeLoveItem,
+	// #v-endif
 ];
 
 async function getToggleNavigators(): Promise<NavigatorActionButton[]> {

src/ui/options/main.tsx

@@ -3,8 +3,6 @@ import styles from './settings.module.scss';
 import { initializeThemes } from '@/theme/themes';
 import '@/theme/themes.scss';
 import { Match, Show, Switch, createSignal, onCleanup } from 'solid-js';
-import ShowSomeLove from './components/showSomeLove';
-import Favorite from '@suid/icons-material/FavoriteOutlined';
 import Close from '@suid/icons-material/CloseOutlined';
 import Sidebar from './sidebar/sidebar';
 import { EditsModal } from './components/edit-options/edited-tracks';
@@ -13,7 +11,9 @@ import { RegexEditsModal } from './components/edit-options/regex-edits';
 import {
 	ModalType,
 	NavigatorNavigationButton,
+	aboutItem,
 	settings,
+	showSomeLoveItem,
 } from './components/navigator';
 import ContextMenu from '../components/context-menu/context-menu';
 
@@ -26,16 +26,18 @@ function contextMenuQuery() {
 	return window.matchMedia('(max-width: 700px)').matches;
 }
 
+// Show some love as default except safari, where we don't want it shown because apple
+let defaultSetting = aboutItem;
+// #v-ifndef VITE_SAFARI
+defaultSetting = showSomeLoveItem;
+// #v-endif
+
 /**
  * Preferences component, with a sidebar and several different options and info pages
  */
 function Options() {
 	const [activeSetting, setActiveSetting] =
-		createSignal<NavigatorNavigationButton>({
-			namei18n: 'showSomeLoveTitle',
-			icon: Favorite,
-			element: ShowSomeLove,
-		});
+		createSignal<NavigatorNavigationButton>(defaultSetting);
 	const [activeModal, setActiveModal] = createSignal<ModalType>('');
 	let modal: HTMLDialogElement | undefined;
 

vite.configs.ts

@@ -7,6 +7,7 @@ import makeManifest from './scripts/make-manifest';
 import { isDev, releaseTarget, resolvePath } from 'scripts/util';
 import minifyImages from 'scripts/minify-images';
 import generateIcons from 'scripts/generate-icons';
+import ConditionalCompile from 'vite-plugin-conditional-compiler';
 
 const dist = resolvePath('build');
 const root = resolvePath('src');
@@ -93,6 +94,7 @@ export const buildStart: UserConfig = {
 		},
 	},
 	plugins: [
+		ConditionalCompile(),
 		solid(),
 		makeManifest(),
 		generateIcons(),