Dünyanın en popüler ses akışı abonelik hizmeti olan Spotify, kullanıcıların ses ve video içeriklerini tüketme şeklini sürekli olarak iyileştirmeyi amaçlar. Müzik, podcast ve sesli kitaplardan oluşan geniş bir kitaplık sunan bu kitaplık, her gün mobil, bilgisayar ve diğer platformlarda milyonlarca kullanıcıya hizmet verir.
Kısa süre önce Spotify, masaüstü ve web oynatıcısı istemcileri için Spotify Mini Oynatıcı'yı kullanıma sundu. Mini Oynatıcı, en üstte duran küçük ve kompakt bir pencerede gerekli oynatma kontrollerini sunarak kullanıcıların Spotify'a sürekli erişmesini sağlayacak şekilde tasarlanmıştır. Uzun süredir talep gören bu özellik, kullanıcıların Spotify'da en sevdikleri sanatçıları, oynatma listelerini ve podcast'leri izlerken farklı pencere ve uygulamalarda sorunsuz bir şekilde çoklu işlemler gerçekleştirmesini sağlıyor.
Ardından, Mini Oynatıcı'nın geliştirilmesine dair ayrıntılı bir inceleme bulabilirsiniz. İlk "tuval hack'lerinden" yeni Document Picture-in-Picture API'yi temel alan daha gelişmiş ve kullanıcı dostu sürüme kadar.
"Tuval hırsızlığı"
Mini Oynatıcı'nın ilk iterasyonu, 2019 yılında Spotify'ın Web Player uygulamasında bir hack projesi olarak kullanıma sunuldu. Amaç, albüm kapağının her zaman açık bir pencerede görüntülenmesi amacıyla tarayıcının <video > için Pencere İçinde Pencere (PiP) API'sini kullanmaktı. Ancak bu API, birincil olarak video öğeleri için tasarlandığından albüm kapağı resimleri göstermek mümkün değildi. Spotify, albüm kapağını tuval öğesine dönüştürerek ve gerçek zamanlı bir MediaStream nesnesi elde etmek için HTMLCanvasElement captureStream() yöntemini kullanarak bu durumu atlattı. Ardından bu akış, PiP API için kullanılan videonun kaynağı olarak kullanılır. Bu yaklaşım, Google Chrome'un "Sesli Oynatma Listesi" örneğini temel alıyordu.
Spotify, PiP penceresinde hangi oynatıcı kontrollerinin görüneceğini kontrol etmek için tuvali Media Session API'de ayarlanan uygun işlem işleyicilerle birleştirdi. Böylece kullanıcılar, albüm kapağının ve oynatıcı kontrollerinin bulunduğu kayan bir pencereye sahip oldular. Böylece kullanıcılar, diğer işlere odaklanırken oynatmayı kontrol edebildiler.
Bu, Spotify'ın temel bir Mini Oynatıcı'ya sahip olmasını sağladı. Ancak bu yaklaşımda bazı sınırlamalar vardı:
- Video altyazıları PiP penceresinde desteklenmez. Spotify'ın tüm videolarda altyazı göstermesi gerektiğinden, bir video oynatılmaya başlar başlamaz PiP penceresini kapatmak zorunda kaldılar.
- Oynatıcı kontrolleri yalnızca oynatma yerel olarak gerçekleşiyorsa görünür. Spotify, Spotify Connect'i (ve diğer protokolleri) kullanarak uzaktan oynatmaya olanak tanır ve kullanıcının bu oynatmayı da kontrol edebilmesini ister
- PiP penceresinin görünümünü ve tarzını özelleştirmek için destek sunulmaz. Spotify yalnızca sanat eserlerini gösterebilir ve Chrome tarafından sağlanan oynatıcı kontrollerini kullanabilir. Bu durumda, Spotify markasının veya ek oynatıcı denetimlerinin eklenmesi engellenir.
Kullanıcı arayüzü üzerinde kontrol sahibi olmaması ve Spotify'a özgü özellikleri buraya ekleyememesi (örneğin, parça beğenme), masaüstü istemcisi için bu yaklaşımın uygun olmadığına karar verdi.
Pencere İçinde Pencere Belgesi: Mini Oynatıcının Evrimi
Spotify, 2023'ün başlarında Google Chrome'un Document Picture-in-Picture API olarak bilinen PiP penceresinde rastgele HTML içeriklerinin görüntülenmesine olanak tanıyacak yeni bir API'yi kullanıma sunma konusundaki heyecanını duydu. Bu gelişme, PiP penceresinin görünümü üzerinde tam kontrol sahibi olmasını sağlayacağı için Spotify açısından heyecan vericiydi. Spotify, Origin Deneme sürecinde Chrome ekibiyle birlikte çalışarak Document Picture-in-Picture API temel alınarak oluşturulmuş yeni bir Mini Oynatıcı geliştirdi.
Document PiP API, öğe ekleyebileceğiniz yeni bir her zaman açık pencere açmanıza olanak tanır. Spotify Web Player bir React web uygulaması olduğundan Spotify, özel bileşenleri ana uygulamadan PiP penceresine oluşturmak için ReactDOM'un createPortal() yöntemini kullandı. Böylece Mini Oynatıcının görünümü ve özellikleri üzerinde tam kontrol sahibi oldu.
Yeni Document Picture-in-Picture API'si de Spotify'ın önceki sorunlarını ele aldı:
- PiP penceresi içindeki videolar normal video öğeleridir ve altyazılar için tam destek sunar.
- Kullanıcı arayüzü üzerinde tam kontrol sayesinde oynatıcı kontrolleri, Spotify Connect ile uzaktan oynatma yapılırken bile gösterilebilir.
- Spotify, hem görünüm ve tarzının yanı sıra hem de oyuncu kontrollerini dahil ederek kullanıcı deneyimini iyileştirdi.
- Spotify'ın Masaüstü istemcisine Document PiP API desteği eklendi. Böylece şirket, Mini Oynatıcı'yı milyonlarca masaüstü kullanıcısına sunabildi.
React özelliğini kullanarak pencere içinde pencere oluşturma
Aşağıdaki örnekte, tıpkı Spotify ekibi gibi, React'te Pencere İçinde Pencere özelliğini nasıl kullanabileceğiniz gösterilmektedir. MyFeature ve PiPContainer olmak üzere iki React bileşeni oluşturacaksınız.
MyFeature bileşeni, Pencere İçinde Pencere penceresinin yönetilmesinden sorumludur. Pencere İçinde Pencere penceresini açan bir düğme oluşturur ve PiPContainer bileşenini oluşturur. Ayrıca, Pencere İçinde Pencere penceresinin "pagehide" etkinliğine abone olarak pencere kapatıldığında durumu günceller.
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 bileşeni, Resim İçinde Pencere penceresinde içerik oluşturmak için ReactDOM'un createPortal() yöntemini kullanır.
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;
};
Sırada ne var?
Spotify gelişmeye ve yenilikler yapmaya devam ederken Mini Oynatıcı'yı geliştirme konusundaki kararlılığı ve özellikleri ile kullanıcı deneyimini daha da hassaslaştırmayı planlıyor. Henüz belirli özellikleri kullanıma sunamıyor olsa da mini Oynatıcı'nın gelecekte sunacağı olanaklar konusunda heyecanlı.
Document Picture-in-Picture API, daha sezgisel ve kullanıcı dostu bir Mini Oynatıcı oluşturmak için gereken esnekliği ve kontrolü sağlar. Diğer tarayıcı tedarikçilerinin bu API'nın sunduğu fırsatları dikkate alacağını ve bunun için destek sunmayı düşüneceklerini umuyoruz. Bu sayede Spotify, seçilen tarayıcıdan bağımsız olarak tüm kullanıcılara tutarlı ve gelişmiş bir deneyim sunabilir.
Teşekkür
Spotify'da Mini Oynatıcı'nın geliştirilmesine katkıda bulunan herkese teşekkür ederiz.
Spotify ayrıca, işbirliği yaptıkları ve Document Picture-in-Picture API'de Spotify'ın geri bildirimini dikkate aldıkları için Google Chrome ekibine de teşekkür ediyor.