feat: iOS subtitles & UI updates

lrtlt · Aug 14, 2024 · 6db917d · 6db917d
1 parent 9407209
commit 6db917d
Show file tree

Hide file tree

Showing 17 changed files with 48 additions and 36 deletions.
diff --git a/app/Theme.ts b/app/Theme.ts
@@ -113,11 +113,11 @@ type ChannelColorScheme = {
 };
 
 export const channelColors: ChannelColorScheme = {
-  color_set_lrtHD: {primary: '#83a8d9', secondary: '#0a45bc'},
-  color_set_lrtPlius: {primary: '#A91B73', secondary: '#721F47'},
-  color_set_lrt_world: {primary: '#6D9B36', secondary: '#007A3C'},
-  color_set_l_radio: {primary: '#EA8D7A', secondary: '#D92053'},
-  color_set_classic: {primary: '#C47FAA', secondary: '#441D56'},
+  color_set_lrtHD: {primary: '#83a8d9', secondary: '#2C478B'},
+  color_set_lrtPlius: {primary: '#A91B73', secondary: '#7D2B7C'},
+  color_set_lrt_world: {primary: '#6D9B36', secondary: '#64B445'},
+  color_set_l_radio: {primary: '#EA8D7A', secondary: '#C4242C'},
+  color_set_classic: {primary: '#C47FAA', secondary: '#603680'},
   color_set_opus: {primary: '#F2B12E', secondary: '#E7792B'},
   color_set_lrtLT: {primary: '#545a94', secondary: '#2f357d'},
   color_set_default: {primary: '#BADAFB', secondary: '#93BDE7'},

diff --git a/app/car/AndroidAuto.ts b/app/car/AndroidAuto.ts
@@ -138,6 +138,7 @@ export const onLiveTabOpened = withDebounce(
             fetchStreamData({
               url: channel.stream_url,
               title: channel.channel_title,
+              prioritizeAudio: true,
               //Return channel id as poster so we can map it to the actual image later
               poster: channel.channel_id.toString(),
             }),

diff --git a/app/car/live/LiveTemplate.ts b/app/car/live/LiveTemplate.ts
@@ -30,6 +30,7 @@ class LiveTemplate extends BaseListTemplate {
                 fetchStreamData({
                   url: channel.stream_url,
                   title: channel.channel_title,
+                  prioritizeAudio: true,
                   //Return channel id as poster so we can map it to the actual image later
                   poster: channel.channel_id.toString(),
                 }),
@@ -44,6 +45,7 @@ class LiveTemplate extends BaseListTemplate {
                 // detailText: stream.title,
                 imgUrl: getImageByChannelId(stream.poster),
                 streamUrl: stream.streamUri,
+                isLiveStream: true,
               }));
               return items;
             }

diff --git a/app/components/scrollingChannels/channel_v2/Channel_v2.tsx b/app/components/scrollingChannels/channel_v2/Channel_v2.tsx
@@ -28,14 +28,14 @@ const ChannelV2: React.FC<React.PropsWithChildren<Props>> = ({data, onPress}) =>
       <View
         style={{
           ...styles.bottomBar,
-          backgroundColor: dark ? colors.primary : colorsSet.secondary,
+          backgroundColor: colorsSet.secondary,
         }}
       />
       <View
         style={{
           ...styles.bottomBarOverlay,
           width: `${Math.max(0, Math.min(Number(data.proc), 100))}%`,
-          backgroundColor: dark ? colors.primary : colorsSet.secondary,
+          backgroundColor: colorsSet.secondary,
         }}
       />
     </View>
@@ -53,14 +53,16 @@ const ChannelV2: React.FC<React.PropsWithChildren<Props>> = ({data, onPress}) =>
             height: '100%',
             justifyContent: 'flex-start',
             alignItems: 'flex-start',
