Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GIF Viewer #3605

Merged
merged 60 commits into from
Apr 23, 2024
Merged

GIF Viewer #3605

merged 60 commits into from
Apr 23, 2024

Conversation

haileyok
Copy link
Contributor

@haileyok haileyok commented Apr 18, 2024 •
edited
Loading

Why and How

The overall why is pretty obvious. We want to add GIFs. Let's break down the individual whys though.

Permission/making requests

Following the current "permissions" scheme of telling users before outbound connections get made, the GIF composer as well as individual gifs will not be accessible/playable until the user consents. The default, "we have not asked for permission yet" display will be the same as if the GIF were just paused - with the exception that we are guaranteed to not be making a connection to GIPHY yet for a thumbnail but instead using the one hosted on our CDN:

Screenshot 2024-04-21 at 7 44 43 PM

The first time that user attempts to play a GIF, they will be prompted with a notice:

Screenshot 2024-04-21 at 7 45 25 PM

If they choose to accept the request, then they will not be asked again and the placeholder image will be replaced with a <GifView>. If they reject, then GIPHY links will appear as external link cards - as they do right now if a user rejects permission.

The same functionality applies on the PWI.

Web Player

On the web, we can use the <video> element to play videos. We control the playback of the MP4 through a ref on the component and with the same API as the native views. We use preload for these components to ensure smooth playback.

Native Players

The React portions of these views are pure. The only instance where their props should change at all is if the disableAutoplay setting is changed, in which case we will simply call playAsync()/pauseAsync() on the underlying native component. React is informed of playback state updates through the onPlayerStateChange event.

The native views will fill the size of their container, and as a result, dimensions should always be provided on the <GifView>. The best way to maintain appropriate sizing is through using the aspectRatio style on the view, i.e. dimensions.width / dimensions.height. That way, there are no async layout updates that cause jumps in the feed/thread.

The native players use WebP for playback, which is more performant on native platforms when rending large lists of animatable content. (There's a bit of nuance here, and if we had our own UITableView or RecyclerView on the native side, we could do this much more elegantly and with MP4s. However, because of some limitations on knowing when items are going to appear on screen with the RCTScrollView, there's some concerns with MP4s in this case).

Generally, on most connections WebPs should still load in under 1s. The average WebP from GIPHY appears to be 80KB. None the less, we also supply a placeholderSource to the <GifView> that will be displayed until the WebP has rendered. The intent here is that there will be almost no blank areas for loading while scrolling.

Additionally, the native views support GifView.prefetchAsync([source1, source2, ...]). We could use FlatList's viewability callback to prefetch WebPs before they come into the viewport if we want to, but that logic would come in a separate PR. A (probably convoluted) example of this would be something like this: https://github.com/haileyok/social-app/blob/feat/feed-image-prefetch/src/lib/hooks/usePrefetchListImages.ts.

Video?

Originally I had written this to use AVPlayer or ExoPlayer (depending on platform), however for the reasons above (regarding view lifecycle) I've opted to use the WebP instead. I've maintained a video branch though, which we can use for actual video playback at some point. The difference will be that we won't want to autoplay video all the time when we do make that move. Instead, we might have a WebP placeholder that would be "expanded" fullscreen to a full video - similar to how Twitter works. We'll discuss that topic when we get there.

Overall, performance is not affected much here on either platform. I've profiled large lists of GIFs on both platforms with a low-mid end device (iPhone X on iOS and an older Samsung A-series for Android). Scroll performance is no less performant than without the GIFs (although we certainly need to do overall work on Android...)

Other Changes

I've had to make some changes to all of the embed cards to keep styles consistent - mainly top padding - while also allowing the GIF compoenent to expand to it's full size. I've gone through all of the link card cases that I can think of on both native and web and cannot see anything that stands out as a problem or regression, but just keep an eye on that.

Test Plan

