Podcast — پادکست و پخش روی داک شیشه‌ای

با زدن پخش روی هر اپیزود، کل فهرست از همان اپیزود در صف پخش‌کنندهٔ داک می‌نشیند و پخش روی داک شیشه‌ای پایین صفحه ادامه پیدا می‌کند. پخش‌کننده بخشی از خود داک است و عنصر صوتی بیرون از درخت React ساخته می‌شود؛ پس با رفتن به صفحهٔ دیگر قطع نمی‌شود. پخش‌کننده سه نما دارد: کوچک (پیش‌فرض)، کوچک‌شده (دیسک یا زبانه روی لبهٔ داک) و بزرگ (برگهٔ زندهٔ داک با صف پخش).

وضعیت: beta · لایه: ۴ (@tokapps/patternsکپی کد) + پخش‌کنندهٔ داک (لایهٔ ۳، @tokapps/tuk/dockکپی کد) · فراداده: packages/patterns/src/podcast/Podcast.metadata.jsonکپی کد · Storybook: TUK/Patterns/Podcastکپی کد (Identitiesکپی کد، PlayerVariantsکپی کد، OnDockکپی کد)

قاعدهٔ اجباری (media-on-dock-playerکپی کد): پخش صدا در هر پروژهٔ TDS فقط با همین پخش‌کنندهٔ داک انجام می‌شود. ساختن پخش‌کنندهٔ محلی — عنصر <audio>کپی کد، new Audio()کپی کد، HTMLAudioElementکپی کد، کتابخانهٔ پخش‌کننده (react-player/howler/plyr/…) یا کلید کوچک‌کردن اختصاصی — ممنوع است و validate_agent_outputکپی کد آن را با کد layout/media-player-kitکپی کد رد می‌کند. سه نما (کوچک، کوچک‌شده/دیسک، بزرگ)، صف پخش، سرعت، دریافت/اشتراک، Media Session و ادامهٔ پخش با تغییر صفحه از خود پخش‌کننده می‌آید و بازسازی‌شدنی نیست؛ فهرست اپیزودها با این الگو و پخش‌های پراکنده با playOnDockکپی کد. کامپوننت قدیمی ChapteredAudioPlayerکپی کد در @tokapps/tuk/mediaکپی کد منسوخ است.

import { Podcast } from '@tokapps/patterns';import { playOnDock, dockPlayer } from '@tokapps/tuk/dock';

نمونهٔ زنده

یک اپیزود را پخش کنید، سپس از منوی داک به صفحهٔ دیگری بروید: صدا ادامه دارد. صدای نمونه در مرورگر ساخته می‌شود (بدون فایل و بدون شبکه).

طراحی محصول

پادکست توکاپس

تیم طراحی توکاپس

گفتگو دربارهٔ ساختن محصول، طراحی سیستم و تجربهٔ کاربری — هر هفته یک اپیزود کوتاه.

۵ اپیزود · ۳:۲۱

پخش همهپخش تصادفی

1. 
   اپیزود ۶

   داک شیشه‌ای: چرا ناوبری پایین؟

   از تصمیم حذف نوار بالا تا شش کلید ثابت داک؛ اینکه شست کاربر کجا راحت است.

   ۲۰ مهر ۱۴۰۵۰:۴۲

   افزودن به صف
2. 
   اپیزود ۵

   هویت متغیر، بنیان ثابت

   چطور شش تم با یک کامپوننت متفاوت حرکت می‌کنند بدون اینکه ساختار عوض شود.

   ۱۳ مهر ۱۴۰۵۰:۳۸

   افزودن به صف
3. 
   اپیزود ۴

   رنگ هفت‌رنگ فقط برای حاشیه

   گرادیان کجا مجاز است و چرا رنگ هرگز تنها نشانهٔ وضعیت نیست.

   ۶ مهر ۱۴۰۵۰:۴۵

   افزودن به صف
4. 
   اپیزود ۳

   صدا همیشه انتخابی است

   صدای رابط پیش‌فرض خاموش است؛ هر رویداد صوتی معادل دیداری دارد.

   ۳۰ شهریور ۱۴۰۵۰:۳۶

   افزودن به صف
5. 
   اپیزود ۲

   راست‌به‌چپ از روز اول

   متن ترکیبی فارسی و انگلیسی، ارقام و کنترل‌های رسانه‌ای که برنمی‌گردند.

   ۲۳ شهریور ۱۴۰۵۰:۴۰

   افزودن به صف

قفسهٔ کاورها (layout="shelf"کپی کد) — کشیدن افقی با نقطه‌گیری

