zkit-ui 2.0.4 → 2.0.6

package/android/src/main/java/cn/fontree/zkit/ui/preview/NativeImagePreviewVideoPlayerView.java

@@ -0,0 +1,338 @@
+package cn.fontree.zkit.ui.preview;
+
+import android.content.Context;
+import android.content.res.ColorStateList;
+import android.graphics.Color;
+import android.graphics.Rect;
+import android.graphics.drawable.Drawable;
+import android.net.Uri;
+import android.util.TypedValue;
+import android.view.Gravity;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import androidx.appcompat.content.res.AppCompatResources;
+import androidx.appcompat.widget.AppCompatImageButton;
+import androidx.media3.common.MediaItem;
+import androidx.media3.common.Player;
+import androidx.media3.exoplayer.ExoPlayer;
+import androidx.media3.ui.PlayerControlView;
+import androidx.media3.ui.PlayerView;
+
+import com.bumptech.glide.Glide;
+import com.bumptech.glide.load.engine.GlideException;
+import com.bumptech.glide.request.RequestListener;
+import com.bumptech.glide.request.target.Target;
+
+public final class NativeImagePreviewVideoPlayerView extends FrameLayout {
+    public interface Listener {
+        void onCloseRequested();
+    }
+
+    private final ImageView posterImageView;
+    private final PlayerView playerView;
+    private final AppCompatImageButton closeButton;
+    @Nullable
+    private Runnable contentReadyListener;
+    @Nullable
+    private NativeImagePreviewMediaItem item;
+    @Nullable
+    private ExoPlayer player;
+    @Nullable
+    private String preparedSourceUrl;
+    @Nullable
+    private Listener listener;
+    private boolean firstFrameReady;
+    private boolean active;
+
+    private final Player.Listener playerListener = new Player.Listener() {
+        @Override
+        public void onRenderedFirstFrame() {
+            firstFrameReady = true;
+            if (active) {
+                revealPlayer();
+            }
+        }
+    };
+
+    public NativeImagePreviewVideoPlayerView(@NonNull Context context) {
+        super(context);
+        setLayoutParams(new LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+        ));
+        setBackgroundColor(Color.TRANSPARENT);
+
+        posterImageView = new ImageView(context);
+        posterImageView.setLayoutParams(new LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT,
+                ViewGroup.LayoutParams.MATCH_PARENT
+        ));
+        posterImageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
+        posterImageView.setBackgroundColor(Color.TRANSPARENT);
+        addView(posterImageView);
+
+        playerView = (PlayerView) LayoutInflater.from(context)
+                .inflate(R.layout.native_image_preview_player_view, this, false);
+        playerView.setUseController(true);
+        playerView.setControllerAutoShow(true);
+        playerView.setControllerHideOnTouch(true);
+        playerView.setShutterBackgroundColor(Color.TRANSPARENT);
+        playerView.setBackgroundColor(Color.TRANSPARENT);
+        playerView.setShowPreviousButton(false);
+        playerView.setShowNextButton(false);
+        playerView.setShowRewindButton(false);
+        playerView.setShowFastForwardButton(false);
+        playerView.setShowSubtitleButton(false);
+        playerView.setShowVrButton(false);
+        playerView.setShowShuffleButton(false);
+        playerView.setAlpha(0f);
+        playerView.setVisibility(VISIBLE);
+        addView(playerView);
+        hideControllerView(androidx.media3.ui.R.id.exo_settings);
+        hideControllerView(androidx.media3.ui.R.id.exo_overflow_show);
+        hideControllerView(androidx.media3.ui.R.id.exo_overflow_hide);
+
+        closeButton = new AppCompatImageButton(context);
+        LayoutParams closeLayoutParams = new LayoutParams(dp(48), dp(48));
+        closeLayoutParams.gravity = Gravity.TOP | Gravity.START;
+        closeLayoutParams.topMargin = dp(14);
+        closeLayoutParams.leftMargin = dp(10);
+        closeButton.setLayoutParams(closeLayoutParams);
+        closeButton.setImageDrawable(
+                AppCompatResources.getDrawable(context, androidx.appcompat.R.drawable.abc_ic_clear_material)
+        );
+        closeButton.setBackgroundResource(resolveSelectableItemBackgroundBorderless());
+        closeButton.setImageTintList(ColorStateList.valueOf(Color.WHITE));
+        closeButton.setPadding(dp(12), dp(12), dp(12), dp(12));
+        closeButton.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
+        closeButton.setVisibility(GONE);
+        closeButton.setOnClickListener(v -> {
+            if (listener != null) {
+                listener.onCloseRequested();
+            }
+        });
+        addView(closeButton);
+
+        playerView.setControllerVisibilityListener((PlayerControlView.VisibilityListener) visibility -> {
+            if (firstFrameReady) {
+                closeButton.setVisibility(visibility == View.VISIBLE ? View.VISIBLE : View.GONE);
+            }
+        });
+    }
+
+    public void setListener(@Nullable Listener listener) {
+        this.listener = listener;
+    }
+
+    public void setOnContentReadyListener(@Nullable Runnable contentReadyListener) {
+        this.contentReadyListener = contentReadyListener;
+    }
+
+    public void bind(@NonNull NativeImagePreviewMediaItem item) {
+        this.item = item;
+        firstFrameReady = false;
+        playerView.animate().cancel();
+        playerView.setAlpha(0f);
+        playerView.setVisibility(VISIBLE);
+        closeButton.setVisibility(GONE);
+        posterImageView.animate().cancel();
+        posterImageView.setAlpha(1f);
+        posterImageView.setVisibility(VISIBLE);
+        Glide.with(posterImageView).clear(posterImageView);
+        posterImageView.setImageDrawable(null);
+        Glide.with(posterImageView)
+                .load(item.getThumbnailUrl())
+                .dontAnimate()
+                .listener(new RequestListener<Drawable>() {
+                    @Override
+                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
+                        notifyContentReady();
+                        return false;
+                    }
+
+                    @Override
+                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, com.bumptech.glide.load.DataSource dataSource, boolean isFirstResource) {
+                        notifyContentReady();
+                        return false;
+                    }
+                })
+                .into(posterImageView);
+        if (active) {
+            ensurePlayerPrepared(item.getSourceUrl());
+        }
+    }
+
+    public void setActive(boolean active) {
+        this.active = active;
+        if (item == null) {
+            return;
+        }
+        if (active) {
+            ensurePlayerPrepared(item.getSourceUrl());
+            if (player != null) {
+                player.play();
+            }
+            if (firstFrameReady) {
+                revealPlayer();
+            }
+        } else {
+            if (player != null) {
+                player.pause();
+            }
+            closeButton.setVisibility(GONE);
+        }
+    }
+
+    public void setMediaHidden(boolean hidden) {
+        setAlpha(hidden ? 0f : 1f);
+    }
+
+    @Nullable
+    public NativeImagePreviewSharedElementState sharedElementState() {
+        return NativeImagePreviewLayoutSupport.captureImageViewState(posterImageView);
+    }
+
+    @Nullable
+    public Drawable getPosterDrawable() {
+        return posterImageView.getDrawable();
+    }
+
+    public void prepareForReturnTransition() {
+        playerView.animate().cancel();
+        posterImageView.animate().cancel();
+        posterImageView.setAlpha(1f);
+        posterImageView.setVisibility(VISIBLE);
+        playerView.setAlpha(0f);
+        playerView.setVisibility(VISIBLE);
+        closeButton.setVisibility(GONE);
+    }
+
+    public void restoreAfterDismissCancelled() {
+        if (!firstFrameReady) {
+            prepareForReturnTransition();
+            return;
+        }
+        playerView.setVisibility(VISIBLE);
+        playerView.setAlpha(1f);
+        posterImageView.setVisibility(VISIBLE);
+        posterImageView.setAlpha(0f);
+    }
+
+    public boolean isTouchOnInteractiveControls(float rawX, float rawY) {
+        return isTouchInsideView(playerView.findViewById(androidx.media3.ui.R.id.exo_progress), rawX, rawY, dp(24))
+                || isTouchInsideView(closeButton, rawX, rawY, dp(12));
+    }
+
+    public void release() {
+        Glide.with(posterImageView.getContext().getApplicationContext()).clear(posterImageView);
+        posterImageView.setImageDrawable(null);
+        posterImageView.animate().cancel();
+        posterImageView.setAlpha(1f);
+        posterImageView.setVisibility(VISIBLE);
+        closeButton.setVisibility(GONE);
+        if (player != null) {
+            player.removeListener(playerListener);
+            player.release();
+            player = null;
+            playerView.setPlayer(null);
+        }
+        playerView.animate().cancel();
+        playerView.setAlpha(0f);
+        playerView.setVisibility(VISIBLE);
+        preparedSourceUrl = null;
+        firstFrameReady = false;
+    }
+
+    private void ensurePlayerPrepared(@NonNull String sourceUrl) {
+        if (player == null) {
+            player = new ExoPlayer.Builder(getContext()).build();
+            player.addListener(playerListener);
+            playerView.setPlayer(player);
+        }
+        if (sourceUrl.equals(preparedSourceUrl)) {
+            return;
+        }
+        firstFrameReady = false;
+        playerView.animate().cancel();
+        playerView.setAlpha(0f);
+        playerView.setVisibility(VISIBLE);
+        closeButton.setVisibility(GONE);
+        player.setMediaItem(MediaItem.fromUri(Uri.parse(sourceUrl)));
+        player.prepare();
+        preparedSourceUrl = sourceUrl;
+    }
+
+    private void revealPlayer() {
+        playerView.setVisibility(VISIBLE);
+        playerView.animate().cancel();
+        playerView.setAlpha(0f);
+        posterImageView.animate().cancel();
+        posterImageView.setVisibility(VISIBLE);
+        posterImageView.setAlpha(1f);
+        playerView.animate()
+                .alpha(1f)
+                .setDuration(180L)
+                .start();
+        posterImageView.animate()
+                .alpha(0f)
+                .setDuration(220L)
+                .withEndAction(() -> {
+                    if (playerView.isControllerFullyVisible()) {
+                        closeButton.setVisibility(VISIBLE);
+                    }
+                })
+                .start();
+    }
+
+    private void notifyContentReady() {
+        if (contentReadyListener != null) {
+            contentReadyListener.run();
+        }
+    }
+
+    private void hideControllerView(int viewId) {
+        View target = playerView.findViewById(viewId);
+        if (target != null) {
+            target.setVisibility(GONE);
+        }
+    }
+
+    private boolean isTouchInsideView(@Nullable View target, float rawX, float rawY, int extraPaddingPx) {
+        if (target == null || !target.isShown() || target.getWidth() <= 0 || target.getHeight() <= 0) {
+            return false;
+        }
+        int[] location = new int[2];
+        target.getLocationOnScreen(location);
+        Rect hitRect = new Rect(
+                location[0] - extraPaddingPx,
+                location[1] - extraPaddingPx,
+                location[0] + target.getWidth() + extraPaddingPx,
+                location[1] + target.getHeight() + extraPaddingPx
+        );
+        return hitRect.contains(Math.round(rawX), Math.round(rawY));
+    }
+
+    private int resolveSelectableItemBackgroundBorderless() {
+        TypedValue outValue = new TypedValue();
+        boolean resolved = getContext().getTheme().resolveAttribute(
+                android.R.attr.selectableItemBackgroundBorderless,
+                outValue,
+                true
+        );
+        return resolved ? outValue.resourceId : 0;
+    }
+
+    private int dp(int value) {
+        return (int) TypedValue.applyDimension(
+                TypedValue.COMPLEX_UNIT_DIP,
+                value,
+                getResources().getDisplayMetrics()
+        );
+    }
+}

