fix tv 3

src/views/tv/composables/useTvMonitorPage.ts

@@ -61,7 +61,7 @@ function isSimorghBar(product: Product) {
 
 export function useTvMonitorPage() {
   const rootEl = ref<HTMLElement | null>(null)
-  const { isFullscreen, enter: enterFullscreen } = useFullscreen(rootEl)
+  const { isFullscreen, enter: enterFullscreen, exit: exitFullscreen } = useFullscreen(rootEl)
 
   const products = ref<Product[]>([])
   const loading = ref(true)
@@ -199,14 +199,17 @@ export function useTvMonitorPage() {
     }
   }
 
-  async function handleBoardClick() {
+  async function toggleFullscreen(event?: Event) {
+    event?.stopPropagation()
     hideCursorSoon()
-    if (!isFullscreen.value) {
-      try {
+    try {
+      if (isFullscreen.value) {
+        await exitFullscreen()
+      } else {
         await enterFullscreen()
-      } catch {
-        /* browser may require a later gesture */
       }
+    } catch {
+      /* browser may block without gesture */
     }
   }
 
@@ -268,12 +271,6 @@ export function useTvMonitorPage() {
     }, REFRESH_MS)
 
     document.title = `${brandName.value} | تابلو قیمت`
-
-    try {
-      await enterFullscreen()
-    } catch {
-      /* ignored until user clicks */
-    }
   })
 
   onUnmounted(() => {
@@ -313,6 +310,6 @@ export function useTvMonitorPage() {
     productBuyLabel,
     productSellLabel,
     liveQuoteLabel,
-    handleBoardClick,
+    toggleFullscreen,
   }
 }

src/views/tv/index.vue

@@ -5,7 +5,6 @@
     :class="[`tv-monitor--${theme}`, { 'tv-monitor--idle': cursorHidden }]"
     :style="themeVars"
     dir="rtl"
-    @click="handleBoardClick"
   >
     <header class="tv-monitor__header">
       <div class="tv-monitor__brand">
@@ -31,15 +30,29 @@
       </div>
 
       <div class="tv-monitor__clock">
-        <button
-          type="button"
-          class="tv-monitor__theme-toggle"
-          :title="theme === 'dark' ? 'تم روشن' : 'تم تیره'"
-          @click="toggleTheme"
-        >
-          <BasicIcon :icon="theme === 'dark' ? 'vuesax-linear:sun-1' : 'vuesax-linear:moon'" size="18" />
-          <span>{{ theme === 'dark' ? 'تم روشن' : 'تم تیره' }}</span>
-        </button>
+        <div class="tv-monitor__toolbar">
+          <button
+            type="button"
+            class="tv-monitor__theme-toggle"
+            :title="theme === 'dark' ? 'تم روشن' : 'تم تیره'"
+            @click="toggleTheme"
+          >
+            <BasicIcon :icon="theme === 'dark' ? 'vuesax-linear:sun-1' : 'vuesax-linear:moon'" size="18" />
+            <span>{{ theme === 'dark' ? 'تم روشن' : 'تم تیره' }}</span>
+          </button>
+          <button
+            type="button"
+            class="tv-monitor__theme-toggle"
+            :title="isFullscreen ? 'خروج از تمام‌صفحه' : 'تمام‌صفحه'"
+            @click="toggleFullscreen"
+          >
+            <BasicIcon
+              :icon="isFullscreen ? 'vuesax-linear:maximize-circle' : 'vuesax-linear:maximize-4'"
+              size="18"
+            />
+            <span>{{ isFullscreen ? 'خروج تمام‌صفحه' : 'تمام‌صفحه' }}</span>
+          </button>
+        </div>
         <div class="tv-monitor__time">{{ nowLabel }}</div>
         <div class="tv-monitor__date">{{ dateLabel }}</div>
         <div class="tv-monitor__live" :class="{ 'is-on': isLive }">
@@ -141,10 +154,6 @@
       </a-spin>
     </main>
 
-    <p v-if="!isFullscreen" class="tv-monitor__hint">
-      برای نمایش تمام‌صفحه روی صفحه کلیک کنید
-    </p>
-
     <footer class="tv-monitor__footer">
       <div
         v-if="tickerProducts.length"
@@ -216,7 +225,7 @@ const {
   productBuyLabel,
   productSellLabel,
   liveQuoteLabel,
-  handleBoardClick,
+  toggleFullscreen,
 } = useTvMonitorPage()
 </script>
 
@@ -359,11 +368,19 @@ const {
   text-align: left;
 }
 
+.tv-monitor__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-bottom: 8px;
+}
+
 .tv-monitor__theme-toggle {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 8px;
+  margin-bottom: 0;
   padding: 6px 12px;
   border: 1px solid var(--tv-border);
   border-radius: 999px;
@@ -511,9 +528,10 @@ const {
   display: grid;
   flex: 1;
   min-height: 0;
+  /* با آیتم کم کش نیاید؛ با آیتم زیاد فضای ستون را پر کند */
   grid-auto-rows: minmax(
-    52px,
-    calc((100% - (var(--tv-row-count) - 1) * 8px) / var(--tv-row-count))
+    64px,
+    min(88px, calc((100% - (var(--tv-row-count) - 1) * 8px) / var(--tv-row-count)))
   );
   align-content: start;
   gap: 8px;
@@ -536,10 +554,11 @@ const {
   align-items: center;
   gap: 10px;
   height: 100%;
+  max-height: 88px;
   min-height: 0;
   min-width: 0;
   overflow: hidden;
-  padding: 6px 10px;
+  padding: 8px 12px;
   border-radius: 16px;
   background: var(--tv-card);
   color: var(--tv-card-text);
@@ -686,24 +705,6 @@ const {
   margin-bottom: calc(-1 * clamp(12px, 1.6vh, 24px));
 }
 
-.tv-monitor__hint {
-  position: absolute;
-  top: clamp(12px, 1.6vh, 24px);
-  left: 50%;
-  z-index: 4;
-  margin: 0;
-  padding: 6px 12px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--tv-card) 88%, transparent);
-  border: 1px solid var(--tv-border);
-  color: var(--tv-muted);
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-  pointer-events: none;
-  transform: translateX(-50%);
-}
-
 .tv-monitor__credit {
   display: flex;
   align-items: center;