‏وب روی iPhone Duo: تیم Video.js سراغ APIهای گوشی تاشو رفت

تو این پست وبلاگ Video.js، نویسنده که بعد از انتشار Video.js v10.0.0 یه آخر هفته وقت آزاد داشته، رفته سراغ اینکه وب‌دولوپرها روی iPhone Duo — گوشی تاشوی جدید اپل — به چی دسترسی دارن. اپل شش ویدیو برای ساخت اپ نیتیو روی این دستگاه منتشر کرده، ولی سؤال نویسنده این بوده که سهم وب چیه. برای همین Xcode 27.1 beta رو نصب کرده، یه iPhone Duo تو simulator بالا آورده و feature flagهای Safari رو گشته.

دو API پیدا کرده. اولی Device Posture API هست که می‌گه صفحه continuous هست (یعنی یه صفحهٔ معمولی، صاف یا خمیده) یا folded (یعنی نیمه‌تا شده، مثل لپ‌تاپ). از JavaScript با navigator.devicePosture و از CSS با @media (device-posture: folded) قابل دسترسیه.

دومی Viewport Segments API هست که اطلاعات هر بخش جدای صفحه رو می‌ده. تو JavaScript، window.viewport.segments یه آرایه از DOMRect برمی‌گردونه که اندازه و جای هر segment رو داره. تو CSS هم می‌شه با @media (horizontal-viewport-segments: n) و vertical-viewport-segments به تعداد بخش‌ها واکنش نشون داد، و با environment variableهایی مثل env(viewport-segment-width 1 0) عرض هر بخش رو گرفت؛ عدد اول اندیس افقیه و عدد دوم عمودی. مثال مقاله یه layout دوستونه‌ست که موقع تا شدن به دو بخش می‌چسبه تا محتوا تو خط تا نیفته:

@media (horizontal-viewport-segments: 2) {
  .layout {
    grid-template-columns:
      env(viewport-segment-width 0 0)
      env(viewport-segment-width 1 0);
  }
}

هدف اصلی نویسنده این بوده که پلیر Netflix روی iPhone Duo رو با Video.js بازسازی کنه: ویدیو تو نیمهٔ بالا، کنترل‌ها تو نیمهٔ پایین. جواب کوتاه «نه» هست، چون اپل هنوز اجازه نمی‌ده المان‌های وب fullscreen بشن و فقط کنترل‌های نیتیو نشون داده می‌شن، حتی با اینکه Duo باز شده تقریباً یه iPad هست. ولی Fullscreen API به‌عنوان feature flag وجود داره؛ نویسنده روشنش کرده و دیده کنترل‌های Video.js تو حالت fullscreen نشون داده می‌شن.

بعد با گرفتن یه skin از Video.js از طریق shadcn CLI، یه بخش جدید از کنترل‌ها ساخته — دکمهٔ بستن، عنوان، AirPlay، و دکمه‌های جلو و عقب رفتن ۱۰ ثانیه‌ای کنار play — تا روی صفحهٔ پایینی بشینن. یعنی از نظر فنی کار شدنیه، فقط باید اپل این قابلیت رو برای همه باز کنه.

نکات کلیدی:

• Device Posture API دو حالت continuous و folded رو گزارش می‌ده.
• window.viewport.segments آرایه‌ای از DOMRect برای هر بخش صفحه برمی‌گردونه.
• تو CSS، env(viewport-segment-width x y) عرض هر segment رو با اندیس افقی و عمودی می‌ده.
• این APIها تو Xcode 27.1 beta پشت feature flag پیدا شدن.
• اپل هنوز fullscreen رو برای المان‌های وب روی iPhone Duo باز نکرده و فقط با feature flag کار می‌کنه.