दुनिया की सबसे लोकप्रिय ऑडियो स्ट्रीमिंग सदस्यता सेवा Spotify का मकसद लोगों के ऑडियो और वीडियो कॉन्टेंट इस्तेमाल करने के तरीके को लगातार बेहतर बनाना है. यह संगीत, पॉडकास्ट, और ऑडियो बुक की एक बहुत बड़ी लाइब्रेरी है. यह मोबाइल, पीसी, और अन्य प्लैटफ़ॉर्म का इस्तेमाल करने वाले लाखों लोगों तक हर रोज़ उपलब्ध है.
हाल ही में Spotify ने अपने डेस्कटॉप और वेब प्लेयर क्लाइंट के लिए, Spotify मिनी प्लेयर रिलीज़ किया है. मिनी प्लेयर को इस तरह से डिज़ाइन किया गया है कि छोटी और छोटी विंडो में, वीडियो चलाने के लिए ज़रूरी कंट्रोल मिलते हैं. ये विंडो सबसे ऊपर ही दिखती हैं. इनसे लोगों को Spotify का लगातार ऐक्सेस मिलता है. इस सुविधा के लिए लंबे समय से अनुरोध किया जा रहा था. इसकी मदद से लोग, Spotify पर अपने पसंदीदा कलाकारों, प्लेलिस्ट, और पॉडकास्ट का आनंद लेते हुए, अलग-अलग विंडो और ऐप्लिकेशन पर एक साथ कई काम कर सकते हैं.
मिनी प्लेयर के डेवलपमेंट के बारे में यहां विस्तार से बताया गया है. जैसे, शुरुआती "कैनवस हैक" से लेकर नए Document पिक्चर में पिक्चर एपीआई पर बनाए गए ज़्यादा बेहतर और इस्तेमाल में आसान वर्शन तक.
"कैनवस हैक"
मिनी प्लेयर के शुरुआती वर्शन को 2019 में, हैक प्रोजेक्ट के तौर पर Spotify के Web Player पर लॉन्च किया गया था. इसका मकसद, ब्राउज़र के पिक्चर में पिक्चर (PiP) एपीआई का इस्तेमाल <video> करने के लिए करना था, ताकि एल्बम आर्ट को हमेशा चालू रहने वाली विंडो में दिखाया जा सके. हालांकि, इस एपीआई को मुख्य रूप से वीडियो एलिमेंट के लिए डिज़ाइन किया गया था. इसलिए, एल्बम आर्ट की इमेज नहीं दिखाई जा सकतीं. Spotify ने एल्बम आर्ट को कैनवस एलिमेंट में रेंडर करके और HTMLCanvasElement captureStream() मेथड का इस्तेमाल करके, रीयल-टाइम में MediaStream ऑब्जेक्ट हासिल किया. ऐसे में, यह स्ट्रीम, पीआईपी एपीआई के लिए इस्तेमाल किए जाने वाले वीडियो के सोर्स के तौर पर काम करती है. यह तरीका Google Chrome की "ऑडियो प्लेलिस्ट" के सैंपल पर आधारित था.
Spotify ने कैनवस को Media Session API में सेट किए गए सही कार्रवाई हैंडलर के साथ जोड़ दिया है. इससे यह कंट्रोल किया जा सकता है कि पीआईपी विंडो में कौनसे प्लेयर कंट्रोल दिखेंगे. इससे, उपयोगकर्ताओं को एल्बम आर्ट और प्लेयर कंट्रोल वाली फ़्लोटिंग विंडो मिलती थी. साथ ही, वे दूसरे कामों पर ध्यान देते हुए, वीडियो चलाने को कंट्रोल कर सकते थे.
इससे Spotify को बेसिक मिनी प्लेयर चलाने की अनुमति मिली. हालांकि, इस रणनीति की कई सीमाएं थीं:
- पीआईपी विंडो में, वीडियो के सबटाइटल नहीं दिखाए जा सकते. Spotify पर हर वीडियो के लिए सबटाइटल दिखाना ज़रूरी था. इसलिए, वीडियो चलते ही उन्हें पीआईपी विंडो को बंद करना पड़ता था.
- प्लेयर कंट्रोल सिर्फ़ तब दिखते हैं, जब वीडियो डिवाइस पर चल रहा हो. Spotify, Spotify Connect (और दूसरे प्रोटोकॉल) का इस्तेमाल करके, रिमोट तरीके से वीडियो चलाने की अनुमति देता है. Spotify को यह अनुमति देनी होती है कि उपयोगकर्ता भी इसे कंट्रोल कर सकें
- पीआईपी विंडो के रंग-रूप को पसंद के मुताबिक बनाने की सुविधा उपलब्ध नहीं है. Spotify सिर्फ़ आर्टवर्क दिखा सकता है और Chrome के प्लेयर कंट्रोल का इस्तेमाल कर सकता है. इस वजह से Spotify पर ब्रैंडिंग या प्लेयर के दूसरे कंट्रोल नहीं जोड़े जा सकते.
यूज़र इंटरफ़ेस पर कंट्रोल न होने और Spotify की कुछ खास सुविधाएं न जोड़ पाने (उदाहरण के लिए, किसी ट्रैक को पसंद करने) की वजह से उन्हें नहीं लगता कि यह तरीका उनके डेस्कटॉप क्लाइंट के लिए सही होगा.
डॉक्यूमेंट पिक्चर में पिक्चर: मिनी प्लेयर का अब तक का सफ़र
Spotify को साल 2023 की शुरुआत में, Google Chrome के नए एपीआई को लॉन्च करने के बारे में पता चला. इससे पीआईपी विंडो में आर्बिट्रेरी एचटीएमएल कॉन्टेंट को दिखाने की अनुमति मिलती थी. इसे डॉक्यूमेंट पिक्चर में पिक्चर एपीआई के नाम से जाना जाता है. यह बदलाव Spotify के लिए काफ़ी दिलचस्प था, क्योंकि इससे Spotify को पीआईपी विंडो के लुक पर पूरा कंट्रोल मिलता. Spotify ने ऑरिजिन ट्रायल के दौरान Chrome टीम के साथ मिलकर, Document पिक्चर में पिक्चर एपीआई पर बनाया गया एक नया मिनी प्लेयर डेवलप किया.
Document PiP API की मदद से, एक नई हमेशा चालू रहने वाली विंडो खोली जा सकती है. इसमें एलिमेंट अटैच किए जा सकते हैं. Spotify वेब प्लेयर एक React वेब ऐप्लिकेशन है. इसलिए, Spotify ने मुख्य ऐप्लिकेशन से पीआईपी विंडो में कस्टम कॉम्पोनेंट रेंडर करने के लिए, ReactDOM के createPortal() तरीके का इस्तेमाल किया है. इससे, उन्हें मिनी प्लेयर के लुक और सुविधाओं पर पूरा कंट्रोल मिलता है.
नए डॉक्यूमेंट पिक्चर-इन-पिक्चर एपीआई ने Spotify की पिछली समस्याओं का भी समाधान किया:
- पीआईपी विंडो में मौजूद वीडियो, सामान्य वीडियो होते हैं. साथ ही, इनमें सबटाइटल का इस्तेमाल किया जा सकता है.
- यूज़र इंटरफ़ेस (यूआई) पर पूरे कंट्रोल के साथ, प्लेयर कंट्रोल तब भी दिखाए जा सकते हैं, जब Spotify Connect का इस्तेमाल करके किसी दूसरी जगह से वीडियो चलाया जा रहा हो.
- Spotify ने उपयोगकर्ताओं के अनुभव को बेहतर बनाने के लिए, उनके रंग-रूप और प्लेयर कंट्रोल को बेहतर बनाया.
- उन्होंने Spotify के डेस्कटॉप क्लाइंट के लिए Document PiP API का इस्तेमाल किया. इसकी मदद से, वे मिनी प्लेयर को डेस्कटॉप इस्तेमाल करने वाले लाखों लोगों तक पहुंचा पाए.
React का इस्तेमाल करके पिक्चर में पिक्चर विंडो बनाना
इस उदाहरण में बताया गया है कि Spotify की टीम की तरह, React में दस्तावेज़ पिक्चर में पिक्चर की सुविधा का इस्तेमाल कैसे किया जा सकता है. आपको दो 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 कॉम्पोनेंट, पिक्चर में पिक्चर विंडो में कॉन्टेंट को रेंडर करने के लिए, ReactDOM के createPortal() तरीके का इस्तेमाल करता है.
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 पहले से बेहतर होता जा रहा है और लगातार नए-नए तरीके से काम कर रहा है, वैसे-वैसे मिनी प्लेयर को बेहतर बनाने की कोशिश भी जारी है. साथ ही, Spotify की सुविधाओं और उपयोगकर्ता अनुभव को और बेहतर बनाने की योजना है. फ़िलहाल, वे कुछ खास सुविधाओं का इस्तेमाल नहीं कर पा रहे हैं. हालांकि, आने वाले समय में मिनी प्लेयर का इस्तेमाल किया जा सकेगा, इस बात को लेकर वे काफ़ी उत्साहित हैं.
Document पिक्चर-इन-पिक्चर एपीआई को ज़्यादा आसान और उपयोगकर्ता के लिए आसान मिनी प्लेयर बनाने की सुविधा और कंट्रोल मिला है. हमें उम्मीद है कि ब्राउज़र के अन्य वेंडर, इस एपीआई से मिलने वाले अवसरों को ध्यान में रखेंगे और उनसे जुड़ी सहायता देने के बारे में सोचेंगे. इसकी मदद से, Spotify सभी लोगों को एक जैसा और बेहतर अनुभव देने में मदद करता है, भले ही उन्होंने कोई भी ब्राउज़र चुना हो.
स्वीकार की गई
Spotify के उन सभी लोगों को धन्यवाद जिन्होंने मिनी प्लेयर बनाने में मदद की.
Spotify, Google Chrome टीम को उनके सहयोग और Document पिक्चर में पिक्चर एपीआई के लिए Spotify के फ़ीडबैक को ध्यान में रखने के लिए धन्यवाद देना चाहता है.