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.

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

GIF Viewer #3605

Merged
merged 60 commits into from
Apr 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
60 commits
Select commit Hold shift + click to select a range
4cb5f8a
ios player
haileyok Apr 18, 2024
faae209
android player
haileyok Apr 18, 2024
b3c8751
bogus testing commit
haileyok Apr 19, 2024
8634326
add dims to type
haileyok Apr 19, 2024
b49c967
save
haileyok Apr 19, 2024
70b07da
add the dimensions to the embed info
haileyok Apr 19, 2024
52fba9f
Merge branch 'main' into hailey/gif-appearance
haileyok Apr 19, 2024
36b610d
add a new case
haileyok Apr 19, 2024
d5bb33d
Merge branch 'main' into hailey/gif-appearance
haileyok Apr 19, 2024
1f32da0
add a new case
haileyok Apr 19, 2024
f4b3edd
limit this case to giphy
haileyok Apr 19, 2024
54c0374
use gate
haileyok Apr 19, 2024
7a2fa6b
Merge branch 'hailey/gif-appearance' into hailey/gif-view
haileyok Apr 19, 2024
65141f9
Revert "bogus testing commit"
haileyok Apr 19, 2024
5d2f8cf
add web player base
haileyok Apr 19, 2024
8897752
flip mp4/webp
haileyok Apr 19, 2024
cd617a7
Merge branch 'hailey/gif-appearance' into hailey/gif-view
haileyok Apr 19, 2024
42cdbdb
basic mp4 player for web
haileyok Apr 19, 2024
6454098
move some stuff into `ExternalLinkEmbed` instead
haileyok Apr 19, 2024
272b789
use a class component for web
haileyok Apr 19, 2024
33e4480
remove extra component
haileyok Apr 19, 2024
ad38428
add `onPlayerStateChange` event type on web
haileyok Apr 19, 2024
7fc2909
layer properly
haileyok Apr 19, 2024
8d05d6d
fix tests
haileyok Apr 19, 2024
73d0bb8
add new test
haileyok Apr 19, 2024
185f789
Merge branch 'hailey/gif-appearance' into hailey/gif-view
haileyok Apr 19, 2024
7aae174
about ready. native portions done, a few touch ups on web needed
haileyok Apr 19, 2024
3baf5bf
Merge branch 'main' into hailey/gif-view
haileyok Apr 19, 2024
1f8ffe3
ready to test ios
haileyok Apr 19, 2024
1d2c3dd
autoplay on web
haileyok Apr 19, 2024
8b7b99c
Merge branch 'main' into hailey/gif-view
haileyok Apr 19, 2024
7aba8f6
normalize across all platforms
haileyok Apr 21, 2024
32f257f
rm gate from types
haileyok Apr 21, 2024
ef652b1
remove unused event param
haileyok Apr 21, 2024
18ba143
only start placeholder op if doesn't exist in disk cache
haileyok Apr 22, 2024
15cdc8f
fix gifs animating on app resume android
haileyok Apr 22, 2024
1525983
remove comment
haileyok Apr 22, 2024
4b1d0bd
add `isLoaded` for ios
haileyok Apr 22, 2024
812aafe
add `isLoaded` to Android
haileyok Apr 22, 2024
e92b805
onload for web
haileyok Apr 22, 2024
52bd14e
add visual loading state
haileyok Apr 22, 2024
cca236c
rm a log
haileyok Apr 22, 2024
d0a139b
implement isloaded for android
haileyok Apr 22, 2024
02a76cf
dialogs
haileyok Apr 22, 2024
3a43e32
replace `webpSource` with `source`
haileyok Apr 22, 2024
fac1b7d
update prop name
haileyok Apr 22, 2024
5338f1d
Merge branch 'main' into hailey/gif-view
gaearon Apr 22, 2024
4f40ff3
Merge branch 'main' into hailey/gif-view
haileyok Apr 22, 2024
8878821
Move to Tenor for GIFs (#3654)
haileyok Apr 22, 2024
f7a97f7
Merge branch 'main' into hailey/gif-view
gaearon Apr 22, 2024
7ec7852
full size playback controls
mozzius Apr 23, 2024
43d7a7e
pass tests
haileyok Apr 23, 2024
6c09e69
add accessibility to gifs
haileyok Apr 23, 2024
1644574
use `onPlay` and `onPause`
haileyok Apr 23, 2024
0070199
rm unused logic for description
haileyok Apr 23, 2024
ac3866c
add accessibility label to the controls
haileyok Apr 23, 2024
0c52b2c
add gif into to external embed in composer
haileyok Apr 23, 2024
eb0f082
make it optional
haileyok Apr 23, 2024
a48f963
gif dimensions
haileyok Apr 23, 2024
a6e1429
make the jsx look nicer
haileyok Apr 23, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 20 additions & 22 deletions __tests__/lib/string.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -459,6 +459,12 @@ describe('parseEmbedPlayerFromUrl', () => {
'https://tenor.com/view',
'https://tenor.com/view/gifId.gif',
'https://tenor.com/intl/view/gifId.gif',

'https://media.tenor.com/someID_AAAAC/someName.gif?hh=100&ww=100',
'https://media.tenor.com/someID_AAAAC/someName.gif',
'https://media.tenor.com/someID/someName.gif',
'https://media.tenor.com/someID',
'https://media.tenor.com',
]

const outputs = [
Expand Down Expand Up @@ -628,20 +634,14 @@ describe('parseEmbedPlayerFromUrl', () => {
},
undefined,
undefined,

{
type: 'giphy_gif',
source: 'giphy',
isGif: true,
hideDetails: true,
metaUri: 'https://giphy.com/gifs/39248209509382934029',
playerUri: 'https://i.giphy.com/media/39248209509382934029/200.mp4',
dimensions: {
width: 100,
height: 100,
},
playerUri: 'https://i.giphy.com/media/39248209509382934029/200.webp',
},

{
type: 'giphy_gif',
source: 'giphy',
Expand Down Expand Up @@ -736,29 +736,27 @@ describe('parseEmbedPlayerFromUrl', () => {
playerUri: 'https://i.giphy.com/media/gifId/200.webp',
},

{
type: 'tenor_gif',
source: 'tenor',
isGif: true,
hideDetails: true,
playerUri: 'https://tenor.com/view/gifId.gif',
},
undefined,
undefined,
undefined,
undefined,
undefined,

{
type: 'tenor_gif',
source: 'tenor',
isGif: true,
hideDetails: true,
playerUri: 'https://tenor.com/view/gifId.gif',
},
{
type: 'tenor_gif',
source: 'tenor',
isGif: true,
hideDetails: true,
playerUri: 'https://tenor.com/intl/view/gifId.gif',
playerUri: 'https://t.gifs.bsky.app/someID_AAAAM/someName.gif',
dimensions: {
width: 100,
height: 100,
},
},
undefined,
undefined,
undefined,
undefined,
]

it('correctly grabs the correct id from uri', () => {
Expand Down
98 changes: 98 additions & 0 deletions modules/expo-bluesky-gif-view/android/build.gradle
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'
apply plugin: 'maven-publish'

group = 'expo.modules.blueskygifview'
version = '0.5.0'

buildscript {
def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
if (expoModulesCorePlugin.exists()) {
apply from: expoModulesCorePlugin
applyKotlinExpoModulesCorePlugin()
}

// Simple helper that allows the root project to override versions declared by this library.
ext.safeExtGet = { prop, fallback ->
rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
}

// Ensures backward compatibility
ext.getKotlinVersion = {
if (ext.has("kotlinVersion")) {
ext.kotlinVersion()
} else {
ext.safeExtGet("kotlinVersion", "1.8.10")
}
}

repositories {
mavenCentral()
}

dependencies {
classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
}
}

afterEvaluate {
publishing {
publications {
release(MavenPublication) {
from components.release
}
}
repositories {
maven {
url = mavenLocal().url
}
}
}
}

android {
compileSdkVersion safeExtGet("compileSdkVersion", 33)

def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
if (agpVersion.tokenize('.')[0].toInteger() < 8) {
compileOptions {
sourceCompatibility JavaVersion.VERSION_11
targetCompatibility JavaVersion.VERSION_11
}

kotlinOptions {
jvmTarget = JavaVersion.VERSION_11.majorVersion
}
}

namespace "expo.modules.blueskygifview"
defaultConfig {
minSdkVersion safeExtGet("minSdkVersion", 21)
targetSdkVersion safeExtGet("targetSdkVersion", 34)
versionCode 1
versionName "0.5.0"
}
lintOptions {
abortOnError false
}
publishing {
singleVariant("release") {
withSourcesJar()
}
}
}

repositories {
mavenCentral()
}

dependencies {
implementation 'androidx.appcompat:appcompat:1.6.1'
def GLIDE_VERSION = "4.13.2"

implementation project(':expo-modules-core')
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"

// Keep glide version up to date with expo-image so that we don't have duplicate deps
implementation 'com.github.bumptech.glide:glide:4.13.2'
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<manifest>
</manifest>
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
package expo.modules.blueskygifview

import android.content.Context
import android.graphics.Canvas
import android.graphics.drawable.Animatable
import androidx.appcompat.widget.AppCompatImageView

class AppCompatImageViewExtended(context: Context, private val parent: GifView): AppCompatImageView(context) {
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)

if (this.drawable is Animatable) {
if (!parent.isLoaded) {
parent.isLoaded = true
parent.firePlayerStateChange()
}

if (!parent.isPlaying) {
this.pause()
}
}
}

fun pause() {
val drawable = this.drawable
if (drawable is Animatable) {
drawable.stop()
}
}

fun play() {
val drawable = this.drawable
if (drawable is Animatable) {
drawable.start()
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
package expo.modules.blueskygifview

import com.bumptech.glide.Glide
import com.bumptech.glide.load.engine.DiskCacheStrategy
import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class ExpoBlueskyGifViewModule : Module() {
override fun definition() = ModuleDefinition {
Name("ExpoBlueskyGifView")

AsyncFunction("prefetchAsync") { sources: List<String> ->
val activity = appContext.currentActivity ?: return@AsyncFunction
val glide = Glide.with(activity)

sources.forEach { source ->
glide
.download(source)
.diskCacheStrategy(DiskCacheStrategy.DATA)
.submit()
}
}

View(GifView::class) {
Events(
"onPlayerStateChange"
)

Prop("source") { view: GifView, source: String ->
view.source = source
}

Prop("placeholderSource") { view: GifView, source: String ->
view.placeholderSource = source
}

Prop("autoplay") { view: GifView, autoplay: Boolean ->
view.autoplay = autoplay
}

AsyncFunction("playAsync") { view: GifView ->
view.play()
}

AsyncFunction("pauseAsync") { view: GifView ->
view.pause()
}

AsyncFunction("toggleAsync") { view: GifView ->
view.toggle()
}
}
}
}
Loading
Loading