طراحی محصول

پادکست توکاپس

تیم طراحی توکاپس

گفتگو دربارهٔ ساختن محصول، طراحی سیستم و تجربهٔ کاربری — هر هفته یک اپیزود کوتاه.

۵ اپیزود · ۳:۲۱

پخش همهپخش تصادفی

1. 
   اپیزود ۶

   داک شیشه‌ای: چرا ناوبری پایین؟

   از تصمیم حذف نوار بالا تا شش کلید ثابت داک؛ اینکه شست کاربر کجا راحت است.

   ۲۰ مهر ۱۴۰۵۰:۴۲

   افزودن به صف
2. 
   اپیزود ۵

   هویت متغیر، بنیان ثابت

   چطور شش تم با یک کامپوننت متفاوت حرکت می‌کنند بدون اینکه ساختار عوض شود.

   ۱۳ مهر ۱۴۰۵۰:۳۸

   افزودن به صف
3. 
   اپیزود ۴

   رنگ هفت‌رنگ فقط برای حاشیه

   گرادیان کجا مجاز است و چرا رنگ هرگز تنها نشانهٔ وضعیت نیست.

   ۶ مهر ۱۴۰۵۰:۴۵

   افزودن به صف
4. 
   اپیزود ۳

   صدا همیشه انتخابی است

   صدای رابط پیش‌فرض خاموش است؛ هر رویداد صوتی معادل دیداری دارد.

   ۳۰ شهریور ۱۴۰۵۰:۳۶

   افزودن به صف
5. 
   اپیزود ۲

   راست‌به‌چپ از روز اول

   متن ترکیبی فارسی و انگلیسی، ارقام و کنترل‌های رسانه‌ای که برنمی‌گردند.

   ۲۳ شهریور ۱۴۰۵۰:۴۰

   افزودن به صف

سربرگ بزرگ (layout="featured"کپی کد) — پس‌زمینه همان کاور است، بسیار تار (بدون گرادیان)

طراحی محصول

پادکست توکاپس

تیم طراحی توکاپس

گفتگو دربارهٔ ساختن محصول، طراحی سیستم و تجربهٔ کاربری — هر هفته یک اپیزود کوتاه.

۳ اپیزود · ۲:۰۵

پخش همهپخش تصادفی

1. 
   اپیزود ۶

   داک شیشه‌ای: چرا ناوبری پایین؟

   از تصمیم حذف نوار بالا تا شش کلید ثابت داک؛ اینکه شست کاربر کجا راحت است.

   ۲۰ مهر ۱۴۰۵۰:۴۲

   افزودن به صف
2. 
   اپیزود ۵

   هویت متغیر، بنیان ثابت

   چطور شش تم با یک کامپوننت متفاوت حرکت می‌کنند بدون اینکه ساختار عوض شود.

   ۱۳ مهر ۱۴۰۵۰:۳۸

   افزودن به صف
3. 
   اپیزود ۴

   رنگ هفت‌رنگ فقط برای حاشیه

   گرادیان کجا مجاز است و چرا رنگ هرگز تنها نشانهٔ وضعیت نیست.

   ۶ مهر ۱۴۰۵۰:۴۵

   افزودن به صف

فهرست موسیقی (kind="music"کپی کد، layout="compact"کپی کد)

آلبوم · بی‌کلام

صداهای داک

گروه موسیقی توکاپس

قطعه‌های کوتاه و آرام برای کار؛ با پخش هر قطعه، بقیهٔ آلبوم پشت سرش در صف می‌آید.

۴ قطعه · ۱:۵۸

پخش همهپخش تصادفی

1. فیروزه

   آوا۰:۳۰

   افزودن به صف

2. شیشه

   آوا۰:۲۶

   افزودن به صف

3. مدار

   نیما۰:۳۴

   افزودن به صف

4. قطره

   نیما۰:۲۸

   افزودن به صف

کاشی‌ها (layout="grid"کپی کد) — در موبایل دو ستون

طراحی محصول

پادکست توکاپس

تیم طراحی توکاپس

گفتگو دربارهٔ ساختن محصول، طراحی سیستم و تجربهٔ کاربری — هر هفته یک اپیزود کوتاه.

۴ اپیزود · ۲:۴۱

پخش همهپخش تصادفی

1. 
   اپیزود ۶

   داک شیشه‌ای: چرا ناوبری پایین؟

   از تصمیم حذف نوار بالا تا شش کلید ثابت داک؛ اینکه شست کاربر کجا راحت است.

   ۲۰ مهر ۱۴۰۵۰:۴۲

