تهدف Spotify، وهي خدمة الاشتراك الأكثر شهرة في العالم للبث الصوتي، إلى تحسين طريقة مشاهدة المستخدمين لمحتوى الصوت والفيديو. وتوفّر المنصة مكتبة واسعة من الموسيقى وملفات البودكاست والكتب المسموعة، وتلبي احتياجات ملايين المستخدمين يوميًا على الأجهزة الجوّالة وأجهزة الكمبيوتر والمنصات الأخرى.
طرحت Spotify مؤخرًا مشغّل Spotify المصغّر لعملاء أجهزة سطح المكتب ومشغّلات الويب. تم تصميم المشغّل المصغّر لتوفير عناصر تحكّم أساسية في التشغيل من خلال نافذة صغيرة وصغيرة تظهر في الأعلى، ما يتيح للمستخدمين الوصول بشكل مستمر إلى Spotify. لطالما كانت هذه الميزة مطلوبة منذ فترة طويلة، وتتيح للمستخدمين تنفيذ مهام متعددة بسلاسة في نوافذ وتطبيقات مختلفة مع الاستمتاع بالفنانين وقوائم التشغيل وملفات البودكاست المفضّلة على Spotify.
في ما يلي نظرة تفصيلية حول عملية تطوير المشغّل المصغّر، بدءًا من مرحلة "الاختراق الأوّلي" للوحة الرسم ووصولاً إلى النسخة الأكثر تقدّمًا وسهولة الاستخدام التي تم تصميمها استنادًا إلى واجهة برمجة التطبيقات Document Picture-in-Picture API الجديدة.
"قرصنة لوحة الرسم"
تم إطلاق الإصدار التجريبي الأوّلي للمشغّل المصغّر في عام 2019 على Web Player من Spotify باعتباره مشروعًا للاختراق. كان الهدف هو استخدام واجهة برمجة تطبيقات نافذة ضمن النافذة (PiP) في المتصفح لـ <video> لعرض صورة الألبوم في نافذة تظهر في الأعلى دائمًا. ومع ذلك، فقد صُممت واجهة برمجة التطبيقات هذه بشكل أساسي لعناصر الفيديو ولم يكن من الممكن عرض صور صورة الألبوم. تحايل Spotify على ذلك من خلال عرض صورة الألبوم على عنصر لوحة الرسم واستخدام الطريقة HTMLCanvasElement captureStream() للحصول على عنصر MediaStream في الوقت الفعلي. بعدها، تشكّل مجموعة البث هذه مصدر الفيديو المستخدَم في واجهة برمجة تطبيقات "نافذة ضمن النافذة". اعتمد هذا الأسلوب على نموذج "قائمة تشغيل الصوت" في Google Chrome.
جمع Spotify اللوحة مع معالِجات الإجراءات المناسبة التي تم ضبطها في واجهة برمجة التطبيقات لجلسات الوسائط لتحديد عناصر التحكّم في المشغّل التي ستظهر في النافذة. وقد منح ذلك المستخدمين نافذة عائمة تحتوي على صورة الألبوم وعناصر التحكّم في المشغّل، والتي يمكنهم استخدامها للتحكّم في التشغيل مع التركيز على مهام أخرى.
سمح هذا لـ Spotify بالحصول على مشغّل مصغّر أساسي. ومع ذلك، كانت للمنهج العديد من القيود:
- لا يمكنك استخدام ترجمة الفيديو داخل النافذة "نافذة ضمن النافذة". وبما أنّ منصة Spotify كانت ملزمة بعرض الترجمة على كل الفيديوهات، اضطرّ الفريق إلى إغلاق نافذة "نافذة ضمن النافذة" فور بدء تشغيل الفيديو.
- لا تظهر عناصر التحكم في المشغّل إلا إذا تم التشغيل على الجهاز. يسمح Spotify بالتشغيل عن بُعد باستخدام Spotify Connect (والبروتوكولات الأخرى) ويريد أن يكون المستخدم قادرًا على التحكم في التشغيل هذا أيضًا
- لا يتوفّر دعم لتخصيص مظهر نافذة "نافذة ضمن النافذة (PIP)" وأسلوبها. كان بإمكان Spotify عرض العمل الفني فقط واستخدام عناصر التحكم في المشغّل التي يوفّرها Chrome، ما يمنعهم من إضافة علامة Spotify التجارية أو عناصر تحكّم إضافية في المشغّل.
يعني عدم التحكم في واجهة المستخدم وعدم القدرة على إضافة ميزات خاصة بـ Spotify هنا (على سبيل المثال، الإعجاب بمقطع صوتي) أنهم لا يشعرون أن هذا النهج كان مناسبًا لعميل سطح المكتب.
ميزة "نافذة ضمن النافذة": مراحل تطوّر المشغّل المصغّر
في أوائل عام 2023، علمت منصة Spotify عن اهتمام Google Chrome المتجدد بإطلاق واجهة برمجة تطبيقات جديدة تسمح بعرض محتوى HTML عشوائي داخل نافذة "نافذة ضمن النافذة"، والمعروفة باسم Document Picture-in-Picture API. وكان هذا التطور مثيرًا للاهتمام بالنسبة إلى Spotify لأنه سيمنحها تحكمًا كاملاً في مظهر نافذة "نافذة ضمن النافذة". تعاونت Spotify مع فريق Chrome خلال التجربة الأصلية لتطوير مشغّل صغير جديد يستند إلى واجهة برمجة التطبيقات Document Picture-in-Picture API.
تتيح لك Document PiP API فتح نافذة جديدة تظهر دائمًا في الأعلى يمكنك إرفاق العناصر بها. بما أنّ Spotify Web Player هو تطبيق React على الويب، استخدمت Spotify طريقة ReactDOM createPortal() لعرض المكونات المخصّصة في نافذة "نافذة ضمن النافذة" من التطبيق الرئيسي، ما يمنحها إمكانية التحكُّم الكامل في مظهر المشغّل المصغّر وميزاته.
عالجت واجهة برمجة التطبيقات Document Picture-in-Picture الجديدة المشاكل السابقة في Spotify:
- إنّ الفيديوهات المضمَّنة في النافذة "نافذة ضمن النافذة" هي عناصر عادية في الفيديو وتتيح لك عرض الترجمة بالكامل.
- بفضل إمكانية التحكّم الكامل في واجهة المستخدم، يمكن عرض عناصر التحكّم في المشغّل حتى إذا شغّلتها عن بُعد، وذلك باستخدام Spotify Connect.
- تمكنت Spotify من دمج الشكل والأسلوب وعناصر التحكم في المشغّل لتحسين تجربة المستخدم.
- وتمكنوا من توفير الدعم لواجهة برمجة تطبيقات Document PiP API لبرنامج سطح المكتب من Spotify، مما سمح لهم بتوفير المشغّل المصغّر لملايين مستخدمي أجهزة سطح المكتب.
إنشاء نافذة ضمن النافذة باستخدام React
يوضح المثال التالي كيف يمكنك استخدام ميزة "نافذة ضمن النافذة" في React، تمامًا مثل فريق Spotify. ستنشئ مكوّنَين في React، وهما MyFeature وPiPContainer.
المكوّن MyFeature مسؤول عن إدارة نافذة "نافذة ضمن النافذة". تعرِض زرًا يعمل على تبديل نافذة "نافذة ضمن النافذة" وتعرض المكوِّن PiPContainer. بالإضافة إلى ذلك، يتم الاشتراك في حدث "pagehide" ضمن نافذة "نافذة ضمن النافذة" لتعديل الحالة عند إغلاق النافذة.
const MyFeature = () => {
const [pipWindow, setPiPWindow] = useState<Window | null>(
documentPictureInPicture.window
);
const handleClick = useCallback(async () => {
if (pipWindow) {
pipWindow.close();
} else {
const newWindow = await documentPictureInPicture.requestWindow();
setPiPWindow(newWindow);
}
}, [pipWindow]);
useEffect(() => {
const handleWindowClose = (): void => {
setPiPWindow(null);
};
pipWindow?.addEventListener("pagehide", handleWindowClose);
return () => {
pipWindow?.removeEventListener("pagehide", handleWindowClose);
};
}, [pipWindow]);
return (
<>
<button onClick={handleClick}>
{pipWindow ? "Close PiP Window" : "Open PiP Window"}
</button>
<PiPContainer pipWindow={pipWindow}>Hello World 👋!</PiPContainer>
</>
);
};
يستخدم المكوِّن PiPContainer طريقة createPortal() في ReactDOM لعرض المحتوى في نافذة "نافذة ضمن النافذة".
type Props = PropsWithChildren<{
pipWindow: Window | null;
}>;
const PiPContainer = ({ pipWindow, children }: Props) => {
useEffect(() => {
if (pipWindow) {
cloneStyles(window.document, pipWindow.document);
}
}, [pipWindow]);
return pipWindow ? createPortal(children, pipWindow.document.body) : null;
};
الخطوات التالية
وفي ظل مواصلة تطوير Spotify ومواصلة الابتكار، يلتزمون بمواصلة تحسين المشغّل المصغّر وخطط لتحسين ميزاته وتجربة المستخدم بشكل أكبر. وبالرغم من أنّنا لم ننجح في توفير ميزات محدّدة، فإنّهم متحمّسون بشأن الإمكانات المستقبلية للمشغّل المصغّر.
بفضل واجهة برمجة التطبيقات Document Picture-in-Picture API، يمكنك إنشاء مشغّل صغير بسهولة ويسر. ونأمل أن يعلم مورّدو المتصفحات الآخرون بالفرص التي توفرها واجهة برمجة التطبيقات هذه وأن يفكروا في توفير الدعم لها. وهذا سيسمح لـ Spotify بتقديم تجربة متسقة ومحسّنة لجميع المستخدمين، بغض النظر عن المتصفح الذي يختارونه.
شكر وتقدير
نتوجّه بالشكر إلى كلّ من ساهم في إنشاء المشغّل المصغّر.
تود Spotify أيضًا أن تشكر فريق Google Chrome على تعاونهم وعلى مراعاة ملاحظات Spotify بشأن واجهة برمجة تطبيقات Document Picture-in-Picture.