From 7a4b659a8e324ece9c85cb14f597bc60d7c94247 Mon Sep 17 00:00:00 2001
From: Mehrad Rousta <mehrad@protonmail.com>
Date: Sun, 15 Dec 2024 19:36:46 +0330
Subject: [PATCH] feat: add font

---
 src/contents/Counter.tsx               |   5 ++--
 src/contents/Text.tsx                  |   2 +-
 src/contents/types.ts                  |  32 +++++++++++++------------
 src/renderer/App.css                   |   7 ++++++
 src/renderer/App.tsx                   |   2 --
 src/renderer/Mahmood-Regular.ttf       | Bin 0 -> 24136 bytes
 src/renderer/pages/Controller.css      |   4 ++++
 src/renderer/pages/ControllerPanel.tsx |   4 +++-
 src/renderer/pages/Projector.css       |   5 ++--
 tailwind.config.js                     |   6 ++++-
 10 files changed, 41 insertions(+), 26 deletions(-)
 create mode 100644 src/renderer/Mahmood-Regular.ttf

diff --git a/src/contents/Counter.tsx b/src/contents/Counter.tsx
index 5d097b4..5662087 100644
--- a/src/contents/Counter.tsx
+++ b/src/contents/Counter.tsx
@@ -85,11 +85,10 @@ function CounterRenderer({ content }: RendererProps<CounterContent>) {
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        border: '1px solid black',
-        fontSize: '20px',
+        fontSize: content.fontSize,
       }}
     >
-      {content.paused ? 'Paused' : content.count}
+      {content.count}
     </div>
   );
 }
diff --git a/src/contents/Text.tsx b/src/contents/Text.tsx
index 2a3858f..14d6ad6 100644
--- a/src/contents/Text.tsx
+++ b/src/contents/Text.tsx
@@ -60,7 +60,7 @@ function TextRenderer({ content }: RendererProps<TextContent>) {
         color: content.color,
         // textAlign: content.alignment as 'left' | 'center' | 'right',
       }}
-      className="flex items-center justify-center border border-gray-300"
+      className="flex items-center justify-center"
     >
       {content.text}
     </div>
diff --git a/src/contents/types.ts b/src/contents/types.ts
index 8e62e1f..d809d7e 100644
--- a/src/contents/types.ts
+++ b/src/contents/types.ts
@@ -3,14 +3,14 @@ export type Position = { top: string; left: string }; // Position coordinates fo
 export type Size = { width: string; height: string }; // Size dimensions for content
 
 // Content Types
-export interface BaseContent {
-  id: string; // Unique identifier for the content
-  name?: string; // Name of the content
-  type: 'image' | 'video' | 'audio' | 'text' | 'counter'; // Type of content
-  show: boolean; // Visibility toggle
-  position: Position; // Content's position on screen
-  size: Size; // Dimensions of the content
-  layout?: any; // for positioning in the controller grid
+interface BaseContent {
+  id: string;
+  name?: string;
+  type: 'image' | 'video' | 'audio' | 'text' | 'counter';
+  show: boolean;
+  position: Position;
+  size: Size;
+  layout?: any;
 }
 
 export interface ImageContent extends BaseContent {
@@ -28,22 +28,24 @@ export interface VideoContent extends BaseContent {
 
 export interface AudioContent extends BaseContent {
   type: 'audio';
-  file: string; // Base64-encoded audio file
-  autoplay?: boolean; // Autoplay toggle
-  loop?: boolean; // Loop playback toggle
-  volume: number; // Volume level (0 to 100)
+  file: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  volume: number;
 }
 
 export interface TextContent extends BaseContent {
   type: 'text';
-  text: string; // The text string to display
-  fontSize: string; // Font size (e.g., "16px")
-  color: string; // Font color (e.g., "#000000")
+  text: string;
+  fontSize: string;
+  color: string;
 }
 
 export interface CounterContent extends BaseContent {
   type: 'counter';
   count: number;
+  fontSize: string;
+  color: string;
   paused: boolean;
 }
 
diff --git a/src/renderer/App.css b/src/renderer/App.css
index b5c61c9..1ef2128 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+  font-family: 'Mahmood';
+  src: url('./Mahmood-Regular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index dd4461b..af7e10b 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -1,7 +1,5 @@
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
-import 'react-grid-layout/css/styles.css';
-import 'react-resizable/css/styles.css';
 import { ControllerPanel } from './pages/ControllerPanel';
 import { ProjectorPanel } from './pages/ProjectorPanel';
 
diff --git a/src/renderer/Mahmood-Regular.ttf b/src/renderer/Mahmood-Regular.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..127720433eab8373613bfd9220c61392714103f8
GIT binary patch
literal 24136
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

literal 0
HcmV?d00001

diff --git a/src/renderer/pages/Controller.css b/src/renderer/pages/Controller.css
index 6da5407..786cdea 100644
--- a/src/renderer/pages/Controller.css
+++ b/src/renderer/pages/Controller.css
@@ -1,3 +1,7 @@
+body {
+  @apply font-sans;
+}
+
 .ctrl-main {
   display: flex;
   flex-direction: row;
diff --git a/src/renderer/pages/ControllerPanel.tsx b/src/renderer/pages/ControllerPanel.tsx
index 95702a5..59bf717 100644
--- a/src/renderer/pages/ControllerPanel.tsx
+++ b/src/renderer/pages/ControllerPanel.tsx
@@ -9,6 +9,8 @@ import {
 import { getFileBlob, revokeBlobUrl } from '../../fileUtils';
 import { ContentControllerFactory } from '../../contents/ContentControllerFactory';
 import type { Content } from '../../contents/types';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
 import './Controller.css';
 
 const getDefaultHeight = (type: string) => {
@@ -122,7 +124,7 @@ export const ControllerPanel: React.FC = () => {
   };
 
   return (
-    <div className="h-screen w-screen flex flex-col">
+    <div className="h-screen w-screen flex flex-col font-sans">
       {/* Top Bar */}
       <div className="flex justify-between items-center px-4 py-2 bg-gray-800">
         <div className="flex space-x-2">
diff --git a/src/renderer/pages/Projector.css b/src/renderer/pages/Projector.css
index cfeaef2..30a200d 100644
--- a/src/renderer/pages/Projector.css
+++ b/src/renderer/pages/Projector.css
@@ -2,11 +2,11 @@
  * Projector.css
  */
 body {
+  @apply font-mahmood;
   position: relative;
   background-color: #000;
   color: white;
   height: 100vh;
-  font-family: sans-serif;
   overflow-y: hidden;
   display: flex;
   justify-content: center;
@@ -33,7 +33,6 @@ body {
   display: none;
 }
 
-
 .proj-counter-wrapper {
   /* Positioned absolutely based on inline styles */
   padding: 10px;
@@ -41,7 +40,7 @@ body {
   z-index: 10;
   margin: 10px;
   padding: 2rem;
-  background-color: #FFF;
+  background-color: #fff;
   text-align: center;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 08714d6..b1f6fd5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,11 @@
 module.exports = {
   content: ['./src/**/*.{html,ts,tsx,js,jsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        mahmood: ['Mahmood', 'sans-serif'],
+      },
+    },
   },
   plugins: [],
 };