| undefined> = {}
let rafId = 0
function reduceMotion() {
@@ -20,20 +18,10 @@ export function useTvColAutoScroll(keys: string[]) {
function pauseColAuto(key: string) {
paused[key] = true
- if (resumeTimers[key]) {
- clearTimeout(resumeTimers[key])
- resumeTimers[key] = undefined
- }
}
- function scheduleColAuto(key: string) {
- if (resumeTimers[key]) {
- clearTimeout(resumeTimers[key])
- }
- resumeTimers[key] = setTimeout(() => {
- paused[key] = false
- resumeTimers[key] = undefined
- }, AUTO_RESUME_MS)
+ function resumeColAuto(key: string) {
+ paused[key] = false
}
function tick() {
@@ -42,11 +30,14 @@ export function useTvColAutoScroll(keys: string[]) {
if (paused[key]) continue
const el = listEls[key]
if (!el) continue
+ const overflow = el.scrollHeight - el.clientHeight
+ if (overflow <= 1) continue
const half = el.scrollHeight / 2
- if (half <= el.clientHeight + 8) continue
el.scrollTop += AUTO_PX_PER_FRAME
- if (el.scrollTop >= half) {
+ if (half > el.clientHeight && el.scrollTop >= half) {
el.scrollTop -= half
+ } else if (el.scrollTop >= overflow) {
+ el.scrollTop = 0
}
}
}
@@ -59,15 +50,12 @@ export function useTvColAutoScroll(keys: string[]) {
onUnmounted(() => {
cancelAnimationFrame(rafId)
- for (const key of keys) {
- if (resumeTimers[key]) clearTimeout(resumeTimers[key])
- }
})
return {
pausedCols: paused,
setColListRef,
pauseColAuto,
- scheduleColAuto,
+ resumeColAuto,
}
}
diff --git a/src/views/tv/composables/useTvMonitorPage.ts b/src/views/tv/composables/useTvMonitorPage.ts
index bce0708..c1d61bd 100644
--- a/src/views/tv/composables/useTvMonitorPage.ts
+++ b/src/views/tv/composables/useTvMonitorPage.ts
@@ -38,7 +38,10 @@ function isParsianCoin(product: Product) {
function isBankCoin(product: Product) {
if (isParsianCoin(product)) return false
const group = (product.group_type ?? '').trim()
- return group === 'سکه' || group === 'سکه بانکی' || (group.includes('سکه') && !group.includes('پارسیان'))
+ const title = (product.title ?? '').trim()
+ if (group === 'سکه' || group === 'سکه بانکی') return true
+ if (group.includes('سکه') && !group.includes('پارسیان')) return true
+ return title.includes('بانکی')
}
function bankCoinRank(product: Product) {
diff --git a/src/views/tv/index.vue b/src/views/tv/index.vue
index 98b4ac0..d6564b4 100644
--- a/src/views/tv/index.vue
+++ b/src/views/tv/index.vue
@@ -90,7 +90,7 @@
:ref="(el) => setColListRef(col.key, el)"
class="tv-col__list"
@mouseenter="pauseColAuto(col.key)"
- @mouseleave="scheduleColAuto(col.key)"
+ @mouseleave="resumeColAuto(col.key)"
>
= 2 && !prefersReducedMotion() ? [0, 1] : [0]
+ return count >= 1 && !prefersReducedMotion() ? [0, 1] : [0]
}
function loopTicker(items: Product[]) {
if (!items.length) return []
- return [0, 1].flatMap((copy) => items.map((product) => ({ product, copy })))
+ const copies = items.length >= 2 && !prefersReducedMotion() ? [0, 1] : [0]
+ return copies.flatMap((copy) => items.map((product) => ({ product, copy })))
}
const shamsTickerLoop = computed(() => loopTicker(tickerProducts.value))
@@ -281,7 +282,7 @@ const coinColumns = computed(() => [
},
{
key: 'bank',
- title: 'سکه بانکی',
+ title: 'سکه',
hint: 'دسته سکه',
empty: 'سکهای برای نمایش نیست',
items: bankCoins.value,
@@ -592,10 +593,20 @@ const coinColumns = computed(() => [
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
- scrollbar-width: thin;
- scrollbar-color: color-mix(in srgb, var(--tv-primary) 42%, transparent) transparent;
+ overscroll-behavior: contain;
+ container-type: size;
+ scrollbar-width: none;
+
+ &:hover {
+ scrollbar-width: thin;
+ scrollbar-color: color-mix(in srgb, var(--tv-primary) 42%, transparent) transparent;
+ }
&::-webkit-scrollbar {
+ width: 0;
+ }
+
+ &:hover::-webkit-scrollbar {
width: 6px;
}
@@ -611,13 +622,17 @@ const coinColumns = computed(() => [
.tv-col__track {
display: flex;
+ flex-shrink: 0;
flex-direction: column;
}
.tv-col__group {
display: flex;
+ flex-shrink: 0;
flex-direction: column;
gap: 8px;
+ box-sizing: border-box;
+ min-height: 100cqh;
padding-bottom: 8px;
}