-            backgroundColor: colorsSet.primary + '10',
+            backgroundColor: dark ? '#FFFFFF08' : colorsSet.primary + '10',
             borderRadius: 6,
             paddingVertical: 12,
             paddingHorizontal: 8,
             borderColor: isLive ? colors.listSeparator : 'transparent',
             borderWidth: isLive ? StyleSheet.hairlineWidth : undefined,
           }}>
-          {getIconForChannel(data.channel, {height: 24}, dark ? colors.primary : colorsSet.secondary)}
+          <View style={{backgroundColor: '#FFFFFF00', paddingHorizontal: 4, borderRadius: 4}}>
+            {getIconForChannel(data.channel, {height: 24}, dark ? colors.text : colorsSet.secondary)}
+          </View>
           <View style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
             <TextComponent style={{...styles.timeText, color: colors.text}}>
               {data.time_start + ' - ' + data.time_end}

diff --git a/app/components/svg/ic_channel_classic.js b/app/components/svg/ic_channel_classic.js
@@ -21,7 +21,7 @@ const SvgComponent = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M36.055 31.926h2.731V.305h-2.731v31.621Z"
-        fill={props.color ? props.color : '#603680'}
+        fill="#603680"
       />
     </Svg>
   );

diff --git a/app/components/svg/ic_channel_l_radio.js b/app/components/svg/ic_channel_l_radio.js
@@ -21,7 +21,7 @@ const SvgComponent = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M34.663 31.926h2.627V.304h-2.627v31.622Z"
-        fill={props.color ? props.color : '#C4242C'}
+        fill="#C4242C"
       />
     </Svg>
   );

diff --git a/app/components/svg/ic_channel_lrt_hd.js b/app/components/svg/ic_channel_lrt_hd.js
@@ -22,7 +22,7 @@ const SvgComponent = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M35.619 31.926h2.698V.305H35.62v31.621Z"
-        fill={props.color ? props.color : '#2C478B'}
+        fill="#2C478B"
       />
     </Svg>
   );

diff --git a/app/components/svg/ic_channel_lrt_plius.js b/app/components/svg/ic_channel_lrt_plius.js
@@ -21,7 +21,7 @@ const SvgComponent = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M35.599 31.853h2.697V.305h-2.697v31.548Z"
-        fill={props.color ? props.color : '#7D2B7C'}
+        fill="#7D2B7C"
       />
     </Svg>
   );

diff --git a/app/components/svg/ic_channel_lrt_world.js b/app/components/svg/ic_channel_lrt_world.js
@@ -17,12 +17,7 @@ const SvgComponent = (props) => {
         d="M15.22 17.461c1.995-.51 2.738-2.243 2.738-3.617 0-2.383-1.73-3.984-4.303-3.984H8.398v2.414h4.862c1.077 0 1.802.64 1.802 1.57S14.337 15.4 13.26 15.4H9.655v2.411h2.678l2.471 4.325h3.263l-2.847-4.675ZM19.223 9.86v2.41h3.411v9.861h2.84v-9.86h3.411V9.86h-9.662ZM2.84 19.722V9.861H0v12.27h8.397v-2.409H2.84ZM51.606 9.875H48.76v12.26h8.148v-2.433h-5.303V9.875ZM58.81 22.135h2.844V9.875h-2.845v12.26ZM63.465 12.309h3.667v9.827h2.864v-9.827h3.648V9.875h-10.18v2.434ZM84.071 17.139c0 1.73-1.064 2.762-2.847 2.762-1.794 0-2.865-1.033-2.865-2.762V9.875h-2.883v7.354c0 3.256 2.095 5.124 5.748 5.124s5.748-1.874 5.748-5.142V9.875h-2.901v7.264ZM96.308 9.875h-3.467l-4.919 12.26h3.234l.79-2.048h5.257l.771 2.048h3.235L96.329 9.93l-.02-.054Zm.1 7.778h-3.665l1.832-4.873 1.832 4.873ZM111.312 17.3l-5.654-7.39-.026-.035h-2.877v12.26h2.845v-7.713l5.849 7.713h2.708V9.875h-2.845V17.3ZM117.144 22.135h2.844V9.875h-2.844v12.26ZM131.933 18.189c-.549 1.04-1.678 1.712-2.875 1.712-2.227 0-3.843-1.634-3.843-3.886 0-2.253 1.616-3.888 3.843-3.888 1.169 0 2.324.689 2.875 1.714l.039.073 2.454-1.163-.045-.077c-.803-1.368-2.379-2.998-5.323-2.998-3.919 0-6.764 2.665-6.764 6.339 0 3.673 2.845 6.338 6.764 6.338 2.332 0 4.123-1.014 5.322-3.016l.047-.077-2.455-1.145-.039.074ZM143.121 9.929l-.021-.054h-3.467l-4.92 12.26h3.234l.791-2.048h5.257l.77 2.048H148L143.121 9.93Zm.077 7.725h-3.664l1.832-4.874 1.832 4.874Z"
         fill={props.color ? props.color : dark ? colors.headerTint : '#1C2142'}
       />
-      <Path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M37.407 32h2.84V0h-2.84v32Z"
-        fill={props.color ? props.color : '#64B445'}
-      />
+      <Path fillRule="evenodd" clipRule="evenodd" d="M37.407 32h2.84V0h-2.84v32Z" fill="#64B445" />
     </Svg>
   );
 };

