تهدف Spotify، وهي خدمة الاشتراك في بث الصوت الأكثر رواجًا في العالم، باستمرار إلى تحسين طريقة استهلاك المستخدمين للمحتوى الصوتي والمرئي. ويقدّم التطبيق مكتبة واسعة من الموسيقى وملفات البودكاست والكتب المسموعة، ويستخدمه ملايين المستخدمين يوميًا على الأجهزة الجوّالة وأجهزة الكمبيوتر الشخصي والمنصات الأخرى.
أصدرت Spotify مؤخرًا مشغّل Spotify المصغر لعملاء مشغّل الويب وأجهزة الكمبيوتر المكتبي. تم تصميم "المشغّل المصغّر" لتقديم عناصر التحكّم الأساسية في التشغيل في نافذة صغيرة ومكثفة تظلّ في أعلى الشاشة، ما يتيح للمستخدمين الوصول باستمرار إلى Spotify. لقد كان هذا الطلب مُلحًا منذ فترة طويلة، ويتيح للمستخدمين إنجاز مهام متعدّدة بسلاسة في النوافذ والتطبيقات المختلفة أثناء الاستماع إلى الفنانين وقوائم التشغيل وملفات البودكاست المفضّلة لديهم على Spotify.
في ما يلي نظرة تفصيلية على تطوير "المشغّل المصغر"، بدءًا من "خدعة اللوحة" الأولية إلى الإصدار الأكثر تقدّمًا وسهولة في الاستخدام والمستند إلى Document Picture-in-Picture API الجديدة.
"اختراق اللوحة"
تم إطلاق النسخة الأولى من "المشغّل المصغر" في عام 2019 على Web Player في Spotify كمشروع اختراق. كان الهدف من ذلك استخدام واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة" في المتصفّح لعنصر <video> لعرض صورة الألبوم في نافذة دائمًا في المقدّمة. ومع ذلك، تم تصميم واجهة برمجة التطبيقات هذه في المقام الأول لعناصر الفيديو ولم يكن من الممكن عرض صور أغلفة الألبومات. تجنّبت Spotify ذلك من خلال عرض صورة الألبوم كعنصر لوحة واستخدام HTMLCanvasElement captureStream() الطريقة للحصول على عنصر MediaStream في الوقت الفعلي. ويكون هذا البث بعد ذلك مصدر الفيديو المستخدَم في واجهة برمجة التطبيقات لميزة "نافذة ضمن النافذة". استند هذا النهج إلى عيّنة "قائمة تشغيل صوتية" في Google Chrome.
دمج Spotify اللوحة مع معالجات الإجراءات المناسبة التي تم ضبطها في Media Session API للتحكّم في عناصر التحكّم في المشغّل التي ستظهر في نافذة "صورة في صورة". وقد وفّر هذا الإجراء للمستخدمين نافذة عائمة تتضمّن صورة الألبوم وعناصر التحكّم في المشغّل، ما يمكنهم من التحكّم في التشغيل مع التركيز على مهام أخرى.
سمح ذلك لخدمة Spotify بتوفير مشغّل موسيقى صغير أساسي. ومع ذلك، كان لهذا المنهج العديد من القيود:
- لا تتوفّر ترجمة الفيديوهات داخل نافذة "وضع الصورة في الصورة". ولأنّه كان مطلوبًا من Spotify عرض الترجمة والشرح على جميع الفيديوهات، اضطرت إلى إغلاق نافذة "وضع الصورة في الصورة" فور بدء تشغيل الفيديو.
- لا تظهر عناصر التحكّم في المشغّل إلا إذا كان التشغيل يحدث على الجهاز. تسمح Spotify بالتشغيل عن بُعد باستخدام Spotify Connect (وبروتوكولات أخرى) وتريد أن يتمكّن المستخدم من التحكّم في هذا التشغيل أيضًا.
- لا تتوفّر إمكانية تخصيص مظهر نافذة "وضع الصورة في الصورة" وأسلوبها. لم يكن بإمكان Spotify عرض العمل الفني إلا باستخدام عناصر التحكّم في المشغّل التي يوفّرها Chrome، ما منعها من إضافة علامة Spotify التجارية أو عناصر تحكّم إضافية في المشغّل.
بسبب عدم التمكّن من التحكّم في واجهة المستخدم وعدم إضافة ميزات خاصة بخدمة 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 طريقة createPortal() من ReactDOM لعرض مكوّنات مخصّصة في نافذة وضع الصورة في الصورة من التطبيق الرئيسي، ما يتيح التحكّم الكامل في مظهر "مشغّل الموسيقى المصغر" وميزاته.
عالجت أيضًا واجهة برمجة التطبيقات الجديدة لميزة "النافذة ضمن النافذة" في المستندات المشاكل السابقة في 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 الذين ساهموا في إنشاء "المشغّل المصغر".
تودّ Spotify أيضًا أن تشكر فريق Google Chrome على تعاونه ومراعاة ملاحظات Spotify بشأن واجهة برمجة التطبيقات Document Picture-in-Picture API.