package/android/src/main/java/cn/fontree/zkit/ui/preview/NativeImagePreviewView.kt

@@ -0,0 +1,305 @@
+package cn.fontree.zkit.ui.preview
+
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import androidx.activity.ComponentActivity
+import androidx.activity.OnBackPressedCallback
+import expo.modules.kotlin.viewevent.EventDispatcher
+
+enum class Theme(val value: String) {
+    Dark("dark"),
+    Light("light")
+}
+
+class NativeImagePreviewView(context: Context) : ViewGroup(context) {
+    var urls: Array<String>? = null
+    var items: List<Map<String, Any?>> = emptyList()
+    var theme: Theme = Theme.Dark
+    var initialIndex: Int = 0
+        set(value) {
+            field = value
+            bindSourceImageView()
+        }
+    var previewGroupId: String? = null
+        set(value) {
+            field = value
+            bindSourceImageView()
+        }
+    var disableHiddenOriginalImage = false
+    var edgeToEdge = false
+    var transitionOffsetY: Int? = null
+    var transitionOffsetX: Int? = 0
+    val onIndexChange by EventDispatcher()
+
+    private var sourceImageView: ImageView? = null
+    private var observedSourceImageView: ImageView? = null
+    private var sourceImageLayoutListener: View.OnLayoutChangeListener? = null
+    private var sourceImageAttachListener: View.OnAttachStateChangeListener? = null
+    private var overlayView: NativeImagePreviewViewerOverlayView? = null
+    private var overlayBackCallback: OnBackPressedCallback? = null
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        bindSourceImageView()
+    }
+
+    override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+        for (i in 0 until childCount) {
+            val child = getChildAt(i)
+            child.layout(0, 0, width, height)
+        }
+        bindSourceImageView()
+    }
+
+    override fun onDetachedFromWindow() {
+        overlayView?.dismissImmediately()
+        overlayView = null
+        overlayBackCallback?.remove()
+        overlayBackCallback = null
+        super.onDetachedFromWindow()
+        unregisterSourceImageView()
+    }
+
+    private fun scopedPreviewGroupId(): String? = previewGroupId?.takeIf { it.isNotBlank() }
+
+    private fun transitionNameForIndex(index: Int): String {
+        return NativeImagePreviewSharedElementNames.forIndex(scopedPreviewGroupId(), index)
+    }
+
+    private fun transitionNameForItem(item: NativeImagePreviewMediaItem): String {
+        return NativeImagePreviewSharedElementNames.forItem(scopedPreviewGroupId(), item)
+    }
+
+    private fun bindSourceImageView() {
+        val imageView = findImageView(this)
+        if (imageView == null) {
+            unregisterSourceImageView()
+            return
+        }
+
+        val previousSourceImageView = sourceImageView
+        if (previousSourceImageView != null && previousSourceImageView !== imageView) {
+            clearSourceImageObserver()
+            if (!isSourceImageViewUsable(previousSourceImageView)) {
+                NativeImagePreviewSourceViewRegistry.unregisterView(previousSourceImageView)
+            }
+        }
+
+        sourceImageView = imageView
+        imageView.setOnClickListener {
+            openViewer(imageView)
+        }
+        registerSourceImageViewWhenReady(imageView)
+    }
+
+    private fun openViewer(sourceView: ImageView) {
+        val mediaItems = buildMediaItems()
+        if (mediaItems.isEmpty()) {
+            return
+        }
+        if (overlayView != null) {
+            return
+        }
+        val safeIndex = initialIndex.coerceIn(0, mediaItems.lastIndex)
+        val activity = getActivity(context) ?: return
+        val overlayHost = activity.window.decorView as? ViewGroup
+            ?: activity.findViewById<ViewGroup>(android.R.id.content)
+            ?: return
+        val sourceKey = transitionNameForItem(mediaItems[safeIndex])
+        NativeImagePreviewSourceViewRegistry.register(sourceKey, sourceView)
+        val overlay = NativeImagePreviewViewerOverlayView(
+            activity,
+            mediaItems,
+            safeIndex,
+            theme == Theme.Light,
+            scopedPreviewGroupId(),
+            object : NativeImagePreviewViewerOverlayView.Listener {
+                override fun onOverlayDismissed() {
+                    if (overlayView != null) {
+                        overlayView = null
+                    }
+                    overlayBackCallback?.remove()
+                    overlayBackCallback = null
+                }
+
+                override fun onOverlayIndexChange(index: Int) {
+                    onIndexChange(mapOf("currentIndex" to index))
+                }
+            }
+        )
+        overlayView = overlay
+        overlayHost.addView(overlay)
+        if (activity is ComponentActivity) {
+            overlayBackCallback?.remove()
+            overlayBackCallback = object : OnBackPressedCallback(true) {
+                override fun handleOnBackPressed() {
+                    overlayView?.requestClose()
+                }
+            }.also { callback ->
+                activity.onBackPressedDispatcher.addCallback(callback)
+            }
+        }
+    }
+
+    private fun buildMediaItems(): List<NativeImagePreviewMediaItem> {
+        if (items.isNotEmpty()) {
+            return items.mapIndexedNotNull { index, data ->
+                val type = data["type"] as? String ?: return@mapIndexedNotNull null
+                val url = data["url"] as? String ?: return@mapIndexedNotNull null
+                if (type.lowercase() == "video") {
+                    val poster = data["poster"] as? String ?: url
+                    NativeImagePreviewMediaItem(index.toString(), NativeImagePreviewMediaItem.MediaType.VIDEO, url, poster)
+                } else {
+                    NativeImagePreviewMediaItem(index.toString(), NativeImagePreviewMediaItem.MediaType.IMAGE, url, url)
+                }
+            }
+        }
+        val rawUrls = urls ?: return emptyList()
+        return rawUrls.mapIndexed { index, url ->
+            NativeImagePreviewMediaItem(index.toString(), NativeImagePreviewMediaItem.MediaType.IMAGE, url, url)
+        }
+    }
+
+    private fun findImageView(view: View): ImageView? {
+        var bestImageView: ImageView? = null
+        var bestScore = Int.MIN_VALUE
+
+        fun visit(candidate: View) {
+            if (candidate is ImageView) {
+                val score = sourceImageViewScore(candidate)
+                if (score > bestScore) {
+                    bestImageView = candidate
+                    bestScore = score
+                }
+            }
+            if (candidate is ViewGroup) {
+                for (i in 0 until candidate.childCount) {
+                    visit(candidate.getChildAt(i))
+                }
+            }
+        }
+
+        visit(view)
+        return bestImageView
+    }
+
+    private fun registerSourceImageViewWhenReady(imageView: ImageView) {
+        val transitionName = transitionNameForIndex(initialIndex)
+        if (isSourceImageViewUsable(imageView)) {
+            clearSourceImageObserver(imageView)
+            NativeImagePreviewSourceViewRegistry.register(transitionName, imageView)
+            return
+        }
+
+        observeSourceImageView(imageView)
+    }
+
+    private fun observeSourceImageView(imageView: ImageView) {
+        if (observedSourceImageView === imageView && sourceImageLayoutListener != null) {
+            return
+        }
+
+        clearSourceImageObserver()
+        observedSourceImageView = imageView
+        val layoutListener = View.OnLayoutChangeListener { view, _, _, _, _, _, _, _, _ ->
+            val observed = view as? ImageView ?: return@OnLayoutChangeListener
+            if (sourceImageView !== observed) {
+                clearSourceImageObserver(observed)
+                return@OnLayoutChangeListener
+            }
+            if (isSourceImageViewUsable(observed)) {
+                registerSourceImageViewWhenReady(observed)
+            }
+        }
+        val attachListener = object : View.OnAttachStateChangeListener {
+            override fun onViewAttachedToWindow(view: View) {
+                val observed = view as? ImageView ?: return
+                if (sourceImageView !== observed) {
+                    clearSourceImageObserver(observed)
+                    return
+                }
+                registerSourceImageViewWhenReady(observed)
+            }
+
+            override fun onViewDetachedFromWindow(view: View) = Unit
+        }
+        sourceImageLayoutListener = layoutListener
+        sourceImageAttachListener = attachListener
+        imageView.addOnLayoutChangeListener(layoutListener)
+        imageView.addOnAttachStateChangeListener(attachListener)
+        imageView.post {
+            if (sourceImageView !== imageView) {
+                return@post
+            }
+            if (isSourceImageViewUsable(imageView)) {
+                registerSourceImageViewWhenReady(imageView)
+            }
+        }
+    }
+
+    private fun isSourceImageViewUsable(imageView: ImageView): Boolean {
+        return imageView.isAttachedToWindow && imageView.width > 0 && imageView.height > 0
+    }
+
+    private fun sourceImageViewScore(imageView: ImageView): Int {
+        var score = 0
+        if (imageView.isAttachedToWindow) {
+            score += 16
+        }
+        if (imageView.width > 0 && imageView.height > 0) {
+            score += 16
+        }
+        if (imageView.visibility == View.VISIBLE) {
+            score += 16
+        }
+        if (imageView.isShown) {
+            score += 16
+        }
+        if (imageView.drawable != null) {
+            score += 8
+        }
+        if (imageView === sourceImageView) {
+            score += 1
+        }
+        return score
+    }
+
+    private fun clearSourceImageObserver(imageView: ImageView? = null) {
+        val observed = observedSourceImageView ?: return
+        if (imageView != null && observed !== imageView) {
+            return
+        }
+        sourceImageLayoutListener?.let { listener ->
+            observed.removeOnLayoutChangeListener(listener)
+        }
+        sourceImageAttachListener?.let { listener ->
+            observed.removeOnAttachStateChangeListener(listener)
+        }
+        sourceImageLayoutListener = null
+        sourceImageAttachListener = null
+        observedSourceImageView = null
+    }
+
+    private fun getActivity(context: Context): Activity? {
+        var current = context
+        while (current is ContextWrapper) {
+            if (current is Activity) {
+                return current
+            }
+            current = current.baseContext
+        }
+        return null
+    }
+
+    private fun unregisterSourceImageView() {
+        clearSourceImageObserver()
+        sourceImageView?.let { imageView ->
+            NativeImagePreviewSourceViewRegistry.unregisterView(imageView)
+        }
+        sourceImageView = null
+    }
+}