diff --git a/app/components/svg/ic_channel_opus.js b/app/components/svg/ic_channel_opus.js
@@ -21,7 +21,7 @@ const SvgComponent = (props) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M35.463 31.926h2.687V.305h-2.687v31.621Z"
-        fill={props.color ? props.color : '#E7792B'}
+        fill="#E7792B"
       />
     </Svg>
   );

diff --git a/app/components/videoComponent/TheoMediaPlayer.tsx b/app/components/videoComponent/TheoMediaPlayer.tsx
@@ -78,9 +78,20 @@ const makeSource = (
   sources: [
     {
       src: uri,
+      // src: 'https://cdn.theoplayer.com/video/elephants-dream/playlistCorrectionENG.m3u8',
+      // type: 'application/x-mpegurl',
     },
   ],
-  textTracks: Platform.OS === 'android' ? tracks : undefined,
+  // textTracks: [
+  //   {
+  //     default: true,
+  //     src: 'https://www.lrt.lt/media/VIDEO/2024-07/ZIN42126_W_828f0acf-e712-4f53-a1c3-7f4ba05dea2a.txt',
+  //     label: 'LRT Test',
+  //     kind: 'subtitles',
+  //     srclang: 'lt',
+  //   },
+  // ],
+  textTracks: tracks,
 });
 
 const TheoMediaPlayer: React.FC<React.PropsWithChildren<Props>> = ({

diff --git a/app/components/videoComponent/context/PlayerProvider.tsx b/app/components/videoComponent/context/PlayerProvider.tsx
@@ -82,7 +82,7 @@ const PlayerProvider: React.FC<React.PropsWithChildren<{}>> = (props) => {
             </TouchableDebounce>
           </View>
         </View>
-        <View style={{height: bottom - 8, backgroundColor: colors.background}} />
+        <View style={{height: bottom, backgroundColor: colors.background}} />
       </TouchableDebounce>
     );
   }, [uuid, colors, dark, handleFullScreen, currentMedia]);