Like I said above, keep an eye on embed cards. There should be no differences in render appearance.

  • Gifs in the composer
  • Gifs in the feed
  • Pause/play of a gif in the feed
  • A paused gif should stay paused whenever you scroll past it and then scroll back to it
  • Gifs should stay paused between app backgrounding to foregrounding (this was a problem on Android and needed a bit of extra logic to get right)
  • Large lists of gifs shouldn't cause any performance/frame drops (the profile orpel.bsky.social is a good account to test this with, or maybe we should create our own thread of gifs)
  • Checking the network logs on web in incognito should show:
    • Initial request for the profile orpel.bsky.social should show requests for the gif embeds going to our CDN for the placeholder
    • No connections to Giphy should occur until clicking play on one of the gifs and accepting the prompt
    • Declining the prompt should revert these embeds to using the normal link cards
  • There shouldn't be any layout jumps with any of the new gif embeds (again, easy to check in a bigger thread or profile that has a lot of gifs)
  • Test on mobile browsers as well. Aside from our composer not being great there in general, both the GIF selector and playback of gifs in the feeds works well.

@render Render
Copy link

render bot commented Apr 18, 2024

Your Render PR Server URL is https://social-app-pr-3605.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cogaqg5jm4es73ckdv1g.

@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 18, 2024 •
edited
Loading

The Pull Request introduced fingerprint changes against the base commit: fe9b3f0

