Add support for MacOS

erfanmola · Jan 19, 2025 · f3b8758 · f3b8758
1 parent 221c83d
commit f3b8758
Show file tree

Hide file tree

Showing 22 changed files with 955 additions and 220 deletions.
diff --git a/src/renderer/src/components/DeviceFrames.scss b/src/renderer/src/components/DeviceFrames.scss
@@ -64,7 +64,7 @@
 	}
 }
 
-#frame-desktop {
+#frame-tdesktop {
 	display: flex;
 	aspect-ratio: 0.566;
 	max-width: 100%;
@@ -79,9 +79,25 @@
 	}
 }
 
+#frame-macos {
+	display: flex;
+	aspect-ratio: 0.621;
+	max-width: 100%;
+	height: 70%;
+	position: relative;
+	overflow: hidden;
+
+	> div {
+		display: flex;
+		flex-grow: 1;
+		overflow: hidden;
+	}
+}
+
 #frame-iphone,
 #frame-android,
-#frame-desktop {
+#frame-tdesktop,
+#frame-macos {
 	&.placeholder {
 		background-color: var(--device-frame-color-placeholder);
 		border-color: var(--device-frame-border-placeholder);
@@ -106,6 +122,10 @@
 	border-radius: 12% / 6%;
 }
 
-#frame-desktop.placeholder {
+#frame-tdesktop.placeholder {
+	border-radius: 0.625rem;
+}
+
+#frame-macos.placeholder {
 	border-radius: 0.625rem;
 }
diff --git a/src/renderer/src/components/DeviceFrames.tsx b/src/renderer/src/components/DeviceFrames.tsx
@@ -2,7 +2,7 @@ import "./DeviceFrames.scss";
 
 import type { ParentComponent } from "solid-js";
 
