چگونه Spotify از API Picture-in-Picture برای ساخت Spotify Miniplayer استفاده کرد

Guido Kessels

François Beaufort

Spotify، محبوب‌ترین سرویس اشتراک پخش صوتی در جهان، به طور مداوم با هدف بهبود نحوه مصرف محتوای صوتی و تصویری کاربران می‌کوشد. با ارائه کتابخانه گسترده ای از موسیقی، پادکست و کتاب های صوتی، روزانه میلیون ها کاربر را در تلفن همراه، رایانه شخصی و سایر سیستم عامل ها ارائه می دهد.

Spotify اخیرا Spotify Miniplayer را برای مشتریان دسکتاپ و وب پلیر خود منتشر کرده است. Miniplayer به گونه‌ای طراحی شده است که کنترل‌های پخش ضروری را در یک پنجره کوچک و جمع‌وجور ارائه می‌کند که در بالا باقی می‌ماند و دسترسی دائمی به Spotify را برای کاربران فراهم می‌کند. این یک ویژگی طولانی مدت درخواستی بوده است و به کاربران امکان می‌دهد تا همزمان با لذت بردن از هنرمندان، لیست‌های پخش و پادکست‌های مورد علاقه خود در Spotify، به‌طور یکپارچه در ویندوز و برنامه‌های مختلف چند کار را انجام دهند.

آنچه در ادامه می‌آید نگاهی دقیق به توسعه Miniplayer است، از "هک بوم" اولیه تا نسخه پیشرفته‌تر و کاربرپسند ساخته شده بر روی Document Picture-in-Picture API جدید.

"هک بوم"

نسخه اولیه Miniplayer در سال 2019 در وب پلیر Spotify به عنوان یک پروژه هک راه اندازی شد. هدف استفاده از API Picture-in-Picture (PiP) مرورگر برای <video> برای نمایش هنر آلبوم در یک پنجره همیشه رو به بالا بود. با این حال، این API در درجه اول برای عناصر ویدیویی طراحی شده بود و امکان نمایش تصاویر هنری آلبوم وجود نداشت. Spotify با رندر کردن هنر آلبوم به یک عنصر بوم و استفاده از متد HTMLCanvasElement captureStream() برای به دست آوردن یک شی MediaStream بلادرنگ این کار را دور زد. سپس این جریان به عنوان منبع ویدیوی مورد استفاده برای PiP API عمل می کند. این رویکرد بر اساس نمونه «لیست پخش صوتی» Google Chrome است.

Spotify بوم را با کنترل‌کننده‌های عمل مناسب تنظیم‌شده در Media Session API ترکیب کرد تا کنترل‌های پخش‌کننده را در پنجره PiP کنترل کند. این به کاربران یک پنجره شناور با آلبوم هنری و کنترل های پخش کننده داد که می توانستند از آن برای کنترل پخش و در عین حال تمرکز بر کارهای دیگر استفاده کنند.

این به Spotify اجازه داد تا یک Miniplayer اصلی داشته باشد. با این حال، این رویکرد چندین محدودیت داشت:

• زیرنویس‌های ویدیو در پنجره PiP پشتیبانی نمی‌شوند . از آنجایی که Spotify ملزم به نمایش زیرنویس روی همه ویدیوها بود، به محض شروع پخش یک ویدیو، مجبور شدند پنجره PiP را ببندند.
• کنترل های پخش کننده تنها در صورتی قابل مشاهده هستند که پخش به صورت محلی انجام شود. Spotify امکان پخش از راه دور با استفاده از Spotify Connect (و سایر پروتکل ها) را فراهم می کند و از کاربر می خواهد که بتواند این پخش را نیز کنترل کند.
• هیچ پشتیبانی برای سفارشی کردن ظاهر و احساس پنجره PiP وجود ندارد. Spotify فقط می‌تواند آثار هنری را نمایش دهد و از کنترل‌های پخش‌کننده ارائه شده توسط Chrome استفاده کند و از اضافه کردن علامت تجاری Spotify یا کنترل‌های اضافی پخش‌کننده جلوگیری کند.

عدم کنترل بر روی رابط کاربری و ناتوانی در افزودن ویژگی‌های خاص Spotify در اینجا (به عنوان مثال، دوست داشتن یک آهنگ) به این معنی است که آنها احساس نمی‌کنند این رویکرد برای مشتری دسکتاپ مناسب است.

