add alt badge to video/gifs

closes sk22#409

mastodon/src/main/java/org/joinmastodon/android/ui/displayitems/ImageStatusDisplayItem.java

@@ -1,12 +1,21 @@
 package org.joinmastodon.android.ui.displayitems;
 
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
 import android.app.Activity;
 import android.graphics.drawable.Drawable;
 import android.text.TextUtils;
 import android.view.View;
 import android.view.ViewGroup;
+import android.view.ViewTreeObserver;
+import android.widget.FrameLayout;
+import android.widget.ImageButton;
 import android.widget.ImageView;
+import android.widget.TextView;
 
+import org.joinmastodon.android.GlobalUserPreferences;
 import org.joinmastodon.android.R;
 import org.joinmastodon.android.fragments.BaseStatusListFragment;
 import org.joinmastodon.android.model.Attachment;
@@ -19,6 +28,7 @@ import org.joinmastodon.android.ui.views.ImageAttachmentFrameLayout;
 import androidx.annotation.LayoutRes;
 import me.grishka.appkit.imageloader.ImageLoaderViewHolder;
 import me.grishka.appkit.imageloader.requests.ImageLoaderRequest;
+import me.grishka.appkit.utils.CubicBezierInterpolator;
 
 public abstract class ImageStatusDisplayItem extends StatusDisplayItem{
 	public final int index;
@@ -56,11 +66,35 @@ public abstract class ImageStatusDisplayItem extends StatusDisplayItem{
 		private BlurhashCrossfadeDrawable crossfadeDrawable=new BlurhashCrossfadeDrawable();
 		private boolean didClear;
 
+		private AnimatorSet currentAnim;
+		private final FrameLayout altTextWrapper;
+		private final TextView altTextButton;
+		private final ImageView noAltTextButton;
+		private final View altTextScroller;
+		private final ImageButton altTextClose;
+		private final TextView altText, noAltText;
+
+		private View altOrNoAltButton;
+		private boolean altTextShown;
+
 		public Holder(Activity activity, @LayoutRes int layout, ViewGroup parent){
 			super(activity, layout, parent);
 			photo=findViewById(R.id.photo);
 			photo.setOnClickListener(this::onViewClick);
 			this.layout=(ImageAttachmentFrameLayout)itemView;
+
+			altTextWrapper=findViewById(R.id.alt_text_wrapper);
+			altTextButton=findViewById(R.id.alt_button);
+			noAltTextButton=findViewById(R.id.no_alt_button);
+			altTextScroller=findViewById(R.id.alt_text_scroller);
+			altTextClose=findViewById(R.id.alt_text_close);
+			altText=findViewById(R.id.alt_text);
+			noAltText=findViewById(R.id.no_alt_text);
+
+			altTextButton.setOnClickListener(this::onShowHideClick);
+			noAltTextButton.setOnClickListener(this::onShowHideClick);
+			altTextClose.setOnClickListener(this::onShowHideClick);
+//			altTextScroller.setNestedScrollingEnabled(true);
 		}
 
 		@Override
@@ -73,6 +107,111 @@ public abstract class ImageStatusDisplayItem extends StatusDisplayItem{
 			photo.setImageDrawable(crossfadeDrawable);
 			photo.setContentDescription(TextUtils.isEmpty(item.attachment.description) ? item.parentFragment.getString(R.string.media_no_description) : item.attachment.description);
 			didClear=false;
+
+			if (currentAnim != null) currentAnim.cancel();
+
+			boolean altTextMissing = TextUtils.isEmpty(item.attachment.description);
+			altOrNoAltButton = altTextMissing ? noAltTextButton : altTextButton;
+			altTextShown=false;
+
+			altTextScroller.setVisibility(View.GONE);
+			altTextClose.setVisibility(View.GONE);
+			altTextButton.setVisibility(View.VISIBLE);
+			noAltTextButton.setVisibility(View.VISIBLE);
+			altTextButton.setAlpha(1f);
+			noAltTextButton.setAlpha(1f);
+			altTextWrapper.setVisibility(View.VISIBLE);
+
+			if (altTextMissing){
+				if (GlobalUserPreferences.showNoAltIndicator) {
+					noAltTextButton.setVisibility(View.VISIBLE);
+					noAltText.setVisibility(View.VISIBLE);
+					altTextWrapper.setBackgroundResource(R.drawable.bg_image_no_alt_overlay);
+					altTextButton.setVisibility(View.GONE);
+					altText.setVisibility(View.GONE);
+				} else {
+					altTextWrapper.setVisibility(View.GONE);
+				}
+			}else{
+				if (GlobalUserPreferences.showAltIndicator) {
+					noAltTextButton.setVisibility(View.GONE);
+					noAltText.setVisibility(View.GONE);
+					altTextWrapper.setBackgroundResource(R.drawable.bg_image_alt_overlay);
+					altTextButton.setVisibility(View.VISIBLE);
+					altTextButton.setText(R.string.sk_alt_button);
+					altText.setVisibility(View.VISIBLE);
+					altText.setText(item.attachment.description);
+					altText.setPadding(0, 0, 0, 0);
+				} else {
+					altTextWrapper.setVisibility(View.GONE);
+				}
+			}
+		}
+
+		private void onShowHideClick(View v){
+			boolean show=v.getId()==R.id.alt_button || v.getId()==R.id.no_alt_button;
+
+			if(altTextShown==show)
+				return;
+			if(currentAnim!=null)
+				currentAnim.cancel();
+
+			altTextShown=show;
+			if(show){
+				altTextScroller.setVisibility(View.VISIBLE);
+				altTextClose.setVisibility(View.VISIBLE);
+			}else{
+				altOrNoAltButton.setVisibility(View.VISIBLE);
+				// Hide these views temporarily so FrameLayout measures correctly
+				altTextScroller.setVisibility(View.GONE);
+				altTextClose.setVisibility(View.GONE);
+			}
+
+			// This is the current size...
+			int prevLeft=altTextWrapper.getLeft();
+			int prevRight=altTextWrapper.getRight();
+			int prevTop=altTextWrapper.getTop();
+			altTextWrapper.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener(){
+				@Override
+				public boolean onPreDraw(){
+					altTextWrapper.getViewTreeObserver().removeOnPreDrawListener(this);
+
+					// ...and this is after the layout pass, right now the FrameLayout has its final size, but we animate that change
+					if(!show){
+						// Show these views again so they're visible for the duration of the animation.
+						// No one would notice they were missing during measure/layout.
+						altTextScroller.setVisibility(View.VISIBLE);
+						altTextClose.setVisibility(View.VISIBLE);
+					}
+					AnimatorSet set=new AnimatorSet();
+					set.playTogether(
+							ObjectAnimator.ofInt(altTextWrapper, "left", prevLeft, altTextWrapper.getLeft()),
+							ObjectAnimator.ofInt(altTextWrapper, "right", prevRight, altTextWrapper.getRight()),
+							ObjectAnimator.ofInt(altTextWrapper, "top", prevTop, altTextWrapper.getTop()),
+							ObjectAnimator.ofFloat(altOrNoAltButton, View.ALPHA, show ? 1f : 0f, show ? 0f : 1f),
+							ObjectAnimator.ofFloat(altTextScroller, View.ALPHA, show ? 0f : 1f, show ? 1f : 0f),
+							ObjectAnimator.ofFloat(altTextClose, View.ALPHA, show ? 0f : 1f, show ? 1f : 0f)
+					);
+					set.setDuration(300);
+					set.setInterpolator(CubicBezierInterpolator.DEFAULT);
+					set.addListener(new AnimatorListenerAdapter(){
+						@Override
+						public void onAnimationEnd(Animator animation){
+							if(show){
+								altOrNoAltButton.setVisibility(View.GONE);
+							}else{
+								altTextScroller.setVisibility(View.GONE);
+								altTextClose.setVisibility(View.GONE);
+							}
+							currentAnim=null;
+						}
+					});
+					set.start();
+					currentAnim=set;
+
+					return true;
+				}
+			});
 		}
 
 		@Override

mastodon/src/main/java/org/joinmastodon/android/ui/displayitems/PhotoStatusDisplayItem.java

@@ -37,141 +37,9 @@ public class PhotoStatusDisplayItem extends ImageStatusDisplayItem{
 		return Type.PHOTO;
 	}
 
-	public static class Holder extends ImageStatusDisplayItem.Holder<PhotoStatusDisplayItem>{
+	public static class Holder extends ImageStatusDisplayItem.Holder<PhotoStatusDisplayItem> {
-		private final FrameLayout altTextWrapper;
+		public Holder(Activity activity, ViewGroup parent) {
-		private final TextView altTextButton;
-		private final ImageView noAltTextButton;
-		private final View altTextScroller;
-		private final ImageButton altTextClose;
-		private final TextView altText, noAltText;
-
-		private View altOrNoAltButton;
-		private boolean altTextShown;
-		private AnimatorSet currentAnim;
-
-		public Holder(Activity activity, ViewGroup parent){
 			super(activity, R.layout.display_item_photo, parent);
-			altTextWrapper=findViewById(R.id.alt_text_wrapper);
-			altTextButton=findViewById(R.id.alt_button);
-			noAltTextButton=findViewById(R.id.no_alt_button);
-			altTextScroller=findViewById(R.id.alt_text_scroller);
-			altTextClose=findViewById(R.id.alt_text_close);
-			altText=findViewById(R.id.alt_text);
-			noAltText=findViewById(R.id.no_alt_text);
-
-			altTextButton.setOnClickListener(this::onShowHideClick);
-			noAltTextButton.setOnClickListener(this::onShowHideClick);
-			altTextClose.setOnClickListener(this::onShowHideClick);
-//			altTextScroller.setNestedScrollingEnabled(true);
-		}
-
-		@Override
-		public void onBind(ImageStatusDisplayItem item){
-			super.onBind(item);
-			boolean altTextMissing = TextUtils.isEmpty(item.attachment.description);
-			altOrNoAltButton = altTextMissing ? noAltTextButton : altTextButton;
-			altTextShown=false;
-			if(currentAnim!=null)
-				currentAnim.cancel();
-
-			altTextScroller.setVisibility(View.GONE);
-			altTextClose.setVisibility(View.GONE);
-			altTextButton.setVisibility(View.VISIBLE);
-			noAltTextButton.setVisibility(View.VISIBLE);
-			altTextButton.setAlpha(1f);
-			noAltTextButton.setAlpha(1f);
-			altTextWrapper.setVisibility(View.VISIBLE);
-
-			if (altTextMissing){
-				if (GlobalUserPreferences.showNoAltIndicator) {
-					noAltTextButton.setVisibility(View.VISIBLE);
-					noAltText.setVisibility(View.VISIBLE);
-					altTextWrapper.setBackgroundResource(R.drawable.bg_image_no_alt_overlay);
-					altTextButton.setVisibility(View.GONE);
-					altText.setVisibility(View.GONE);
-				} else {
-					altTextWrapper.setVisibility(View.GONE);
-				}
-			}else{
-				if (GlobalUserPreferences.showAltIndicator) {
-					noAltTextButton.setVisibility(View.GONE);
-					noAltText.setVisibility(View.GONE);
-					altTextWrapper.setBackgroundResource(R.drawable.bg_image_alt_overlay);
-					altTextButton.setVisibility(View.VISIBLE);
-					altTextButton.setText(R.string.sk_alt_button);
-					altText.setVisibility(View.VISIBLE);
-					altText.setText(item.attachment.description);
-					altText.setPadding(0, 0, 0, 0);
-				} else {
-					altTextWrapper.setVisibility(View.GONE);
-				}
-			}
-		}
-
-		private void onShowHideClick(View v){
-			boolean show=v.getId()==R.id.alt_button || v.getId()==R.id.no_alt_button;
-
-			if(altTextShown==show)
-				return;
-			if(currentAnim!=null)
-				currentAnim.cancel();
-
-			altTextShown=show;
-			if(show){
-				altTextScroller.setVisibility(View.VISIBLE);
-				altTextClose.setVisibility(View.VISIBLE);
-			}else{
-				altOrNoAltButton.setVisibility(View.VISIBLE);
-				// Hide these views temporarily so FrameLayout measures correctly
-				altTextScroller.setVisibility(View.GONE);
-				altTextClose.setVisibility(View.GONE);
-			}
-
-			// This is the current size...
-			int prevLeft=altTextWrapper.getLeft();
-			int prevRight=altTextWrapper.getRight();
-			int prevTop=altTextWrapper.getTop();
-			altTextWrapper.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener(){
-				@Override
-				public boolean onPreDraw(){
-					altTextWrapper.getViewTreeObserver().removeOnPreDrawListener(this);
-
-					// ...and this is after the layout pass, right now the FrameLayout has its final size, but we animate that change
-					if(!show){
-						// Show these views again so they're visible for the duration of the animation.
-						// No one would notice they were missing during measure/layout.
-						altTextScroller.setVisibility(View.VISIBLE);
-						altTextClose.setVisibility(View.VISIBLE);
-					}
-					AnimatorSet set=new AnimatorSet();
-					set.playTogether(
-							ObjectAnimator.ofInt(altTextWrapper, "left", prevLeft, altTextWrapper.getLeft()),
-							ObjectAnimator.ofInt(altTextWrapper, "right", prevRight, altTextWrapper.getRight()),
-							ObjectAnimator.ofInt(altTextWrapper, "top", prevTop, altTextWrapper.getTop()),
-							ObjectAnimator.ofFloat(altOrNoAltButton, View.ALPHA, show ? 1f : 0f, show ? 0f : 1f),
-							ObjectAnimator.ofFloat(altTextScroller, View.ALPHA, show ? 0f : 1f, show ? 1f : 0f),
-							ObjectAnimator.ofFloat(altTextClose, View.ALPHA, show ? 0f : 1f, show ? 1f : 0f)
-					);
-					set.setDuration(300);
-					set.setInterpolator(CubicBezierInterpolator.DEFAULT);
-					set.addListener(new AnimatorListenerAdapter(){
-						@Override
-						public void onAnimationEnd(Animator animation){
-							if(show){
-								altOrNoAltButton.setVisibility(View.GONE);
-							}else{
-								altTextScroller.setVisibility(View.GONE);
-								altTextClose.setVisibility(View.GONE);
-							}
-							currentAnim=null;
-						}
-					});
-					set.start();
-					currentAnim=set;
-
-					return true;
-				}
-			});
 		}
 	}
 }

mastodon/src/main/res/layout/alt_badge.xml

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This is hidden from screenreaders because that same alt text is set as content description on the ImageView -->
+<FrameLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/alt_text_wrapper"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_gravity="start|bottom"
+    android:layout_margin="12dp"
+    android:importantForAccessibility="noHideDescendants"
+    android:background="@drawable/bg_image_alt_overlay">
+
+    <ImageView
+        android:id="@+id/no_alt_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:padding="4dp"
+        android:src="@drawable/ic_fluent_important_20_filled"
+        android:tint="?colorGray25" />
+
+    <TextView
+        android:id="@+id/alt_button"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textAppearance="@style/m3_label_large"
+        android:textColor="?colorGray25"
+        android:gravity="center"
+        android:includeFontPadding="false"
+        android:paddingHorizontal="5dp"
+        android:paddingVertical="1dp"
+        android:text="@string/sk_alt_button"/>
+
+    <ImageButton
+        android:id="@+id/alt_text_close"
+        android:layout_width="40dp"
+        android:layout_height="40dp"
+        android:layout_gravity="end|top"
+        android:src="@drawable/ic_baseline_close_24"
+        android:tint="#FFF"
+        android:background="?android:actionBarItemBackground"/>
+
+    <org.joinmastodon.android.ui.views.NestableScrollView
+        android:id="@+id/alt_text_scroller"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:layout_marginEnd="40dp">
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
+            <TextView
+                android:id="@+id/alt_text"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="8dp"
+                android:textAppearance="@style/m3_body_medium"
+                android:textColor="?colorGray25"
+                tools:text="Alt text goes here"/>
+
+            <TextView
+                android:id="@+id/no_alt_text"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginVertical="8dp"
+                android:layout_marginEnd="8dp"
+                android:layout_marginStart="14dp"
+                android:textAppearance="@style/m3_label_large"
+                android:textColor="?colorGray25"
+                android:text="@string/sk_no_alt_text"/>
+
+        </LinearLayout>
+
+    </org.joinmastodon.android.ui.views.NestableScrollView>
+
+</FrameLayout>

mastodon/src/main/res/layout/display_item_gifv.xml

@@ -25,4 +25,6 @@
 		android:layout_margin="8dp"
 		android:background="@drawable/ic_gif"/>
 
+	<include layout="@layout/alt_badge" />
+
 </org.joinmastodon.android.ui.views.ImageAttachmentFrameLayout>

mastodon/src/main/res/layout/display_item_photo.xml

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <org.joinmastodon.android.ui.views.ImageAttachmentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
-	xmlns:tools="http://schemas.android.com/tools"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content">
 
@@ -11,81 +10,6 @@
 		android:layout_gravity="center"
 		android:scaleType="centerCrop"/>
 
-	<!-- This is hidden from screenreaders because that same alt text is set as content description on the ImageView -->
+	<include layout="@layout/alt_badge" />
-	<FrameLayout
-		android:id="@+id/alt_text_wrapper"
-		android:layout_width="wrap_content"
-		android:layout_height="wrap_content"
-		android:layout_gravity="start|bottom"
-		android:layout_margin="12dp"
-		android:importantForAccessibility="noHideDescendants"
-		android:background="@drawable/bg_image_alt_overlay">
-
-		<ImageView
-			android:id="@+id/no_alt_button"
-			android:layout_width="wrap_content"
-			android:layout_height="wrap_content"
-			android:padding="4dp"
-			android:src="@drawable/ic_fluent_important_20_filled"
-			android:tint="?colorGray25" />
-		
-		<TextView
-			android:id="@+id/alt_button"
-			android:layout_width="wrap_content"
-			android:layout_height="wrap_content"
-			android:textAppearance="@style/m3_label_large"
-			android:textColor="?colorGray25"
-			android:gravity="center"
-			android:includeFontPadding="false"
-			android:paddingHorizontal="5dp"
-			android:paddingVertical="1dp"
-			android:text="@string/sk_alt_button"/>
-
-		<ImageButton
-			android:id="@+id/alt_text_close"
-			android:layout_width="40dp"
-			android:layout_height="40dp"
-			android:layout_gravity="end|top"
-			android:src="@drawable/ic_baseline_close_24"
-			android:tint="#FFF"
-			android:background="?android:actionBarItemBackground"/>
-
-		<org.joinmastodon.android.ui.views.NestableScrollView
-			android:id="@+id/alt_text_scroller"
-			android:layout_width="wrap_content"
-			android:layout_height="wrap_content"
-			android:layout_gravity="center_vertical"
-			android:layout_marginEnd="40dp">
-
-			<LinearLayout
-				android:layout_width="wrap_content"
-				android:layout_height="wrap_content"
-				android:orientation="vertical">
-
-				<TextView
-					android:id="@+id/alt_text"
-					android:layout_width="wrap_content"
-					android:layout_height="wrap_content"
-					android:layout_margin="8dp"
-					android:textAppearance="@style/m3_body_medium"
-					android:textColor="?colorGray25"
-					tools:text="Alt text goes here"/>
-
-				<TextView
-					android:id="@+id/no_alt_text"
-					android:layout_width="wrap_content"
-					android:layout_height="wrap_content"
-					android:layout_marginVertical="8dp"
-					android:layout_marginEnd="8dp"
-					android:layout_marginStart="14dp"
-					android:textAppearance="@style/m3_label_large"
-					android:textColor="?colorGray25"
-					android:text="@string/sk_no_alt_text"/>
-
-			</LinearLayout>
-
-		</org.joinmastodon.android.ui.views.NestableScrollView>
-		
-	</FrameLayout>
 
 </org.joinmastodon.android.ui.views.ImageAttachmentFrameLayout>

mastodon/src/main/res/layout/display_item_video.xml

@@ -18,4 +18,6 @@
 		android:elevation="3dp"
 		android:background="@drawable/play_button"/>
 
+	<include layout="@layout/alt_badge" />
+
 </org.joinmastodon.android.ui.views.ImageAttachmentFrameLayout>