feat: new extensions notice + checks (#1232)

Author: zxr173

.vscode/settings.json

@@ -32,5 +32,9 @@
 	},
 	"[typescript]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	}
+	},
+	"i18n-ally.localesPaths": [
+		"locale",
+		"src/i18n"
+	]
 }

CHANGELOG-nightly.md

@@ -1,3 +1,8 @@
+### 3.1.21.1000
+
+-   Added new extension notice
+-   Added checks to see if new extension is running
+
 ### 3.1.20.2000
 
 -   Fixed an issue causing emote cards to not display all info

CHANGELOG.md

@@ -1,3 +1,8 @@
+### 3.1.21
+
+-   Added new extension notice
+-   Added checks to see if new extension is running
+
 ### 3.1.20
 
 -   Fixed some lint issues

package.json

@@ -3,8 +3,8 @@
 	"displayName": "7TV",
 	"description": "Improve your viewing experience on Twitch & YouTube with new features, emotes, vanity and performance.",
 	"private": true,
-	"version": "3.1.20",
-	"dev_version": "2.0",
+	"version": "3.1.21",
+	"dev_version": "1.0",
 	"scripts": {
 		"start": "cross-env NODE_ENV=dev yarn build:dev && cross-env NODE_ENV=dev vite --mode dev",
 		"build:section:app": "vite build --config vite.config.mts",

src/app/settings/Settings.ts

@@ -12,6 +12,8 @@ const Store = defineAsyncComponent(() => import("@/app/store/Store.vue"));
 class SettingsMenuContext {
 	open = false;
 	view: AnyInstanceType | null = null;
+	newExtensionNoticeDismissed = false;
+	newExtensionNoticeSeen = false;
 
 	category = "";
 	scrollpoint = "";
@@ -31,6 +33,10 @@ class SettingsMenuContext {
 				this.seen.push(key);
 			}
 		}
+
+		this.newExtensionNoticeDismissed =
+			localStorage.getItem(LOCAL_STORAGE_KEYS.NEW_EXTENSION_NOTICE_DISMISSED) === "true";
+		this.newExtensionNoticeSeen = localStorage.getItem(LOCAL_STORAGE_KEYS.NEW_EXTENSION_NOTICE_SEEN) === "true";
 	}
 
 	toggle(): void {
@@ -49,6 +55,18 @@ class SettingsMenuContext {
 
 		localStorage.setItem(LOCAL_STORAGE_KEYS.SEEN_SETTINGS, this.seen.join(","));
 	}
+
+	dismissNewExtensionNotice(): void {
+		this.newExtensionNoticeDismissed = true;
+		localStorage.setItem(LOCAL_STORAGE_KEYS.NEW_EXTENSION_NOTICE_DISMISSED, "true");
+	}
+
+	markNewExtensionNoticeSeen(): void {
+		if (this.newExtensionNoticeSeen) return;
+
+		this.newExtensionNoticeSeen = true;
+		localStorage.setItem(LOCAL_STORAGE_KEYS.NEW_EXTENSION_NOTICE_SEEN, "true");
+	}
 }
 
 const views = {

src/app/settings/SettingsMenu.vue

@@ -246,7 +246,10 @@ function updateSidebarExpansionIndicator() {
 	shouldShowSidebarExpansion.value = container.scrollTop < 3 && container.scrollHeight > container.clientHeight;
 }
 
-onMounted(() => updateSidebarExpansionIndicator());
+onMounted(() => {
+	ctx.markNewExtensionNoticeSeen();
+	updateSidebarExpansionIndicator();
+});
 
 function scrollSidebarToNextPage() {
 	const container = sidebarScroller.value?.container;

src/app/settings/SettingsViewHome.vue

@@ -2,6 +2,24 @@
 	<div class="seventv-settings-home">
 		<div class="seventv-settings-home-body">
 			<UiScrollable>
+				<div v-if="!ctx.newExtensionNoticeDismissed" class="seventv-settings-new-extension-notice">
+					<div class="seventv-settings-new-extension-copy">
+						<strong>Try the new 7TV extension</strong>
+						<span>Give the new 7TV extension a try and see what we've been working on.</span>
+					</div>
+					<div class="seventv-settings-new-extension-actions">
+						<UiButton class="ui-button-important" @click="openNewExtension">Check it out</UiButton>
+						<button
+							v-tooltip="'Dismiss'"
+							aria-label="Dismiss notice"
+							class="seventv-settings-new-extension-dismiss"
+							type="button"
+							@click="ctx.dismissNewExtensionNotice()"
+						>
+							<CloseIcon />
+						</button>
+					</div>
+				</div>
 				<div class="seventv-settings-home-changelog">
 					<Changelog />
 				</div>
@@ -25,8 +43,12 @@
 	</div>
 </template>
 <script setup lang="ts">
+import { useUserAgent } from "@/composable/useUserAgent";
 import Changelog from "@/site/global/Changelog.vue";
+import CloseIcon from "@/assets/svg/icons/CloseIcon.vue";
 import CloudIcon from "@/assets/svg/icons/CloudIcon.vue";
+import { useSettingsMenu } from "./Settings";
+import UiButton from "@/ui/UiButton.vue";
 import UiScrollable from "@/ui/UiScrollable.vue";
 
 const appName = import.meta.env.VITE_APP_NAME;
@@ -35,6 +57,18 @@ const appServer = import.meta.env.VITE_APP_API ?? "Offline";
 const version = import.meta.env.VITE_APP_VERSION;
 const isRemote = seventv.hosted || false;
 const remoteVersion = seventv.host_manifest?.version;
+
+const ctx = useSettingsMenu();
+const { browser } = useUserAgent();
+
+function openNewExtension(): void {
+	const url =
+		browser.name === "Firefox"
+			? "https://addons.mozilla.org/en-US/firefox/addon/7tv-new/"
+			: "https://chromewebstore.google.com/detail/7tv/lppmekppnliemjclknbagdhoocikieoi";
+
+	window.open(url, "_blank");
+}
 </script>
 <style scoped lang="scss">
 .seventv-settings-home {
@@ -47,6 +81,61 @@ const remoteVersion = seventv.host_manifest?.version;
 		min-width: 30rem;
 		overflow: auto;
 
+		.seventv-settings-new-extension-notice {
+			display: grid;
+			grid-template-columns: 1fr auto;
+			align-items: center;
+			column-gap: 1rem;
+			padding: 1rem 1.25rem;
+			border-top: 0.1rem solid var(--seventv-primary);
+			border-bottom: 0.1rem solid var(--seventv-border-transparent-1);
+			background-color: var(--seventv-background-shade-3);
+
+			.seventv-settings-new-extension-copy {
+				display: grid;
+				gap: 0.35rem;
+				min-width: 0;
+
+				> strong {
+					color: var(--seventv-text-color-normal);
+					font-size: 1.3rem;
+				}
+
+				> span {
+					color: var(--seventv-text-color-secondary);
+					line-height: 1.35;
+				}
+			}
+
+			.seventv-settings-new-extension-actions {
+				display: flex;
+				align-items: center;
+				gap: 0.75rem;
+				min-height: 3rem;
+			}
+
+			.seventv-settings-new-extension-dismiss {
+				all: unset;
+				cursor: pointer;
+				display: grid;
+				place-items: center;
+				width: 3rem;
+				height: 3rem;
+				border-radius: 0.25rem;
+				color: var(--seventv-text-color-secondary);
+
+				&:hover {
+					background-color: var(--seventv-highlight-neutral-1);
+					color: var(--seventv-text-color-normal);
+				}
+
+				> svg {
+					width: 1.25rem;
+					height: 1.25rem;
+				}
+			}
+		}
+
 		.seventv-settings-home-changelog {
 			flex-grow: 1;
 		}

src/common/Constant.ts

@@ -6,6 +6,8 @@ export const LOCAL_STORAGE_KEYS = {
 	WORKER_ADDR: "seventv_worker_addr",
 	SEEN_SETTINGS: "seventv_seen_settings",
 	APP_TOKEN: "seventv_app_token",
+	NEW_EXTENSION_NOTICE_DISMISSED: "seventv_new_extension_notice_dismissed",
+	NEW_EXTENSION_NOTICE_SEEN: "seventv_new_extension_notice_seen",
 };
 
 export const REACT_TYPEOF_TOKEN = "$$typeof";

src/content/content.ts

@@ -1,6 +1,19 @@
 import { APP_BROADCAST_CHANNEL } from "@/common/Constant";
 import { insertEmojiVectors } from "./emoji";
 
+const SEVENTV_EXTENSION_EVENT = "seventv:extension-presence";
+const SEVENTV_EXTENSION_LEGACY = "legacy";
+const SEVENTV_EXTENSION_NEXT = "next";
+
+function hasNextExtension(): boolean {
+	return document.documentElement.dataset.seventvExtension === SEVENTV_EXTENSION_NEXT;
+}
+
+function markLegacyRunning(): void {
+	document.documentElement.dataset.seventvExtension = SEVENTV_EXTENSION_LEGACY;
+	window.dispatchEvent(new Event(SEVENTV_EXTENSION_EVENT));
+}
+
 // Inject extension into site
 const inject = () => {
 	// Script
@@ -33,10 +46,14 @@ const inject = () => {
 	}, 1e3);
 };
 
-const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
 (() => {
+	if (hasNextExtension()) return;
+
+	markLegacyRunning();
 	inject();
 
+	const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
+
 	// Listen for requests to set up an extension permission
 	bc.addEventListener("message", (ev) => {
 		switch (ev.data.type) {
@@ -82,31 +99,23 @@ const bc = new BroadcastChannel(APP_BROADCAST_CHANNEL);
 	chrome.runtime.onMessage.addListener((msg) => {
 		switch (msg.type) {
 			case "update-ready": {
-				onUpdateDownloaded(msg.data.version ?? "");
+				bc.postMessage({
+					type: "seventv-update-ready",
+					data: { version: msg.data.version ?? "" },
+				});
 				break;
 			}
 			case "settings-sync": {
-				onSettingsUpdated(msg.data.settings ?? []);
+				bc.postMessage({
+					type: "seventv-settings-sync",
+					data: { nodes: msg.data.settings ?? [] },
+				});
 				break;
 			}
 		}
 	});
 })();
 
-function onUpdateDownloaded(version: string): void {
-	bc.postMessage({
-		type: "seventv-update-ready",
-		data: { version },
-	});
-}
-
-function onSettingsUpdated(settings: SevenTV.Setting<SevenTV.SettingNode>[]): void {
-	bc.postMessage({
-		type: "seventv-settings-sync",
-		data: { nodes: settings },
-	});
-}
-
 interface PermissionRequestEvent {
 	selector: string;
 	id: string;

src/site/site.app.ts

@@ -8,10 +8,23 @@ import { TooltipDirective } from "@/directive/TooltipDirective";
 import { setupI18n } from "@/i18n";
 import { ApolloClients } from "@vue/apollo-composable";
 
+const SEVENTV_EXTENSION_EVENT = "seventv:extension-presence";
+const SEVENTV_EXTENSION_LEGACY = "legacy";
+const SEVENTV_EXTENSION_NEXT = "next";
+
 if (!("seventv" in window)) {
 	(window as Window & { seventv?: SeventvGlobalScope }).seventv = { host_manifest: null };
 }
 
+const scr = document.querySelector("script#seventv-extension");
+
+if (document.documentElement.dataset.seventvExtension === SEVENTV_EXTENSION_NEXT) {
+	throw new Error("7TV Next running not startinng up");
+}
+
+document.documentElement.dataset.seventvExtension = SEVENTV_EXTENSION_LEGACY;
+window.dispatchEvent(new Event(SEVENTV_EXTENSION_EVENT));
+
 const appID = Date.now().toString();
 
 // Sanity Check
@@ -48,8 +61,6 @@ root.setAttribute("data-app-id", appID);
 
 document.body.append(root);
 
-const scr = document.querySelector("script#seventv-extension");
-
 const app = createApp({
 	setup() {
 		provide(ApolloClients, {