Fingerprint diff 
[{"type":"dir","filePath":"modules/expo-bluesky-gif-view/android","reasons":["expoAutolinkingAndroid"],"hash":"4d804a7f90307d7376e91e8ce6b8cf0b33ce3132"},{"type":"dir","filePath":"modules/expo-bluesky-gif-view/ios","reasons":["expoAutolinkingIos"],"hash":"a7c921dbcfbd7c12fece460828f73ee9f8d6786e"},{"type":"contents","id":"expoAutolinkingConfig:android","contents":"{\"extraDependencies\":{\"androidMavenRepos\":[],\"iosPods\":{}},\"modules\":[{\"packageName\":\"expo\",\"packageVersion\":\"50.0.14\",\"projects\":[{\"name\":\"expo\",\"sourceDir\":\"node_modules/expo/android\"}],\"modules\":[]},{\"packageName\":\"expo-application\",\"packageVersion\":\"5.8.3\",\"projects\":[{\"name\":\"expo-application\",\"sourceDir\":\"node_modules/expo-application/android\"}],\"modules\":[\"expo.modules.application.ApplicationModule\"]},{\"packageName\":\"expo-bluesky-gif-view\",\"packageVersion\":\"UNVERSIONED\",\"projects\":[{\"name\":\"expo-bluesky-gif-view\",\"sourceDir\":\"modules/expo-bluesky-gif-view/android\"}],\"modules\":[\"expo.modules.blueskygifview.ExpoBlueskyGifViewModule\"]},{\"packageName\":\"expo-camera\",\"packageVersion\":\"14.0.6\",\"projects\":[{\"name\":\"expo-camera\",\"sourceDir\":\"node_modules/expo-camera/android\"}],\"modules\":[\"expo.modules.camera.CameraViewModule\",\"expo.modules.camera.next.CameraViewNextModule\"]},{\"packageName\":\"expo-clipboard\",\"packageVersion\":\"5.0.1\",\"projects\":[{\"name\":\"expo-clipboard\",\"sourceDir\":\"node_modules/expo-clipboard/android\"}],\"modules\":[\"expo.modules.clipboard.ClipboardModule\"]},{\"packageName\":\"expo-constants\",\"packageVersion\":\"15.4.5\",\"projects\":[{\"name\":\"expo-constants\",\"sourceDir\":\"node_modules/expo-constants/android\"}],\"modules\":[\"expo.modules.constants.ConstantsModule\"]},{\"packageName\":\"expo-dev-client\",\"packageVersion\":\"3.3.11\",\"projects\":[{\"name\":\"expo-dev-client\",\"sourceDir\":\"node_modules/expo-dev-client/android\"}],\"modules\":[]},{\"packageName\":\"expo-dev-launcher\",\"packageVersion\":\"3.6.9\",\"projects\":[{\"name\":\"expo-dev-launcher\",\"sourceDir\":\"node_modules/expo-dev-launcher/android\"}],\"plugins\":[{\"id\":\"expo-dev-launcher-gradle-plugin\",\"group\":\"expo.modules\",\"sourceDir\":\"/home/runner/work/social-app/social-app/node_modules/expo-dev-launcher/expo-dev-launcher-gradle-plugin\"}],\"modules\":[]},{\"packageName\":\"expo-dev-menu\",\"packageVersion\":\"4.5.8\",\"projects\":[{\"name\":\"expo-dev-menu\",\"sourceDir\":\"node_modules/expo-dev-menu/android\"}],\"modules\":[\"expo.modules.devmenu.modules.DevMenuModule\",\"expo.modules.devmenu.modules.DevMenuPreferences\"]},{\"packageName\":\"expo-dev-menu-interface\",\"packageVersion\":\"1.7.2\",\"projects\":[{\"name\":\"expo-dev-menu-interface\",\"sourceDir\":\"node_modules/expo-dev-menu-interface/android\"}],\"modules\":[]},{\"packageName\":\"expo-device\",\"packageVersion\":\"5.9.3\",\"projects\":[{\"name\":\"expo-device\",\"sourceDir\":\"node_modules/expo-device/android\"}],\"modules\":[\"expo.modules.device.DeviceModule\"]},{\"packageName\":\"expo-eas-client\",\"packageVersion\":\"0.11.0\",\"projects\":[{\"name\":\"expo-eas-client\",\"sourceDir\":\"node_modules/expo-eas-client/android\"}],\"modules\":[\"expo.modules.easclient.EASClientModule\"]},{\"packageName\":\"expo-file-system\",\"packageVersion\":\"16.0.9\",\"projects\":[{\"name\":\"expo-file-system\",\"sourceDir\":\"node_modules/expo-file-system/android\"}],\"modules\":[\"expo.modules.filesystem.FileSystemModule\"]},{\"packageName\":\"expo-font\",\"packageVersion\":\"11.10.3\",\"projects\":[{\"name\":\"expo-font\",\"sourceDir\":\"node_modules/expo-font/android\"}],\"modules\":[\"expo.modules.font.FontLoaderModule\"]},{\"packageName\":\"expo-haptics\",\"packageVersion\":\"12.8.1\",\"projects\":[{\"name\":\"expo-haptics\",\"sourceDir\":\"node_modules/expo-haptics/android\"}],\"modules\":[\"expo.modules.haptics.HapticsModule\"]},{\"packageName\":\"expo-image\",\"packageVersion\":\"1.10.6\",\"projects\":[{\"name\":\"expo-image\",\"sourceDir\":\"node_modules/expo-image/android\"}],\"modules\":[\"expo.modules.image.ExpoImageModule\"]},{\"packageName\":\"expo-image-loader\",\"packageVersion\":\"4.6.0\",\"projects\":[{\"name\":\"expo-image-loader\",\"sourceDir\":\"node_modules/expo-image-loader/android\"}],\"modules\":[]},{\"packageName\":\"expo-image-manipulator\",\"packageVersion\":\"11.8.0\",\"projects\":[{\"name\":\"expo-image-manipulator\",\"sourceDir\":\"node_modules/expo-image-manipulator/android\"}],\"modules\":[\"expo.modules.imagemanipulator.ImageManipulatorModule\"]},{\"packageName\":\"expo-image-picker\",\"packageVersion\":\"14.7.1\",\"projects\":[{\"name\":\"expo-image-picker\",\"sourceDir\":\"node_modules/expo-image-picker/android\"}],\"modules\":[\"expo.modules.imagepicker.ImagePickerModule\"]},{\"packageName\":\"expo-json-utils\",\"packageVersion\":\"0.12.0\",\"projects\":[{\"name\":\"expo-json-utils\",\"sourceDir\":\"node_modules/expo-json-utils/android\"}],\"modules\":[]},{\"packageName\":\"expo-keep-awake\",\"packageVersion\":\"12.8.2\",\"projects\":[{\"name\":\"expo-keep-awake\",\"sourceDir\":\"node_modules/expo-keep-awake/android\"}],\"modules\":[\"expo.modules.keepawake.KeepAwakeModule\"]},{\"packageName\":\"expo-linear-gradient\",\"packageVersion\":\"12.7.2\",\"projects\":[{\"name\":\"expo-linear-gradient\",\"sourceDir\":\"node_modules/expo-linear-gradient/android\"}],\"modules\":[\"expo.modules.lineargradient.LinearGradientModule\"]},{\"packageName\":\"expo-localization\",\"packageVersion\":\"14.8.3\",\"projects\":[{\"name\":\"expo-localization\",\"sourceDir\":\"node_modules/expo-localization/android\"}],\"modules\":[\"expo.modules.localization.LocalizationModule\"]},{\"packageName\":\"expo-manifests\",\"packageVersion\":\"0.13.0\",\"projects\":[{\"name\":\"expo-manifests\",\"sourceDir\":\"node_modules/expo-manifests/android\"}],\"modules\":[]},{\"packageName\":\"expo-media-library\",\"packageVersion\":\"15.9.1\",\"projects\":[{\"name\":\"expo-media-library\",\"sourceDir\":\"node_modules/expo-media-library/android\"}],\"modules\":[\"expo.modules.medialibrary.MediaLibraryModule\"]},{\"packageName\":\"expo-modules-core\",\"packageVersion\":\"1.11.12\",\"projects\":[{\"name\":\"expo-modules-core\",\"sourceDir\":\"node_modules/expo-modules-core/android\"},{\"name\":\"expo-modules-core$android-annotation\",\"sourceDir\":\"node_modules/expo-modules-core/android-annotation\"},{\"name\":\"expo-modules-core$android-annotation-processor\",\"sourceDir\":\"node_modules/expo-modules-core/android-annotation-processor\"}],\"modules\":[]},{\"packageName\":\"expo-navigation-bar\",\"packageVersion\":\"2.8.1\",\"projects\":[{\"name\":\"expo-navigation-bar\",\"sourceDir\":\"node_modules/expo-navigation-bar/android\"}],\"modules\":[\"expo.modules.navigationbar.NavigationBarModule\"]},{\"packageName\":\"expo-notifications\",\"packageVersion\":\"0.27.6\",\"projects\":[{\"name\":\"expo-notifications\",\"sourceDir\":\"node_modules/expo-notifications/android\"}],\"modules\":[\"expo.modules.notifications.badge.BadgeModule\",\"expo.modules.notifications.notifications.background.ExpoBackgroundNotificationTasksModule\",\"expo.modules.notifications.notifications.categories.ExpoNotificationCategoriesModule\",\"expo.modules.notifications.notifications.channels.NotificationChannelGroupManagerModule\",\"expo.modules.notifications.notifications.channels.NotificationChannelManagerModule\",\"expo.modules.notifications.notifications.emitting.NotificationsEmitter\",\"expo.modules.notifications.notifications.handling.NotificationsHandler\",\"expo.modules.notifications.permissions.NotificationPermissionsModule\",\"expo.modules.notifications.notifications.presentation.ExpoNotificationPresentationModule\",\"expo.modules.notifications.notifications.scheduling.NotificationScheduler\",\"expo.modules.notifications.serverregistration.ServerRegistrationModule\",\"expo.modules.notifications.tokens.PushTokenModule\"]},{\"packageName\":\"expo-receive-android-intents\",\"packageVersion\":\"UNVERSIONED\",\"projects\":[{\"name\":\"expo-receive-android-intents\",\"sourceDir\":\"modules/expo-receive-android-intents/android\"}],\"modules\":[\"xyz.blueskyweb.app.exporeceiveandroidintents.ExpoReceiveAndroidIntentsModule\"]},{\"packageName\":\"expo-sharing\",\"packageVersion\":\"11.10.0\",\"projects\":[{\"name\":\"expo-sharing\",\"sourceDir\":\"node_modules/expo-sharing/android\"}],\"modules\":[\"expo.modules.sharing.SharingModule\"]},{\"packageName\":\"expo-splash-screen\",\"packageVersion\":\"0.26.4\",\"projects\":[{\"name\":\"expo-splash-screen\",\"sourceDir\":\"node_modules/expo-splash-screen/android\"}],\"modules\":[\"expo.modules.splashscreen.SplashScreenModule\"]},{\"packageName\":\"expo-structured-headers\",\"packageVersion\":\"3.7.0\",\"projects\":[{\"name\":\"expo-structured-headers\",\"sourceDir\":\"node_modules/expo-structured-headers/android\"}],\"modules\":[]},{\"packageName\":\"expo-system-ui\",\"packageVersion\":\"2.9.3\",\"projects\":[{\"name\":\"expo-system-ui\",\"sourceDir\":\"node_modules/expo-system-ui/android\"}],\"modules\":[\"expo.modules.systemui.SystemUIModule\"]},{\"packageName\":\"expo-task-manager\",\"packageVersion\":\"11.7.2\",\"projects\":[{\"name\":\"expo-task-manager\",\"sourceDir\":\"node_modules/expo-task-manager/android\"}],\"modules\":[\"expo.modules.taskManager.TaskManagerModule\"]},{\"packageName\":\"expo-updates\",\"packageVersion\":\"0.24.12\",\"projects\":[{\"name\":\"expo-updates\",\"sourceDir\":\"node_modules/expo-updates/android\"}],\"plugins\":[{\"id\":\"expo-updates-gradle-plugin\",\"group\":\"expo.modules\",\"sourceDir\":\"/home/runner/work/social-app/social-app/node_modules/expo-updates/expo-updates-gradle-plugin\"}],\"modules\":[\"expo.modules.updates.UpdatesModule\"]},{\"packageName\":\"expo-updates-interface\",\"packageVersion\":\"0.15.1\",\"projects\":[{\"name\":\"expo-updates-interface\",\"sourceDir\":\"node_modules/expo-updates-interface/android\"}],\"modules\":[]},{\"packageName\":\"expo-web-browser\",\"packageVersion\":\"12.8.2\",\"projects\":[{\"name\":\"expo-web-browser\",\"sourceDir\":\"node_modules/expo-web-browser/android\"}],\"modules\":[\"expo.modules.webbrowser.WebBrowserModule\"]},{\"packageName\":\"unimodules-app-loader\",\"packageVersion\":\"4.5.0\",\"projects\":[{\"name\":\"unimodules-app-loader\",\"sourceDir\":\"node_modules/unimodules-app-loader/android\"}],\"modules\":[]}]}","reasons":["expoAutolinkingAndroid"],"hash":"7239a33e96292e11ebc50e28001918eea3b24b00"},{"type":"contents","id":"expoAutolinkingConfig:ios","contents":"{\"extraDependencies\":{\"androidMavenRepos\":[],\"iosPods\":{}},\"modules\":[{\"packageName\":\"expo-bluesky-gif-view\",\"packageVersion\":\"UNVERSIONED\",\"pods\":[{\"podName\":\"ExpoBlueskyGifView\",\"podspecDir\":\"modules/expo-bluesky-gif-view/ios\"}],\"swiftModuleNames\":[\"ExpoBlueskyGifView\"],\"modules\":[\"ExpoBlueskyGifViewModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-camera\",\"packageVersion\":\"14.0.6\",\"pods\":[{\"podName\":\"ExpoCamera\",\"podspecDir\":\"node_modules/expo-camera/ios\"}],\"swiftModuleNames\":[\"ExpoCamera\"],\"modules\":[\"CameraViewModule\",\"CameraViewNextModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-clipboard\",\"packageVersion\":\"5.0.1\",\"pods\":[{\"podName\":\"ExpoClipboard\",\"podspecDir\":\"node_modules/expo-clipboard/ios\"}],\"swiftModuleNames\":[\"ExpoClipboard\"],\"modules\":[\"ClipboardModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-dev-client\",\"packageVersion\":\"3.3.11\",\"pods\":[{\"podName\":\"expo-dev-client\",\"podspecDir\":\"node_modules/expo-dev-client/ios\"}],\"swiftModuleNames\":[\"expo_dev_client\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-dev-launcher\",\"packageVersion\":\"3.6.9\",\"pods\":[{\"podName\":\"expo-dev-launcher\",\"podspecDir\":\"node_modules/expo-dev-launcher\"}],\"swiftModuleNames\":[\"EXDevLauncher\"],\"modules\":[\"DevLauncherInternal\",\"DevLauncherAuth\",\"RNCSafeAreaProviderManager\"],\"appDelegateSubscribers\":[\"ExpoDevLauncherAppDelegateSubscriber\"],\"reactDelegateHandlers\":[\"ExpoDevLauncherReactDelegateHandler\"],\"debugOnly\":true},{\"packageName\":\"expo-dev-menu\",\"packageVersion\":\"4.5.8\",\"pods\":[{\"podName\":\"expo-dev-menu\",\"podspecDir\":\"node_modules/expo-dev-menu\"}],\"swiftModuleNames\":[\"EXDevMenu\"],\"modules\":[\"DevMenuModule\",\"DevMenuInternalModule\",\"DevMenuPreferences\",\"RNCSafeAreaProviderManager\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[\"ExpoDevMenuReactDelegateHandler\"],\"debugOnly\":true},{\"packageName\":\"expo-dev-menu-interface\",\"packageVersion\":\"1.7.2\",\"pods\":[{\"podName\":\"expo-dev-menu-interface\",\"podspecDir\":\"node_modules/expo-dev-menu-interface/ios\"}],\"swiftModuleNames\":[\"expo_dev_menu_interface\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-eas-client\",\"packageVersion\":\"0.11.0\",\"pods\":[{\"podName\":\"EASClient\",\"podspecDir\":\"node_modules/expo-eas-client/ios\"}],\"swiftModuleNames\":[\"EASClient\"],\"modules\":[\"EASClientModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-haptics\",\"packageVersion\":\"12.8.1\",\"pods\":[{\"podName\":\"ExpoHaptics\",\"podspecDir\":\"node_modules/expo-haptics/ios\"}],\"swiftModuleNames\":[\"ExpoHaptics\"],\"modules\":[\"HapticsModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-image-loader\",\"packageVersion\":\"4.6.0\",\"pods\":[{\"podName\":\"EXImageLoader\",\"podspecDir\":\"node_modules/expo-image-loader/ios\"}],\"swiftModuleNames\":[\"EXImageLoader\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-image-manipulator\",\"packageVersion\":\"11.8.0\",\"pods\":[{\"podName\":\"ExpoImageManipulator\",\"podspecDir\":\"node_modules/expo-image-manipulator/ios\"}],\"swiftModuleNames\":[\"ExpoImageManipulator\"],\"modules\":[\"ImageManipulatorModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-image-picker\",\"packageVersion\":\"14.7.1\",\"pods\":[{\"podName\":\"ExpoImagePicker\",\"podspecDir\":\"node_modules/expo-image-picker/ios\"}],\"swiftModuleNames\":[\"ExpoImagePicker\"],\"modules\":[\"ImagePickerModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-json-utils\",\"packageVersion\":\"0.12.0\",\"pods\":[{\"podName\":\"EXJSONUtils\",\"podspecDir\":\"node_modules/expo-json-utils/ios\"}],\"swiftModuleNames\":[\"EXJSONUtils\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-linear-gradient\",\"packageVersion\":\"12.7.2\",\"pods\":[{\"podName\":\"ExpoLinearGradient\",\"podspecDir\":\"node_modules/expo-linear-gradient/ios\"}],\"swiftModuleNames\":[\"ExpoLinearGradient\"],\"modules\":[\"LinearGradientModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-manifests\",\"packageVersion\":\"0.13.0\",\"pods\":[{\"podName\":\"EXManifests\",\"podspecDir\":\"node_modules/expo-manifests/ios\"}],\"swiftModuleNames\":[\"EXManifests\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-media-library\",\"packageVersion\":\"15.9.1\",\"pods\":[{\"podName\":\"EXMediaLibrary\",\"podspecDir\":\"node_modules/expo-media-library/ios\"}],\"swiftModuleNames\":[\"EXMediaLibrary\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-notifications\",\"packageVersion\":\"0.27.6\",\"pods\":[{\"podName\":\"EXNotifications\",\"podspecDir\":\"node_modules/expo-notifications/ios\"}],\"swiftModuleNames\":[\"EXNotifications\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-scroll-forwarder\",\"packageVersion\":\"UNVERSIONED\",\"pods\":[{\"podName\":\"ExpoScrollForwarder\",\"podspecDir\":\"modules/expo-scroll-forwarder/ios\"}],\"swiftModuleNames\":[\"ExpoScrollForwarder\"],\"modules\":[\"ExpoScrollForwarderModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-sharing\",\"packageVersion\":\"11.10.0\",\"pods\":[{\"podName\":\"ExpoSharing\",\"podspecDir\":\"node_modules/expo-sharing/ios\"}],\"swiftModuleNames\":[\"ExpoSharing\"],\"modules\":[\"SharingModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-structured-headers\",\"packageVersion\":\"3.7.0\",\"pods\":[{\"podName\":\"EXStructuredHeaders\",\"podspecDir\":\"node_modules/expo-structured-headers/ios\"}],\"swiftModuleNames\":[\"EXStructuredHeaders\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-system-ui\",\"packageVersion\":\"2.9.3\",\"pods\":[{\"podName\":\"ExpoSystemUI\",\"podspecDir\":\"node_modules/expo-system-ui/ios\"}],\"swiftModuleNames\":[\"ExpoSystemUI\"],\"modules\":[\"ExpoSystemUIModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-task-manager\",\"packageVersion\":\"11.7.2\",\"pods\":[{\"podName\":\"EXTaskManager\",\"podspecDir\":\"node_modules/expo-task-manager/ios\"}],\"swiftModuleNames\":[\"EXTaskManager\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-updates-interface\",\"packageVersion\":\"0.15.1\",\"pods\":[{\"podName\":\"EXUpdatesInterface\",\"podspecDir\":\"node_modules/expo-updates-interface/ios\"}],\"swiftModuleNames\":[\"EXUpdatesInterface\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"expo-web-browser\",\"packageVersion\":\"12.8.2\",\"pods\":[{\"podName\":\"ExpoWebBrowser\",\"podspecDir\":\"node_modules/expo-web-browser/ios\"}],\"swiftModuleNames\":[\"ExpoWebBrowser\"],\"modules\":[\"WebBrowserModule\"],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false},{\"packageName\":\"unimodules-app-loader\",\"packageVersion\":\"4.5.0\",\"pods\":[{\"podName\":\"UMAppLoader\",\"podspecDir\":\"node_modules/unimodules-app-loader/ios\"}],\"swiftModuleNames\":[\"UMAppLoader\"],\"modules\":[],\"appDelegateSubscribers\":[],\"reactDelegateHandlers\":[],\"debugOnly\":false}]}","reasons":["expoAutolinkingIos"],"hash":"21529463b3b4e950c34469167dc5be55d325cd9d"}]

