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

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

अपनी बड़ी ऑडियंस को बेहतरीन अनुभव देने के लिए, 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 लाइब्रेरी और गाइड का इस्तेमाल करके, हमने कॉन्टेंट के इस्तेमाल से जुड़ी अपनी अहम जानकारी को, प्लैटफ़ॉर्म में इनोवेशन से जुड़ी उनकी विशेषज्ञता के साथ जोड़ा. इस सहयोग से, दोनों टीमों को सीमाओं को पार करने, कमियों को दूर करने, और हर स्क्रीन साइज़ के लिए, एक जैसा और इमर्सिव अनुभव बनाने में मदद मिली.

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