फ़ोन के अलावा अन्य डिवाइसों पर JioHotstar: JioHotstar ने अडैप्टिव यूएक्स कैसे बनाया

JioHotstar, भारत में स्ट्रीमिंग का एक बड़ा प्लैटफ़ॉर्म है. इसके 40 करोड़ से ज़्यादा उपयोगकर्ता हैं. इसकी कॉन्टेंट लाइब्रेरी में, मांग पर उपलब्ध (वीओडी) 3,30,000 से ज़्यादा घंटों का वीडियो कॉन्टेंट है. साथ ही, यह प्लैटफ़ॉर्म बड़े खेल इवेंट को रीयल टाइम में दिखाता है. इसलिए, यह बड़े पैमाने पर काम करता है.

अपने दर्शकों को बेहतरीन अनुभव देने के लिए, JioHotstar ने फ़ोल्ड किए जा सकने वाले फ़ोन और टैबलेट के लिए अपने ऐप्लिकेशन को ऑप्टिमाइज़ किया है. इससे दर्शकों को वीडियो देखने का बेहतर अनुभव मिलता है. ऐसा करने के लिए, JioHotstar ने Google के अडैप्टिव ऐप्लिकेशन से जुड़े दिशा-निर्देशों का पालन किया. साथ ही, सैंपल, कोडलैब, कुकबुक, और दस्तावेज़ जैसे संसाधनों का इस्तेमाल किया, ताकि सभी डिसप्ले साइज़ में एक जैसा और बेहतर अनुभव दिया जा सके.

बड़ी स्क्रीन पर JioHotstar से जुड़ी चुनौती

JioHotstar, सामान्य फ़ोन पर बेहतरीन उपयोगकर्ता अनुभव देता है. अब टीम, नए फ़ॉर्म फ़ैक्टर का फ़ायदा उठाना चाहती थी. इसके लिए, टीम ने अपने ऐप्लिकेशन की तुलना, बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों से की. इससे टीम को यह समझने में मदद मिली कि फ़ोल्ड किए जा सकने वाले फ़ोन और टैबलेट पर, उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, ऐप्लिकेशन में क्या-क्या ऑप्टिमाइज़ेशन करने होंगे. बड़ी स्क्रीन वाले ऐप्लिकेशन के लिए, पहले लेवल की क्वालिटी हासिल करने के लिए, टीम ने दो अहम अपडेट लागू किए. इससे ऐप्लिकेशन को अलग-अलग फ़ॉर्म फ़ैक्टर के हिसाब से अडजस्ट किया जा सका. साथ ही, फ़ोल्ड किए जा सकने वाले फ़ोन पर, ऐप्लिकेशन को अलग-अलग तरीके से इस्तेमाल किया जा सका. फ़ोल्ड किए जा सकने वाले फ़ोन और टैबलेट से जुड़ी चुनौतियों को हल करके, JioHotstar का लक्ष्य है कि सभी डिसप्ले साइज़ और आसपेक्ट रेशियो में, उपयोगकर्ताओं को बेहतरीन और इमर्सिव अनुभव मिले.

टीम ने क्या किया

JioHotstar का यूज़र इंटरफ़ेस (यूआई) मुख्य तौर पर, सामान्य फ़ोन की स्क्रीन के लिए डिज़ाइन किया गया था. इसलिए, अन्य फ़ॉर्म फ़ैक्टर की अलग-अलग स्क्रीन साइज़ और रिज़ॉल्यूशन के हिसाब से, हीरो इमेज के आसपेक्ट रेशियो, मेन्यू, और शो स्क्रीन को अडजस्ट करने में समस्याएं आ रही थीं. इसकी वजह से, अक्सर इमेज क्रॉप हो जाती थी, लेटरबॉक्सिंग की समस्या आती थी, रिज़ॉल्यूशन कम हो जाता था, और स्क्रीन का कुछ हिस्सा खाली रह जाता था. खास तौर पर, लैंडस्केप मोड में यह समस्या ज़्यादा होती थी. टैबलेट और फ़ोल्ड किए जा सकने वाले फ़ोन की सुविधाओं का पूरी तरह से फ़ायदा उठाने और इन डिवाइसों पर उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, JioHotstar ने यूआई को बेहतर बनाने पर फ़ोकस किया. इससे यह पक्का किया गया कि अलग-अलग डिवाइसों पर लेआउट में ज़रूरत के हिसाब से बदलाव किया जा सके, इमेज रेंडरिंग बेहतर हो, और नेविगेशन आसान हो.

टीम ने क्या किया

बड़ी स्क्रीन पर वीडियो देखने का बेहतर अनुभव देने के लिए, JioHotstar ने अपने ऐप्लिकेशन को बेहतर बनाने की पहल की. इसके लिए, WindowSizeClass को शामिल किया गया. साथ ही, कॉम्पैक्ट, मीडियम, और एक्सटेंडेट विड्थ के लिए ऑप्टिमाइज़ किए गए लेआउट बनाए गए. इससे ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को अलग-अलग स्क्रीन डाइमेंशन और आसपेक्ट रेशियो के हिसाब से अडजस्ट किया जा सका. साथ ही, अलग-अलग डिवाइसों पर एक जैसा और देखने में आकर्षक यूआई दिया जा सका.

JioHotstar ने यह पैटर्न, Material 3 अडैप्टिव लाइब्रेरी का इस्तेमाल करके फ़ॉलो किया. इससे यह पता चला कि ऐप्लिकेशन के लिए कितनी जगह उपलब्ध है. सबसे पहले, currentWindowAdaptiveInfo() फ़ंक्शन को लागू किया गया. इसके बाद, विंडो साइज़ की तीन क्लास के लिए, नए लेआउट का इस्तेमाल किया गया:

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass

if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

ब्रेकपॉइंट, सबसे बड़े से लेकर सबसे छोटे तक के क्रम में हैं. ऐसा इसलिए है, क्योंकि एपीआई इंटरनल तौर पर, इससे ज़्यादा या इसके बराबर की चौड़ाई की जांच करता है. इसलिए, EXPANDED से ज़्यादा या इसके बराबर की कोई भी चौड़ाई, हमेशा MEDIUM से ज़्यादा होगी.

JioHotstar, फ़ोल्ड किए जा सकने वाले फ़ोन के लिए, खास तौर पर डिज़ाइन किया गया बेहतरीन अनुभव दे सकता है: टेबलटॉप मोड. इस सुविधा से, वीडियो प्लेयर को स्क्रीन के ऊपरी हिस्से पर और वीडियो कंट्रोल को स्क्रीन के निचले हिस्से पर आसानी से ले जाया जा सकता है. ऐसा तब होता है, जब फ़ोल्ड किए जा सकने वाले फ़ोन को बिना हाथ लगाए वीडियो देखने के लिए, थोड़ा फ़ोल्ड किया जाता है.

ऐसा करने के लिए, Material 3 अडैप्टिव लाइब्रेरी का इस्तेमाल किया गया. साथ ही, टेबलटॉप मोड के बारे में क्वेरी करने के लिए, currentWindowAdaptiveInfo() का इस्तेमाल किया जा सकता है. डिवाइस को टेबलटॉप मोड में रखने के बाद, लेआउट में बदलाव किया जा सकता है, ताकि यह डिवाइस की ऊपरी और निचली स्क्रीन के हिसाब से दिखे. इसके लिए, प्लेयर को स्क्रीन के ऊपरी हिस्से पर और कंट्रोलर को स्क्रीन के निचले हिस्से पर रखने के लिए, कॉलम का इस्तेमाल किया जा सकता है:

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

JioHotstar अब, पहले लेवल की क्वालिटी के लिए, बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी से जुड़े दिशा-निर्देशों के मुताबिक है. टीम ने इन सुझावों को शामिल करने के लिए, अडैप्टिव ऐप्लिकेशन से जुड़े दिशा-निर्देशों का इस्तेमाल किया. साथ ही, सैंपल, कोडलैब, कुकबुक, और दस्तावेज़ों का इस्तेमाल किया.

उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, JioHotstar ने वीडियो खोजने वाले पेजों पर, टच टारगेट के साइज़ को बढ़ाकर, सुझाए गए 48dp तक कर दिया है. इससे बड़ी स्क्रीन वाले डिवाइसों पर, ऐप्लिकेशन को आसानी से ऐक्सेस किया जा सकता है. वीडियो की जानकारी वाला पेज अब अडैप्टिव है. यह स्क्रीन साइज़ और ओरिएंटेशन के हिसाब से अडजस्ट हो जाता है. टीम ने इमेज को सिर्फ़ स्केल करने के बजाय, विंडो साइज़ क्लास का इस्तेमाल किया. इससे रीयल टाइम में, विंडो साइज़ और डेंसिटी का पता लगाया जा सका. साथ ही, हर फ़ॉर्म फ़ैक्टर के लिए सबसे सही हीरो इमेज लोड की जा सकी. इससे विज़ुअल फ़िडेलिटी को बेहतर बनाने में मदद मिली. नेविगेशन को भी बेहतर बनाया गया है. इसके लिए, लेआउट को अलग-अलग स्क्रीन साइज़ के हिसाब से अडजस्ट किया गया.

अब उपयोगकर्ता, JioHotstar पर अपने पसंदीदा कॉन्टेंट को बड़ी स्क्रीन वाले डिवाइसों पर देख सकते हैं. साथ ही, उन्हें वीडियो देखने का बेहतर और ऑप्टिमाइज़ किया गया अनुभव मिलता है.

" Google के साथ मिलकर, पहले लेवल की क्वालिटी के लिए, बड़ी स्क्रीन वाले ऐप्लिकेशन की क्वालिटी हासिल करना एक अहम उपलब्धि है. इससे हमारी साझा विज़न की ताकत दिखती है. JioHotstar में, हमारा हमेशा से मानना रहा है कि बड़ी स्क्रीन वाले डिवाइसों के लिए ऑप्टिमाइज़ेशन, सिर्फ़ अडैप्टेबिलिटी से कहीं ज़्यादा है. यह उन दर्शकों के लिए वीडियो देखने के अनुभव को बेहतर बनाने के बारे में है जो फ़ोल्ड किए जा सकने वाले फ़ोन, टैबलेट, और कनेक्टेड टीवी का इस्तेमाल तेज़ी से कर रहे हैं.

Google की Jetpack लाइब्रेरी और गाइड का इस्तेमाल करके, हम कॉन्टेंट के इस्तेमाल से जुड़ी अपनी अहम जानकारी को, प्लैटफ़ॉर्म इनोवेशन में उनकी विशेषज्ञता के साथ जोड़ पाए. इस सहयोग से, दोनों टीमों को सीमाओं को पार करने, कमियों को दूर करने, और हर स्क्रीन साइज़ के लिए, इमर्सिव और बेहतर अनुभव देने में मदद मिली.

हमें खुशी है कि हम लाखों उपयोगकर्ताओं को वीडियो देखने का बेहतर अनुभव दे पा रहे हैं. साथ ही, हम भारत और दुनिया में स्ट्रीमिंग के नए बेंचमार्क सेट कर रहे हैं."
- सोनू संजीव, सीनियर सॉफ़्टवेयर डेवलपमेंट इंजीनियर