Generated by PR labeler 🤖

@github-actions GitHub Actions
Copy link

github-actions bot commented Apr 18, 2024 •
edited
Loading

Old size New size Diff
6.44 MB 6.44 MB 304 B (0.00%)

@haileyok
ios player
4cb5f8a 
autoplay after recycle

remove all items from AVPlayer queue

recurururururursion

use managers in the view

add prefetch

make sure player items stay in order

add controller and item managers

start of the view

create module, ios
@haileyok
android player
faae209 
smoother

basic caching

prep cache

somewhat works

backup

other files

android impl

blegh

lets go

touchup

add prefetch to js

use caching
@haileyok haileyok changed the base branch from main to hailey/gif-appearance April 19, 2024 05:11
@gaearon
Copy link
Collaborator

gaearon commented Apr 22, 2024

Weird loading state on FF.

ff_loading.mov

@gaearon
Copy link
Collaborator

gaearon commented Apr 22, 2024 •
edited
Loading

If you don't give the permission, they currently revert to being embeds. That seems pretty confusing since you wouldn't know how to get back to the dialog if you dismissed it by accident. In fact I ended up in this situation a few times already.

Should we instead revert it to unplayed state (same as before giving permission)?

In other words, don't differentiate "permission not given" and "permission denied" in the UI.