diff --git a/app/components/videoComponent/fetchStreamData.ts b/app/components/videoComponent/fetchStreamData.ts
@@ -45,6 +45,8 @@ export const fetchStreamData = ({
           tracks: playlist_item.tracks?.map((track) => ({
             ...track,
             src: track.src.startsWith('http') ? track.src : BASE_IMG_URL + track.src,
+            //TODO: remove hardcoded language when backend will provide it
+            srclang: 'lt',
           })),
         };
         return streamData;

diff --git a/app/screens/article/ArticleContentComponent.tsx b/app/screens/article/ArticleContentComponent.tsx
@@ -1,12 +1,5 @@
 import React, {useCallback, useMemo, useState} from 'react';
-import {
-  View,
-  Animated,
-  StyleSheet,
-  ListRenderItemInfo,
-  useWindowDimensions,
-  SafeAreaView,
-} from 'react-native';
+import {View, Animated, StyleSheet, ListRenderItemInfo, useWindowDimensions} from 'react-native';
 import Header from './header/Header';
 import {getSmallestDim} from '../../util/UI';
 import {ArticleGallery, VideoComponent, AudioComponent, Text, ArticleContentItem} from '../../components';
@@ -31,6 +24,7 @@ import {ArticleContent} from '../../api/Types';
 import AudioContent from './audioContent/AudioContent';
 import ArticleMainPhoto from './mainPhoto/ArticleMainPhoto';
 import ArticleKeywords from './keywords/ArticleKeywords';
+import {SafeAreaView} from 'react-native-safe-area-context';
 
 export type ArticleSelectableItem = {
   type: 'photo' | 'article';
@@ -145,13 +139,12 @@ const ArticleContentComponent: React.FC<React.PropsWithChildren<Props>> = ({arti
     0,
   );
 
-  //TODO: using default SafeAreaView because react-native-safe-area-context stutters
   return (
     <SafeAreaView style={styles.root}>
       <View style={styles.container}>
         <Animated.FlatList
           onScroll={onScroll}
-          contentContainerStyle={{paddingTop: containerPaddingTop, paddingBottom: 24}}
+          contentContainerStyle={{paddingTop: containerPaddingTop}}
           scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
           data={articleData}
           windowSize={6}

diff --git a/app/util/useAppCheckSetup.ts b/app/util/useAppCheckSetup.ts
@@ -21,6 +21,9 @@ const verify = async () => {
     if (token.length > 0) {
       console.log('AppCheck verification passed');
       analytics().logEvent('app_check_verification_passed');
+    } else {
+      console.warn('AppCheck verification warning');
+      analytics().logEvent('app_check_verification_empty_token');
     }
   } catch (error) {
     console.warn('AppCheck verification failed');
@@ -34,7 +37,10 @@ const useAppCheckSetup = () => {
       .appCheck()
       .initializeAppCheck({provider: appCheckProvider, isTokenAutoRefreshEnabled: true})
       .then(verify)
-      .catch(console.error);
+      .catch((e) => {
+        console.warn('AppCheck initialization failed', e);
+        analytics().logEvent('app_check_initialization_error');
+      });
   }, []);
 };
 

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -2143,7 +2143,7 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.10.8):
     - React-Core
-  - react-native-theoplayer (7.7.1):
+  - react-native-theoplayer (7.8.0):
     - google-cast-sdk-dynamic-xcframework (~> 4.8)
     - React-Core
     - THEOplayer-Connector-SideloadedSubtitle (~> 7.8)
@@ -2774,7 +2774,7 @@ SPEC CHECKSUMS:
   react-native-pager-view: ce73434826e4dca60108c3b3a30d83792ff28b0c
   react-native-render-html: 984dfe2294163d04bf5fe25d7c9f122e60e05ebe
   react-native-safe-area-context: b7daa1a8df36095a032dff095a1ea8963cb48371
-  react-native-theoplayer: 7f7578a010abde01dcc0a11c1e7456e7ff05d919
+  react-native-theoplayer: 984919afa3298209c64d42970795620d0495d58e
   react-native-track-player: 82ef1756ffeea61140fea17519ecd6d64ec3cf3e
   react-native-unistyles: 09e05ab8e91560b9f7c27a051c1b3295717bf705
   react-native-webview: f8f61799dda94b4cc3a864b06c4c229d1a9ced1d

diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "react-native-share": "^10.2.1",
     "react-native-svg": "^15.3.0",
     "react-native-tab-view": "^3.5.2",
-    "react-native-theoplayer": "^7.7.1",
+    "react-native-theoplayer": "^7.8.0",
     "react-native-track-player": "https://github.com/lovegaoshi/react-native-track-player#dev-android-auto",
     "react-native-unistyles": "^2.9.1",
     "react-native-webview": "13.10.5",