Spotify, বিশ্বের সবচেয়ে জনপ্রিয় অডিও স্ট্রিমিং সাবস্ক্রিপশন পরিষেবা, ক্রমাগত ব্যবহারকারীদের অডিও এবং ভিডিও সামগ্রী ব্যবহার করার উপায় উন্নত করার লক্ষ্য রাখে। সঙ্গীত, পডকাস্ট এবং অডিওবুকের একটি বিস্তৃত লাইব্রেরি অফার করে, এটি মোবাইল, পিসি এবং অন্যান্য প্ল্যাটফর্মে প্রতিদিন লক্ষ লক্ষ ব্যবহারকারীকে পূরণ করে।
সম্প্রতি Spotify তাদের ডেস্কটপ এবং ওয়েব প্লেয়ার ক্লায়েন্টদের জন্য Spotify মিনিপ্লেয়ার প্রকাশ করেছে। মিনিপ্লেয়ারটিকে একটি ছোট, কম্প্যাক্ট উইন্ডোতে অপরিহার্য প্লেব্যাক নিয়ন্ত্রণ অফার করার জন্য ডিজাইন করা হয়েছে যা উপরে থাকে, ব্যবহারকারীদের Spotify-এ অবিচ্ছিন্ন অ্যাক্সেস প্রদান করে। এটি একটি দীর্ঘ অনুরোধ করা বৈশিষ্ট্য, এবং ব্যবহারকারীদের স্পটিফাইতে তাদের প্রিয় শিল্পী, প্লেলিস্ট এবং পডকাস্ট উপভোগ করার সময় বিভিন্ন উইন্ডো এবং অ্যাপে নির্বিঘ্নে মাল্টিটাস্ক করতে সক্ষম করে৷
নতুন ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই- তে তৈরি প্রাথমিক "ক্যানভাস হ্যাক" থেকে আরও উন্নত, ব্যবহারকারী-বান্ধব সংস্করণ পর্যন্ত মিনিপ্লেয়ারের বিকাশের বিশদ বিবরণ অনুসরণ করা হয়েছে।
"ক্যানভাস হ্যাক"
মিনিপ্লেয়ারের প্রাথমিক পুনরাবৃত্তি 2019 সালে স্পটিফাইয়ের ওয়েব প্লেয়ারে হ্যাক প্রকল্প হিসাবে চালু করা হয়েছিল। উদ্দেশ্য ছিল সর্বদা-অন-টপ উইন্ডোতে অ্যালবাম আর্ট প্রদর্শন করার জন্য <ভিডিও>-এর জন্য ব্রাউজারের পিকচার-ইন-পিকচার (পিআইপি) API ব্যবহার করা। যাইহোক, এই APIটি প্রাথমিকভাবে ভিডিও উপাদানগুলির জন্য ডিজাইন করা হয়েছিল এবং অ্যালবামের শিল্প চিত্রগুলি দেখানো সম্ভব ছিল না। স্পটিফাই অ্যালবাম আর্টকে একটি ক্যানভাস এলিমেন্টে রেন্ডার করে এবং একটি রিয়েল-টাইম মিডিয়াস্ট্রিম অবজেক্ট পেতে HTMLCanvasElement captureStream() পদ্ধতি ব্যবহার করে এটিকে বাধা দিয়েছে। এই স্ট্রীমটি তখন PiP API-এর জন্য ব্যবহৃত ভিডিওর উৎস হিসেবে কাজ করে। এই পদ্ধতিটি Google Chrome-এর "অডিও প্লেলিস্ট" নমুনার উপর ভিত্তি করে ছিল।
পিআইপি উইন্ডোতে কোন প্লেয়ার কন্ট্রোল প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে Spotify মিডিয়া সেশন API- এ সেট করা উপযুক্ত অ্যাকশন হ্যান্ডলারের সাথে ক্যানভাসকে একত্রিত করেছে। এটি ব্যবহারকারীদের অ্যালবাম আর্ট এবং প্লেয়ার নিয়ন্ত্রণ সহ একটি ভাসমান উইন্ডো দিয়েছে, যা তারা অন্যান্য কাজের উপর ফোকাস করার সময় প্লেব্যাক নিয়ন্ত্রণ করতে ব্যবহার করতে পারে।
এটি স্পটিফাইকে একটি মৌলিক মিনিপ্লেয়ার রাখার অনুমতি দিয়েছে। যাইহোক, পদ্ধতির বেশ কয়েকটি সীমাবদ্ধতা ছিল:
- ভিডিও সাবটাইটেল PiP উইন্ডোতে সমর্থিত নয় । কারণ স্পটিফাইকে সমস্ত ভিডিওতে সাবটাইটেল দেখানোর প্রয়োজন ছিল তারা একটি ভিডিও চালানো শুরু হওয়ার সাথে সাথেই পিআইপি উইন্ডোটি বন্ধ করতে বাধ্য হয়েছিল।
- প্লেব্যাক স্থানীয়ভাবে ঘটতে থাকলেই প্লেয়ার নিয়ন্ত্রণগুলি দৃশ্যমান হয়৷ Spotify Spotify Connect (এবং অন্যান্য প্রোটোকল) ব্যবহার করে দূরবর্তী প্লেব্যাকের অনুমতি দেয় এবং ব্যবহারকারীকে এই প্লেব্যাকটিও নিয়ন্ত্রণ করতে সক্ষম হতে চায়
- PiP উইন্ডোর চেহারা এবং অনুভূতি কাস্টমাইজ করার জন্য কোন সমর্থন নেই। স্পটিফাই শুধুমাত্র আর্টওয়ার্ক প্রদর্শন করতে পারে এবং ক্রোম দ্বারা সরবরাহ করা প্লেয়ার নিয়ন্ত্রণগুলি ব্যবহার করতে পারে, তাদের স্পটিফাই ব্র্যান্ডিং বা অতিরিক্ত প্লেয়ার নিয়ন্ত্রণ যোগ করা থেকে বাধা দেয়৷
ইউজার ইন্টারফেসের উপর নিয়ন্ত্রণের অভাব, এবং এখানে Spotify নির্দিষ্ট বৈশিষ্ট্য যোগ করতে না পারা (উদাহরণস্বরূপ, একটি ট্র্যাক পছন্দ করা) এর অর্থ হল যে তারা মনে করে না যে এই পদ্ধতিটি তাদের ডেস্কটপ ক্লায়েন্টের জন্য উপযুক্ত।
ডকুমেন্ট পিকচার-ইন-পিকচার: মিনিপ্লেয়ারের বিবর্তন
2023 সালের গোড়ার দিকে, Spotify একটি নতুন API চালু করার বিষয়ে Google Chrome-এর নতুন করে আগ্রহ সম্পর্কে শিখেছিল যা পিআইপি উইন্ডোর ভিতরে নির্বিচারে HTML সামগ্রী প্রদর্শন করার অনুমতি দেবে, যা ডকুমেন্ট পিকচার-ইন-পিকচার API নামে পরিচিত। এই উন্নয়নটি Spotify-এর জন্য উত্তেজনাপূর্ণ ছিল কারণ এটি তাদের PiP উইন্ডোর চেহারার উপর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করবে। ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই-তে তৈরি একটি নতুন মিনিপ্লেয়ার তৈরি করতে স্পটিফাই তাদের অরিজিন ট্রায়ালের সময় Chrome টিমের সাথে সহযোগিতা করেছে।
ডকুমেন্ট PiP API আপনাকে একটি নতুন সর্বদা-অন-টপ উইন্ডো খুলতে দেয় যেখানে আপনি উপাদান সংযুক্ত করতে পারেন। যেহেতু স্পটিফাই ওয়েব প্লেয়ার একটি রিঅ্যাক্ট ওয়েব অ্যাপ্লিকেশন, তাই মিনিপ্লেয়ারের চেহারা এবং বৈশিষ্ট্যগুলির উপর সম্পূর্ণ নিয়ন্ত্রণ প্রদান করে, স্পটিফাই প্রধান অ্যাপ্লিকেশন থেকে পিআইপি উইন্ডোতে কাস্টম উপাদানগুলি রেন্ডার করতে ReactDOM-এর createPortal() পদ্ধতি ব্যবহার করেছে।
নতুন ডকুমেন্ট পিকচার-ইন-পিকচার এপিআই স্পটিফাইয়ের আগের সমস্যাগুলিকেও সম্বোধন করেছে:
- পিআইপি উইন্ডোর ভিতরে থাকা ভিডিওগুলি নিয়মিত ভিডিও উপাদান এবং সাবটাইটেলগুলির জন্য সম্পূর্ণ সমর্থন রয়েছে৷
- UI-এর উপর সম্পূর্ণ নিয়ন্ত্রণের সাথে, প্লেয়ার নিয়ন্ত্রণগুলি দেখানো যেতে পারে এমনকি যখন প্লেব্যাকটি দূরবর্তীভাবে Spotify Connect ব্যবহার করে ঘটছে।
- Spotify তাদের চেহারা এবং অনুভূতি এবং প্লেয়ার নিয়ন্ত্রণ অন্তর্ভুক্ত করতে সক্ষম হয়েছে, ব্যবহারকারীর অভিজ্ঞতা বৃদ্ধি করেছে।
- তারা Spotify-এর ডেস্কটপ ক্লায়েন্টে ডকুমেন্ট PiP API-এর জন্য সমর্থন আনতে সক্ষম হয়েছিল, যার ফলে তারা মিলিয়ন মিলিয়ন ডেস্কটপ ব্যবহারকারীদের কাছে মিনিপ্লেয়ার আনতে পারে।
প্রতিক্রিয়া ব্যবহার করে একটি পিকচার-ইন-পিকচার উইন্ডো তৈরি করুন
নিচের উদাহরণটি দেখায় কিভাবে আপনি Spotify টিমের মতো প্রতিক্রিয়াতে ডকুমেন্ট পিকচার-ইন-পিকচার ব্যবহার করতে পারেন। আপনি দুটি প্রতিক্রিয়া উপাদান তৈরি করবেন: 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 যেহেতু অগ্রসর এবং উদ্ভাবন অব্যাহত রেখেছে, তারা মিনিপ্লেয়ারকে উন্নত করতে প্রতিশ্রুতিবদ্ধ এবং এর বৈশিষ্ট্য এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও পরিমার্জিত করার পরিকল্পনা করছে। যদিও এখনও নির্দিষ্ট বৈশিষ্ট্যগুলি প্রতিশ্রুতিবদ্ধ করতে সক্ষম নয়, তারা মিনিপ্লেয়ারের ভবিষ্যত সম্ভাবনাগুলি সম্পর্কে উত্তেজিত৷
ডকুমেন্ট পিকচার-ইন-পিকচার API আরও স্বজ্ঞাত এবং ব্যবহারকারী-বান্ধব মিনিপ্লেয়ার তৈরি করতে নমনীয়তা এবং নিয়ন্ত্রণ প্রদান করেছে। আশা করা যায় যে অন্যান্য ব্রাউজার বিক্রেতারা এই API অফার করার সুযোগগুলি নোট করবে এবং এটির জন্য সমর্থন অন্তর্ভুক্ত করার কথা বিবেচনা করবে। এটি স্পটিফাইকে তাদের নির্বাচিত ব্রাউজার নির্বিশেষে সমস্ত ব্যবহারকারীদের জন্য একটি সামঞ্জস্যপূর্ণ এবং উন্নত অভিজ্ঞতা প্রদানের অনুমতি দেবে।
স্বীকৃতি
Spotify-এর সবাইকে ধন্যবাদ যারা মিনিপ্লেয়ার তৈরিতে জড়িত ছিলেন।
Spotify Google Chrome টিমকে তাদের সহযোগিতার জন্য এবং ডকুমেন্ট পিকচার-ইন-পিকচার API-এর জন্য Spotify-এর প্রতিক্রিয়া বিবেচনা করার জন্য ধন্যবাদ জানাতে চাই।