2. 
   اپیزود ۵

   هویت متغیر، بنیان ثابت

   چطور شش تم با یک کامپوننت متفاوت حرکت می‌کنند بدون اینکه ساختار عوض شود.

   ۱۳ مهر ۱۴۰۵۰:۳۸

3. 
   اپیزود ۴

   رنگ هفت‌رنگ فقط برای حاشیه

   گرادیان کجا مجاز است و چرا رنگ هرگز تنها نشانهٔ وضعیت نیست.

   ۶ مهر ۱۴۰۵۰:۴۵

4. 
   اپیزود ۳

   صدا همیشه انتخابی است

   صدای رابط پیش‌فرض خاموش است؛ هر رویداد صوتی معادل دیداری دارد.

   ۳۰ شهریور ۱۴۰۵۰:۳۶

import { Podcast, type PodcastEpisode } from '@tokapps/patterns';const episodes: PodcastEpisode[] = [  { id: 'ep-6', number: 6, title: 'داک شیشه‌ای: چرا ناوبری پایین؟', date: '۲۰ مهر ۱۴۰۵', duration: 2520, src: '/audio/ep-6.mp3' },  { id: 'ep-5', number: 5, title: 'هویت متغیر، بنیان ثابت', date: '۱۳ مهر ۱۴۰۵', duration: 2280, src: '/audio/ep-5.mp3' },  // نشانی امضاشده: src می‌تواند تابع ناهمگام باشد و فقط هنگام پخش صدا زده می‌شود  { id: 'ep-4', number: 4, title: 'رنگ هفت‌رنگ فقط برای حاشیه', duration: 2700, src: () => fetch('/api/audio/ep-4').then((r) => r.text()) },];export function PodcastPage() {  return (    <Podcast      show={{ title: 'پادکست توکاپس', author: 'تیم طراحی توکاپس', category: 'طراحی محصول', artwork: '/covers/podcast.jpg' }}      episodes={episodes}    />  );}// موسیقی: هنرمند به‌جای خلاصه<Podcast kind="music" layout="compact" show={{ title: 'صداهای داک', author: 'آوا' }} episodes={tracks} />

کاورها: روی هر ردیف کاور کوچک خودش دکمهٔ پخش است (مثل اپ‌های پادکست امروزی)؛ اپیزود جاری نوار پیشرفت زنده و «زمان مانده» دارد. کاور خراب یا نبودِ شبکه → کاشی توکنی با آیکون. کاورهای این صفحه از Lorem Picsum (عکس‌های Unsplash با مجوز آزاد) هستند.

کارت‌ها در قالب‌ها (شش تم)

هر تم چیدمان پیشنهادی و ماده/حرکت خودش را دارد (theme-<id>/src/podcast.cssکپی کد: شعاع کاور، بلندشدن کارت، تاری پس‌زمینه، زمان و منحنی) — ساختار الگو ثابت است.

هسته توکاپسایده‌پردازیسرمایه‌گذاری جمعیکشف محصولروایت‌هاسازمانی

طراحی محصول

پادکست توکاپس

تیم طراحی توکاپس

گفتگو دربارهٔ ساختن محصول، طراحی سیستم و تجربهٔ کاربری — هر هفته یک اپیزود کوتاه.

۵ اپیزود · ۳:۲۱

پخش همهپخش تصادفی

1. 
   اپیزود ۶

   داک شیشه‌ای: چرا ناوبری پایین؟

   از تصمیم حذف نوار بالا تا شش کلید ثابت داک؛ اینکه شست کاربر کجا راحت است.

   ۲۰ مهر ۱۴۰۵۰:۴۲

   افزودن به صف
2. 
   اپیزود ۵

   هویت متغیر، بنیان ثابت

   چطور شش تم با یک کامپوننت متفاوت حرکت می‌کنند بدون اینکه ساختار عوض شود.

   ۱۳ مهر ۱۴۰۵۰:۳۸

   افزودن به صف
3. 
   اپیزود ۴

   رنگ هفت‌رنگ فقط برای حاشیه

   گرادیان کجا مجاز است و چرا رنگ هرگز تنها نشانهٔ وضعیت نیست.

   ۶ مهر ۱۴۰۵۰:۴۵

   افزودن به صف
4. 
   اپیزود ۳

   صدا همیشه انتخابی است

   صدای رابط پیش‌فرض خاموش است؛ هر رویداد صوتی معادل دیداری دارد.

   ۳۰ شهریور ۱۴۰۵۰:۳۶

   افزودن به صف
5. 
   اپیزود ۲

   راست‌به‌چپ از روز اول

   متن ترکیبی فارسی و انگلیسی، ارقام و کنترل‌های رسانه‌ای که برنمی‌گردند.

   ۲۳ شهریور ۱۴۰۵۰:۴۰

   افزودن به صف

<div data-theme="tokapps">  <Podcast layout="featured" show={show} episodes={episodes} /></div>

پخش از هر جای برنامه

الگو فقط یکی از مصرف‌کننده‌هاست. هر دکمه یا صفحه‌ای می‌تواند یک صف را روی داک بفرستد — بدون Provider، چون داک ریشهٔ برنامه به پخش‌کنندهٔ سراسری گوش می‌دهد:

import { playOnDock, dockPlayer, useDockPlayer } from '@tokapps/tuk/dock';// پخش یک صف از اندیس ۲ (هیچ پخش خودکاری نیست؛ فقط با کنش کاربر صدا بزنید)<button onClick={() => playOnDock(tracks, { start: 2, label: 'آلبوم شیشه' })}>پخش</button>// کنترل و وضعیتdockPlayer.toggle(); dockPlayer.next(); dockPlayer.skip(-15); dockPlayer.setView('minimized');const state = useDockPlayer(dockPlayer); // { queue, index, status, position, duration, view, … }

پلی‌گراند — پیکربندی زنده روی داک همین سایت

هر انتخاب همین لحظه روی داک پایین صفحه اعمال می‌شود و کد قابل کپی از همان پیکربندی ساخته می‌شود. تم سایت را از تنظیمات سریع داک عوض کنید تا پیش‌فرض هر تم را ببینید.

import {  playOnDock, addToDockQueue, playNextOnDock, removeFromDockQueue,  downloadFromDock, shareFromDock, dockPlayer, useDockPlayer,} from '@tokapps/tuk/dock';// پخش یک فهرست از اندیس ۲ (فقط با کنش کاربر؛ پخش خودکار نیست)playOnDock(tracks, { start: 2, label: 'پادکست توکاپس' });addToDockQueue(track);            // به انتهای فهرست پخشplayNextOnDock(track);            // بلافاصله بعد از قطعهٔ جاریremoveFromDockQueue(track.id);await downloadFromDock();         // 'downloaded' | 'unavailable'   (track.downloadable=false → unavailable)await shareFromDock();            // 'shared' | 'copied' | 'cancelled' | 'unavailable'dockPlayer.toggle(); dockPlayer.next(); dockPlayer.skip(-15); dockPlayer.setRate(1.5);const { queue, index, status, position, duration } = useDockPlayer(dockPlayer);// قطعهconst track = {  id: 'ep-12', title: 'اپیزود ۱۲', subtitle: 'تیم توکاپس',  src: '/audio/ep-12.mp3',            // یا () => fetch('/api/signed').then((r) => r.text())  artwork: '/covers/ep-12.jpg', duration: 2520, kind: 'episode',  fileName: 'tokapps-ep-12.mp3', shareUrl: 'https://tokapps.com/podcast/12', downloadable: true,};

انواع روی قالب‌های نمونه (شش تم)

ساختار، جای‌گیری داخل داک و نماها در همهٔ تم‌ها یکی است (بنیان)؛ هر تم فقط هویت (meta.dockPlayerکپی کد: ظاهر کوچک‌شده، اندازه، حرکت، پیشرفت، زمان‌بندی) و حرکت (theme-<id>/src/dock-player.cssکپی کد) را تعیین می‌کند. دکمهٔ «کوچک کردن» را روی هر نمونه بزنید تا نمای کوچک‌شدهٔ همان تم را ببینید.

{/* اعمال یک تم روی بخشی از صفحه (پیش‌نمایش تودرتو: data-theme و data-mode هر دو) */}<div data-theme="funding" data-mode="light">…</div>

قرارداد سه‌لایه (ARCH.md §2، §7)

کلید هویتی در لایهٔ توسعه‌دهنده رد می‌شود (product.motion (فقط تم)کپی کد)، هشدار توسعه می‌دهد و روی پخش‌کننده data-config-invalidکپی کد می‌گذارد.

ترتیب حل: ترجیح کاربر (کاهش حرکت ← motion: 'fade'کپی کد) › محلی › محصول › تم › پیش‌فرض بنیان.

جای دیسک کوچک‌شده: کاربر آن را می‌کشد (ماوس یا لمس) یا با Shift + کلیدهای جهت جابه‌جا می‌کند؛ Home = جای پیش‌فرض. جای انتخابی به نسبت نمایشگر در localStorageکپی کد (tds:dock-player:orb-positionکپی کد) برای همیشه ذخیره می‌شود و پیش‌نما خودش بالا/پایین و چپ/راست دیسک باز می‌شود.

API پخش‌کننده (@tokapps/tuk/dockکپی کد) — برای توسعه‌دهنده

DockTrackکپی کد: { id, title, subtitle?, src: string | () => string | Promise<string>, artwork?, duration?, kind?: 'episode' | 'track', downloadable?, fileName?, shareUrl? }کپی کد.

موبایل

• نمای بزرگ (ضربه روی عنوان/کاور یا کشیدن به بالا): نوار موقعیت درشت برای جلو/عقب بردن با انگشت، دکمه‌های پرش با عدد ثانیه، سرعت − / + (ضربه روی عدد = سرعت عادی)، دریافت و اشتراک‌گذاری.

• نمای باز پس از چند ثانیه بی‌تعاملی با انیمیشن نرم هویت تم به دیسک/زبانه جمع می‌شود؛ پخش ادامه دارد.

• دیسک کوچک‌شده ساده است: کاور گرد که هنگام پخش می‌چرخد و سایهٔ رنگی نرم و چرخان دورش (لکه‌های تار از پالت هفت‌رنگ، نه گرادیان CSS)؛ بی‌دکمهٔ ریز. پخش/مکث در پیش‌نما.

• نمای کوچک هم‌عرض داک است؛ کنترل‌های اختیاری (قبلی، پرش جلو) زیر ۶۴۰px کنار می‌روند تا عنوان جا داشته باشد؛ هر هدف لمس ≥ ۴۴px.

• کشیدن بالا روی پخش‌کننده نمای بزرگ (برگهٔ داک) را باز می‌کند، کشیدن پایین آن را کوچک‌شده می‌کند؛ touch-actionکپی کد فقط روی سطح پخش‌کننده بسته است، نه کل صفحه.

• وقتی ورق «به بالا بکشید» داک، یک پنل داک یا هشدار داک باز است، پخش‌کننده کنار می‌رود (پخش ادامه دارد) و پس از بستن برمی‌گردد.

• روی نمای کوچک‌شده، فشار طولانی پیش‌نمای واضح را باز می‌کند (روی دسکتاپ: نگه داشتن ماوس ۲ ثانیه)؛ ضربه بیرون آن را می‌بندد.

• Media Session: عنوان، کاور و کلیدهای پخش/مکث/بعدی/قبلی/پرش روی صفحهٔ قفل و اعلان گوشی.

• نمای کوچک داخل داک است و فضای اضافه نمی‌گیرد؛ داک ارتفاعش را نگه می‌دارد.

دسترس‌پذیری و RTL

• پخش‌کننده role="region"کپی کد با نام «پخش‌کننده — در حال پخش/مکث‌شده»؛ تغییر قطعه با aria-liveکپی کد مؤدب اعلام می‌شود.
• نوار موقعیت input[type=range]کپی کد بومی با aria-valuetextکپی کد گفتاری؛ کلیدهای جهت ثانیه‌به‌ثانیه.
• کنترل‌های رسانه‌ای و نوار پیشرفت در RTL برنمی‌گردند (dir="ltr"کپی کد روی همان ردیف)؛ جهت زمان است، نه جهت متن.
• هیچ پخش خودکاری نیست؛ اگر مرورگر پخش را رد کند، پخش‌کننده «مکث‌شده» می‌ماند.
• اپیزود جاری با Badge متنی و aria-pressedکپی کد مشخص است، نه فقط رنگ یا میله‌های متحرک.

قرارداد ARCH

• بنیان ثابت (TUK): DOM، اسلات‌ها (dockPlayerSlotsکپی کد)، کنترل‌ها، ARIA، کیبورد، ژست و صف. هویت فقط transitionکپی کد/animationکپی کد، keyframeهای tds-dock-player-<id>-*کپی کد، transformکپی کد/opacityکپی کد/clip-pathکپی کد و توکن‌های --tds-dock-player-*کپی کد.
• ممنوع برای تم: تغییر اندازهٔ پایه، فاصلهٔ حرکت (--tds-dock-player-travelکپی کد)، ترتیب DOM، رنگ خام یا گرادیان.
• تست‌ها: packages/tuk/src/dock/dockPlayer.test.tsکپی کد (موتور، ترتیب حل، SSR، CSS) و packages/patterns/src/podcast/Podcast.test.tsxکپی کد.