-export const IPhoneFrame: ParentComponent<{
+export const FrameIPhone: ParentComponent<{
 	classList?: {
 		[k: string]: boolean | undefined;
 	};
@@ -14,7 +14,7 @@ export const IPhoneFrame: ParentComponent<{
 	);
 };
 
-export const AndroidFrame: ParentComponent<{
+export const FrameAndroid: ParentComponent<{
 	classList?: {
 		[k: string]: boolean | undefined;
 	};
@@ -26,13 +26,25 @@ export const AndroidFrame: ParentComponent<{
 	);
 };
 
-export const DesktopFrame: ParentComponent<{
+export const FrameDesktop: ParentComponent<{
 	classList?: {
 		[k: string]: boolean | undefined;
 	};
 }> = (props) => {
 	return (
-		<div id="frame-desktop" classList={props.classList}>
+		<div id="frame-tdesktop" classList={props.classList}>
+			<div>{props.children}</div>
+		</div>
+	);
+};
+
+export const FrameMacOS: ParentComponent<{
+	classList?: {
+		[k: string]: boolean | undefined;
+	};
+}> = (props) => {
+	return (
+		<div id="frame-macos" classList={props.classList}>
 			<div>{props.children}</div>
 		</div>
 	);

diff --git a/src/renderer/src/components/DialogCreateProject.tsx b/src/renderer/src/components/DialogCreateProject.tsx
@@ -14,6 +14,7 @@ import Input from "./Input";
 import { isValidURL } from "@renderer/utils/general";
 import type { TelegramPlatform } from "@renderer/utils/themes";
 import Alert from "./Alert";
+import { defaultProjectSettings } from "@renderer/utils/telegram";
 
 const DialogCreateProject: Component = () => {
 	const [form, setForm] = createStore({
@@ -50,24 +51,17 @@ const DialogCreateProject: Component = () => {
 			token: form.token,
 		};
 
-		const defaultSettings: Project["settings"][TelegramPlatform] = {
-			expanded: false,
-			mode: "light",
-			open: true,
-			floating: false,
-		};
-
 		setPreferences("projects", [
 			...preferences.projects,
 			{
 				...project,
 				settings: {
-					android: defaultSettings,
-					ios: defaultSettings,
-					tdesktop: defaultSettings,
-					web: defaultSettings,
-					weba: defaultSettings,
-					macos: defaultSettings,
+					android: defaultProjectSettings,
+					ios: defaultProjectSettings,
+					tdesktop: defaultProjectSettings,
+					web: defaultProjectSettings,
+					weba: defaultProjectSettings,
+					macos: defaultProjectSettings,
 				},
 			},
 		]);

diff --git a/src/renderer/src/components/FloatingProject.scss b/src/renderer/src/components/FloatingProject.scss
@@ -29,7 +29,8 @@ body.floating-project {
 
 	#section-telegram-ios,
 	#section-telegram-android,
-	#section-telegram-tdesktop {
+	#section-telegram-tdesktop,
+	#section-telegram-macos {
 		> div {
 			width: 100%;
 
@@ -43,11 +44,13 @@ body.floating-project {
 
 	#frame-iphone,
 	#frame-android,
-	#frame-desktop {
+	#frame-tdesktop,
+	#frame-macos {
 		width: 100% !important;
 	}
 
-	#viewport-telegram-desktop {
+	#viewport-telegram-tdesktop,
+	#viewport-telegram-macos {
 		> section {
 			> header {
 				> div {

diff --git a/src/renderer/src/components/FloatingProject.tsx b/src/renderer/src/components/FloatingProject.tsx
@@ -11,11 +11,15 @@ import { initStore } from "@renderer/utils/store";
 import { preferences, setPreferences } from "@renderer/utils/preferences";
 import { createStore, produce } from "solid-js/store";
 import type { TMAProjectFrame } from "@renderer/pages/Project";
-import { generateProjectFrame } from "@renderer/utils/telegram";
+import {
+	defaultProjectSettings,
+	generateProjectFrame,
+} from "@renderer/utils/telegram";
 import { deserializeObject } from "@renderer/utils/general";
 import { useSettings } from "@renderer/contexts/SettingsContext";
 import { PlatformNames } from "@renderer/utils/platforms";
 import { ViewportDesktop } from "@renderer/sections/ViewportDesktop";
+import { ViewportMacOS } from "@renderer/sections/ViewportMacOS";
 
 const FloatingProject: Component = () => {
 	const params = useParams();
@@ -40,12 +44,14 @@ const FloatingProject: Component = () => {
 				const projectItem = store.projects.find(
 					(item) => item.id === project.id,
 				);
+
 				if (projectItem) {
-					projectItem.settings[platform].mode = projectFrame.state.mode;
-					projectItem.settings[platform].expanded = projectFrame.state.expanded;
-					projectItem.settings[platform].open = projectFrame.state.open;
-					projectItem.settings[platform].floating =
-						projectFrame.window.floating;
+					projectItem.settings[platform] = {
+						expanded: projectFrame.state.expanded,
+						floating: projectFrame.window.floating,
+						mode: projectFrame.state.mode,
+						open: projectFrame.state.open,
+					};
 				}
 			}),
 		);
@@ -61,67 +67,50 @@ const FloatingProject: Component = () => {
 	});
 
 	return (
-		<Switch>
-			<Match when={platform === "android"}>
-				<div id={`section-telegram-${platform}`}>
-					<div>
-						<HeaderWidget
-							project={project}
-							platform={platform}
-							title={`Telegram ${PlatformNames[projectFrame.platform]}`}
-							projectFrameStore={[projectFrame, setProjectFrame]}
-							placeholder={false}
-						/>
-
+		<div id={`section-telegram-${platform}`}>
+			<div>
+				<HeaderWidget
+					project={project}
+					platform={platform}
+					title={`Telegram ${PlatformNames[projectFrame.platform]}`}
+					projectFrameStore={[projectFrame, setProjectFrame]}
+					placeholder={false}
+				/>
+				<Switch>
+					<Match when={platform === "android"}>
 						<ViewportAndroid
 							project={project}
 							projectFrameStore={[projectFrame, setProjectFrame]}
 							placeholder={false}
 						/>
-					</div>
-				</div>
-			</Match>
-
-			<Match when={platform === "ios"}>
-				<div id={`section-telegram-${platform}`}>
-					<div>
-						<HeaderWidget
-							project={project}
-							platform={platform}
-							title={`Telegram ${PlatformNames[projectFrame.platform]}`}
-							projectFrameStore={[projectFrame, setProjectFrame]}
-							placeholder={false}
-						/>
+					</Match>
 
+					<Match when={platform === "ios"}>
 						<ViewportIOS
 							project={project}
 							projectFrameStore={[projectFrame, setProjectFrame]}
 							placeholder={false}
 						/>
-					</div>
-				</div>
-			</Match>
+					</Match>
 
-			<Match when={platform === "tdesktop"}>
-				<div id={`section-telegram-${platform}`}>
-					<div>
-						<HeaderWidget
+					<Match when={platform === "tdesktop"}>
+						<ViewportDesktop
 							project={project}
-							platform={platform}
-							title={`Telegram ${PlatformNames[projectFrame.platform]}`}
 							projectFrameStore={[projectFrame, setProjectFrame]}
 							placeholder={false}
 						/>
+					</Match>
 
-						<ViewportDesktop
+					<Match when={platform === "macos"}>
+						<ViewportMacOS
 							project={project}
 							projectFrameStore={[projectFrame, setProjectFrame]}
 							placeholder={false}
 						/>
-					</div>
-				</div>
-			</Match>
-		</Switch>
+					</Match>
+				</Switch>
+			</div>
+		</div>
 	);
 };
 

diff --git a/src/renderer/src/components/PlatformToggle.tsx b/src/renderer/src/components/PlatformToggle.tsx
@@ -10,7 +10,7 @@ import { produce } from "solid-js/store";
 export const PlatformToggle: Component = () => {
 	return (
 		<ul id="container-platform-toggle">
-			<For each={["android", "ios", "tdesktop"] as TelegramPlatform[]}>
+			<For each={["ios", "android", "tdesktop", "macos"] as TelegramPlatform[]}>
 				{(platform) => {
 					setPreferences(
 						produce((state) => {

diff --git a/src/renderer/src/pages/Preferences.tsx b/src/renderer/src/pages/Preferences.tsx
@@ -187,7 +187,9 @@ const PreferencesPage: Component = () => {
 				<h2>Viewport Settings</h2>
 
 				<ul>
-					<For each={["android", "ios", "tdesktop"] as TelegramPlatform[]}>
+					<For
+						each={["android", "ios", "tdesktop", "macos"] as TelegramPlatform[]}
+					>
 						{(platform) => (
 							<li>
 								<span>{PlatformNames[platform]} Viewport</span>

diff --git a/src/renderer/src/pages/Project.scss b/src/renderer/src/pages/Project.scss
@@ -25,14 +25,16 @@
 
 #section-telegram-ios,
 #section-telegram-android,
-#section-telegram-tdesktop {
+#section-telegram-tdesktop,
+#section-telegram-macos {
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
 	flex-shrink: 0;
 	align-items: center;
 	justify-content: center;
 	overflow: hidden;
+	flex-basis: 0;
 
 	> div {
 		display: flex;