Screenshot 2024-04-22 at 23 21 03

@haileyok
Copy link
Contributor Author

Firefox

Why Firefox why?

Prompt

We shouldn't need to worry about this anyway since we're going to rm it sounds like w/ the proxy. If the plan changes will address.

@surfdude29
Copy link
Contributor

I just tested it out on the web and GIFs on Bluesky work so well, awesome work @haileyok! 🙌 (and @mozzius too ofc on the GIF picker :)

haileyok and others added 4 commits April 22, 2024 16:40
@haileyok
Merge branch 'main' into hailey/gif-view
4f40ff3 
# Conflicts:
#	src/components/dialogs/GifSelect.tsx
@haileyok
Move to Tenor for GIFs (#3654)
8878821 
* update some urls

* right order for dimensions

* add GIF coder for ios

* remove giphy check

* rewrite tenor urls

* remove all the unnecessary stuff for consent

* rm print

* rm log

* check if id and filename are strings
@gaearon
Merge branch 'main' into hailey/gif-view
f7a97f7
@mozzius
full size playback controls
7ec7852
@mozzius
Copy link
Member

mozzius commented Apr 23, 2024

Fixed the FF loading issues

@gaearon gaearon merged commit cbb817b into main Apr 23, 2024
6 checks passed
@gaearon gaearon deleted the hailey/gif-view branch April 23, 2024 01:54
estrattonbailey added a commit that referenced this pull request Apr 23, 2024
@estrattonbailey
Merge remote-tracking branch 'origin/main' into halo/base
a386e4d 
* origin/main: (47 commits)
  Add option to remove quoted post in composer (#3670)
  Add border radius to GIF loading state (#3669)
  use mp4 over webm (#3666)
  Release 1.79 (#3661)
  Update Japanese translation (#3656)
  [Statsig] Add test gates and events (#3659)
  Quick fix to ensure disable 2fa dialog adjusts to keyboard (#3658)
  Email auth factor (#3602)
  GIF Viewer (#3605)
  Ungate profile scroll fix (#3655)
  rm country param (#3653)
  [GIFs] Remove consent flow (#3652)
  [GIFs] Replace GIPHY with Tenor (#3651)
  properly close the switch account dialog (#3558)
  [GIFs] Reset scroll on query change (#3642)
  Update French translations (#3644)
  [GIFs] Add error boundary to GIF picker (#3643)
  Revert "Add layout transitions to the composer photo gallery on iOS (#3609)" (#3649)
  Update Finnish translations  (#3630)
  Update Japanese translations (#3632)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gaearon gaearon gaearon approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@haileyok @gaearon @surfdude29 @mozzius