Use the same subdomain for connect media

Preventing count as cache miss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tooot",
-  "version": "4.8.6",
+  "version": "4.8.7",
   "description": "tooot for Mastodon",
   "author": "xmflsct <me@xmflsct.com>",
   "license": "GPL-3.0-or-later",

src/components/Emojis/List.tsx

@@ -2,7 +2,7 @@ import { emojis } from '@components/Emojis'
 import Icon from '@components/Icon'
 import CustomText from '@components/Text'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
-import { connectImage } from '@utils/api/helpers/connect'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { StorageAccount } from '@utils/storage/account'
 import { getAccountStorage, setAccountStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
@@ -134,7 +134,7 @@ const EmojisList = () => {
                   emoji: emoji.shortcode
                 })}
                 accessibilityHint={t('screenCompose:content.root.footer.emojis.accessibilityHint')}
-                source={connectImage({ uri })}
+                source={connectMedia({ uri })}
                 style={{ width: 32, height: 32 }}
               />
             </Pressable>

src/components/GracefullyImage.tsx

@@ -1,5 +1,5 @@
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
-import { connectImage } from '@utils/api/helpers/connect'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { useTheme } from '@utils/styles/ThemeManager'
 import React, { useEffect, useState } from 'react'
 import {
@@ -93,12 +93,12 @@ const GracefullyImage = ({
     >
       {uri.preview && !imageLoaded ? (
         <FastImage
-          source={connectImage({ uri: uri.preview })}
+          source={connectMedia({ uri: uri.preview })}
           style={[styles.placeholder, { backgroundColor: colors.shimmerDefault }]}
         />
       ) : null}
       <FastImage
-        source={connectImage(source)}
+        source={connectMedia(source)}
         style={[{ flex: 1 }, imageStyle]}
         onLoad={() => {
           setImageLoaded(true)

src/components/Parse/Emojis.tsx

@@ -1,6 +1,6 @@
 import CustomText from '@components/Text'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
-import { connectImage } from '@utils/api/helpers/connect'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { useGlobalStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { adaptiveScale } from '@utils/styles/scaling'
@@ -78,7 +78,7 @@ const ParseEmojis: React.FC<Props> = ({
                   <CustomText key={emojiShortcode + i}>
                     {i === 0 ? ' ' : undefined}
                     <FastImage
-                      source={connectImage({ uri: uri.trim() })}
+                      source={connectMedia({ uri: uri.trim() })}
                       style={{
                         width: adaptedFontsize,
                         height: adaptedFontsize,

src/components/Timeline/Shared/Attachment/Audio.tsx

@@ -1,6 +1,7 @@
 import Button from '@components/Button'
 import GracefullyImage from '@components/GracefullyImage'
 import { Slider } from '@sharcoux/slider'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
 import { Audio } from 'expo-av'
@@ -26,7 +27,7 @@ const AttachmentAudio: React.FC<Props> = ({ total, index, sensitiveShown, audio
   const playAudio = useCallback(async () => {
     if (!audioPlayer) {
       const { sound } = await Audio.Sound.createAsync(
-        { uri: audio.url },
+        connectMedia({ uri: audio.url }) as { uri: string },
         {},
         // @ts-ignore
         props => setAudioPosition(props.positionMillis)

src/components/Timeline/Shared/Attachment/Video.tsx

@@ -1,5 +1,6 @@
 import Button from '@components/Button'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { useAccountStorage, useGlobalStorage } from '@utils/storage/actions'
 import { StyleConstants } from '@utils/styles/constants'
 import { ResizeMode, Video, VideoFullscreenUpdate } from 'expo-av'
@@ -41,7 +42,7 @@ const AttachmentVideo: React.FC<Props> = ({
   const playOnPress = async () => {
     setVideoLoading(true)
     if (!videoLoaded) {
-      await videoPlayer.current?.loadAsync({ uri: video.url })
+      await videoPlayer.current?.loadAsync(connectMedia({ uri: video.url }) as { uri: string })
     }
     setVideoLoading(false)
 
@@ -71,10 +72,10 @@ const AttachmentVideo: React.FC<Props> = ({
               shouldPlay: reduceMotionEnabled || !shouldAutoplayGifv ? false : true,
               isMuted: true,
               isLooping: true,
-              source: { uri: video.url }
+              source: connectMedia({ uri: video.url }) as { uri: string }
             }
           : {
-              posterSource: { uri: video.preview_url },
+              posterSource: connectMedia({ uri: video.preview_url }),
               posterStyle: { resizeMode: ResizeMode.COVER }
             })}
         useNativeControls={false}

src/screens/Announcements.tsx

@@ -6,7 +6,7 @@ import RelativeTime from '@components/RelativeTime'
 import CustomText from '@components/Text'
 import { BlurView } from '@react-native-community/blur'
 import { useAccessibility } from '@utils/accessibility/AccessibilityManager'
-import { connectImage } from '@utils/api/helpers/connect'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { RootStackScreenProps } from '@utils/navigation/navigators'
 import { useAnnouncementMutation, useAnnouncementQuery } from '@utils/queryHooks/announcement'
 import { StyleConstants } from '@utils/styles/constants'
@@ -140,7 +140,7 @@ const ScreenAnnouncements: React.FC<RootStackScreenProps<'Screen-Announcements'>
               >
                 {reaction.url ? (
                   <FastImage
-                    source={connectImage({
+                    source={connectMedia({
                       uri: reduceMotionEnabled ? reaction.static_url : reaction.url
                     })}
                     style={{

src/screens/Compose/DraftsList.tsx

@@ -3,7 +3,7 @@ import Icon from '@components/Icon'
 import { SwipeToActions } from '@components/SwipeToActions'
 import CustomText from '@components/Text'
 import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
-import { connectImage } from '@utils/api/helpers/connect'
+import { connectMedia } from '@utils/api/helpers/connect'
 import apiInstance from '@utils/api/instance'
 import { ScreenComposeStackScreenProps } from '@utils/navigation/navigators'
 import { getAccountStorage, setAccountStorage, useAccountStorage } from '@utils/storage/actions'
@@ -158,7 +158,7 @@ const ComposeDraftsList: React.FC<ScreenComposeStackScreenProps<'Screen-Compose-
                         source={
                           attachment.local?.thumbnail
                             ? { uri: attachment.local?.thumbnail }
-                            : connectImage({ uri: attachment.remote?.preview_url })
+                            : connectMedia({ uri: attachment.remote?.preview_url })
                         }
                       />
                     ))}

src/screens/Compose/Root/Footer/Attachments.tsx

@@ -6,7 +6,7 @@ import { MAX_MEDIA_ATTACHMENTS } from '@components/mediaSelector'
 import CustomText from '@components/Text'
 import { useActionSheet } from '@expo/react-native-action-sheet'
 import { useNavigation } from '@react-navigation/native'
-import { connectImage } from '@utils/api/helpers/connect'
+import { connectMedia } from '@utils/api/helpers/connect'
 import { featureCheck } from '@utils/helpers/featureCheck'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
@@ -109,7 +109,7 @@ const ComposeAttachments: React.FC<Props> = ({ accessibleRefAttachments }) => {
           source={
             item.local?.thumbnail
               ? { uri: item.local?.thumbnail }
-              : connectImage({ uri: item.remote?.preview_url })
+              : connectMedia({ uri: item.remote?.preview_url })
           }
         />
         {item.remote?.meta?.original?.duration ? (

src/utils/api/helpers/connect.ts

@@ -74,14 +74,14 @@ const list = [
   'vq2rz02ayf'
 ]
 
-export const CONNECT_DOMAIN = () =>
+export const CONNECT_DOMAIN = (index?: number) =>
   mapEnvironment({
-    release: `${list[Math.floor(Math.random() * 66)]}.tooot.app`,
+    release: `${list[index || Math.floor(Math.random() * list.length)]}.tooot.app`,
     candidate: 'connect-candidate.tooot.app',
     development: 'connect-development.tooot.app'
   })
 
-export const connectImage = ({
+export const connectMedia = ({
   uri
 }: {
   uri?: string
@@ -89,7 +89,19 @@ export const connectImage = ({
   if (GLOBAL.connect) {
     if (uri) {
       const host = parse(uri).host
-      return { uri: uri.replace(host, CONNECT_DOMAIN()), headers: { 'x-tooot-domain': host } }
+      return {
+        uri: uri.replace(
+          host,
+          CONNECT_DOMAIN(
+            uri
+              .split('')
+              .map(i => i.charCodeAt(0))
+              .reduce((a, b) => a + b, 0) %
+              (list.length + 1)
+          )
+        ),
+        headers: { 'x-tooot-domain': host }
+      }
     } else {
       return { uri }
     }