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

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

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

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

JioHotstar के लिए बड़ी स्क्रीन की चुनौती

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

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

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

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

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

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