مستند Picture-in-Picture: تکامل Miniplayer

در اوایل سال 2023، Spotify در مورد علاقه مجدد گوگل کروم به راه اندازی یک API جدید که به محتوای دلخواه HTML اجازه می دهد در پنجره PiP نمایش داده شود، مطلع شد که به عنوان Document Picture-in-Picture API شناخته می شود. این پیشرفت برای Spotify هیجان‌انگیز بود، زیرا به آنها کنترل کامل بر ظاهر پنجره PiP را می‌داد. Spotify با تیم Chrome در طول آزمایش اولیه آنها برای توسعه یک Miniplayer جدید ساخته شده بر روی Document Picture-in-Picture API همکاری کرد.

Document PiP API به شما این امکان را می دهد که یک پنجره همیشه در بالا باز کنید که می توانید عناصر را به آن متصل کنید. از آنجایی که Spotify Web Player یک برنامه وب React است، Spotify از روش ReactDOM'screatePortal createPortal() برای ارائه کامپوننت های سفارشی به پنجره PiP از برنامه اصلی استفاده می کند و کنترل کاملی بر ظاهر و ویژگی های Miniplayer می دهد.

API جدید Document Picture-in-Picture به مشکلات قبلی Spotify نیز پرداخته است:

• ویدیوهای داخل پنجره PiP عناصر ویدیویی معمولی هستند و از زیرنویس ها پشتیبانی کامل دارند.
• با کنترل کامل بر روی رابط کاربری، کنترل های پخش کننده را می توان حتی زمانی که پخش از راه دور با استفاده از Spotify Connect انجام می شود نشان داده شود.
• Spotify توانست ظاهر و ظاهر و کنترل های پخش کننده خود را ترکیب کند و تجربه کاربری را بهبود بخشد.
• آنها توانستند پشتیبانی از Document PiP API را به کلاینت دسکتاپ Spotify ارائه دهند و به آن‌ها اجازه دهند Miniplayer را به میلیون‌ها کاربر دسکتاپ ارائه دهند.

با استفاده از React یک پنجره Picture-in-Picture ایجاد کنید

مثال زیر نشان می دهد که چگونه می توانید از Document Picture-in-Picture در React مانند تیم Spotify استفاده کنید. شما دو جزء React ایجاد خواهید کرد: MyFeature و PiPContainer .

مؤلفه MyFeature مسئول مدیریت پنجره Picture-in-Picture است. دکمه ای را رندر می کند که پنجره Picture-in-Picture را تغییر می دهد و جزء PiPContainer را رندر می کند. همچنین در رویداد "pagehide" پنجره Picture-in-Picture مشترک می شود تا در هنگام بسته شدن پنجره وضعیت را به روز کند.

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's createPortal() برای رندر محتوا در پنجره Picture-in-Picture استفاده می کند.

توجه: برای اطمینان از یک استایل ثابت، Spotify از یک تابع cloneStyles() برای کپی کردن سبک ها از پنجره اصلی به پنجره Picture-in-Picture استفاده می کند. این تابع در این قطعه گنجانده نشده است، اما می‌توانید یک مثال را در Picture-in-Picture برای هر عنصر، نه فقط <video> مشاهده کنید.

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 به پیشرفت و نوآوری خود ادامه می دهد، آنها همچنان به بهبود Miniplayer متعهد هستند و قصد دارند ویژگی ها و تجربه کاربری آن را بیشتر اصلاح کنند. در حالی که هنوز نمی توانند به ویژگی های خاصی متعهد شوند، در مورد احتمالات آینده Miniplayer هیجان زده هستند.

Document Picture-in-Picture API انعطاف پذیری و کنترلی را برای ایجاد یک Miniplayer بصری تر و کاربرپسند فراهم کرده است. امید است که سایر فروشندگان مرورگر به فرصت هایی که این API ارائه می دهد توجه داشته باشند و پشتیبانی از آن را در نظر بگیرند. این به Spotify اجازه می دهد تا تجربه ای سازگار و پیشرفته را برای همه کاربران، صرف نظر از مرورگر انتخابی آنها، ارائه دهد.

سپاسگزاریها

با تشکر از همه کسانی که در Spotify در ساختن Miniplayer مشارکت داشتند.

Spotify همچنین مایل است از تیم Google Chrome برای همکاری و در نظر گرفتن بازخورد Spotify برای Document Picture-in-Picture API تشکر کند.