PreviewVideoActivity: improve button UX

 - Add ripple on button click
 - Only show play OR pause button depending on playback state

Signed-off-by: Álvaro Brey Vilas <alvaro.brey@nextcloud.com>

src/main/java/com/owncloud/android/ui/preview/PreviewVideoActivity.kt

@@ -30,6 +30,7 @@ import android.view.View
 import androidx.appcompat.app.AlertDialog
 import com.google.android.exoplayer2.ExoPlayer
 import com.google.android.exoplayer2.MediaItem
+import com.google.android.exoplayer2.Player
 import com.nextcloud.client.media.ErrorFormat.toString
 import com.owncloud.android.R
 import com.owncloud.android.databinding.ActivityPreviewVideoBinding
@@ -41,12 +42,15 @@ import com.owncloud.android.utils.MimeTypeUtil
 /**
  * Activity implementing a basic video player.
  *
- * Used as an utility to preview video files contained in an ownCloud account.
- *
- * Currently, it always plays in landscape mode, full screen. When the playback ends,
- * the activity is finished.
+ * THIS CLASS NEEDS WORK; the old listeners (OnCompletion, OnPrepared; OnError) don't work with ExoPlayer
  */
-class PreviewVideoActivity : FileActivity(), OnCompletionListener, OnPreparedListener, MediaPlayer.OnErrorListener {
+@Suppress("TooManyFunctions")
+class PreviewVideoActivity :
+    FileActivity(),
+    OnCompletionListener,
+    OnPreparedListener,
+    MediaPlayer.OnErrorListener,
+    Player.Listener {
 
     private var mSavedPlaybackPosition: Long = -1 // in the unit time handled by MediaPlayer.getCurrentPosition()
     private var mAutoplay = false // when 'true', the playback starts immediately with the activity
@@ -54,6 +58,10 @@ class PreviewVideoActivity : FileActivity(), OnCompletionListener, OnPreparedLis
     private var mStreamUri: Uri? = null
     private lateinit var binding: ActivityPreviewVideoBinding
 
+    private lateinit var pauseButton: View
+
+    private lateinit var playButton: View
+
     public override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         Log_OC.v(TAG, "onCreate")
@@ -75,10 +83,15 @@ class PreviewVideoActivity : FileActivity(), OnCompletionListener, OnPreparedLis
 
         exoPlayer = ExoPlayer.Builder(this).build()
         binding.videoPlayer.player = exoPlayer
+        exoPlayer!!.addListener(this)
 
         binding.root.findViewById<View>(R.id.exo_exit_fs).setOnClickListener { onBackPressed() }
-        binding.root.findViewById<View>(R.id.exo_pause).setOnClickListener { exoPlayer!!.pause() }
-        binding.root.findViewById<View>(R.id.exo_play).setOnClickListener { exoPlayer!!.play() }
+
+        pauseButton = binding.root.findViewById(R.id.exo_pause)
+        pauseButton.setOnClickListener { exoPlayer!!.pause() }
+
+        playButton = binding.root.findViewById(R.id.exo_play)
+        playButton.setOnClickListener { exoPlayer!!.play() }
 
         if (mSavedPlaybackPosition >= 0) {
             exoPlayer?.seekTo(mSavedPlaybackPosition)
@@ -87,6 +100,17 @@ class PreviewVideoActivity : FileActivity(), OnCompletionListener, OnPreparedLis
         supportActionBar?.hide()
     }
 
+    override fun onIsPlayingChanged(isPlaying: Boolean) {
+        super.onIsPlayingChanged(isPlaying)
+        if (isPlaying) {
+            playButton.visibility = View.GONE
+            pauseButton.visibility = View.VISIBLE
+        } else {
+            playButton.visibility = View.VISIBLE
+            pauseButton.visibility = View.GONE
+        }
+    }
+
     /**
      * {@inheritDoc}
      */

src/main/res/drawable/ripple.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Nextcloud Android client application
+  ~
+  ~ @author Álvaro Brey Vilas
+  ~ Copyright (C) 2022 Álvaro Brey Vilas
+  ~ Copyright (C) 2022 Nextcloud GmbH
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+<ripple xmlns:android="http://schemas.android.com/apk/res/android"
+    android:color="@color/grey_200">
+    <item android:id="@android:id/mask">
+        <shape android:shape="oval">
+            <solid android:color="?android:colorPrimary" />
+        </shape>
+        <color android:color="@color/white" />
+    </item>
+</ripple>

src/main/res/layout/exo_player_control_view.xml

@@ -31,33 +31,41 @@
 
         <ImageButton
             android:id="@id/exo_prev"
-            style="@style/ExoMediaButton.Previous"
-            android:foreground="?attr/selectableItemBackgroundBorderless" />
+            style="@style/FullScreenExoControlButton"
+            android:background="?attr/selectableItemBackgroundBorderless"
+            android:src="@drawable/exo_controls_previous" />
 
         <ImageButton
             android:id="@id/exo_rew"
-            style="@style/ExoMediaButton.Rewind"
-            android:foreground="?attr/selectableItemBackgroundBorderless" />
+            style="@style/FullScreenExoControlButton"
+            android:contentDescription="@string/exo_controls_rewind_description"
+            android:src="@drawable/exo_controls_rewind" />
 
         <ImageButton
             android:id="@id/exo_play"
-            style="@style/ExoMediaButton.Play"
-            android:foreground="?attr/selectableItemBackgroundBorderless" />
+            style="@style/FullScreenExoControlButton"
+            android:contentDescription="@string/exo_controls_play_description"
+            android:src="@drawable/exo_controls_play"
+            android:visibility="gone"
+            tools:visibility="visible" />
 
         <ImageButton
             android:id="@id/exo_pause"
-            style="@style/ExoMediaButton.Pause"
-            android:foreground="?attr/selectableItemBackgroundBorderless" />
+            style="@style/FullScreenExoControlButton"
+            android:contentDescription="@string/exo_controls_pause_description"
+            android:src="@drawable/exo_controls_pause" />
 
         <ImageButton
             android:id="@id/exo_ffwd"
-            style="@style/ExoMediaButton.FastForward"
-            android:foreground="?attr/selectableItemBackgroundBorderless" />
+            style="@style/FullScreenExoControlButton"
+            android:contentDescription="@string/exo_controls_fastforward_description"
+            android:src="@drawable/exo_controls_fastforward" />
 
         <ImageButton
             android:id="@+id/exo_exit_fs"
-            style="@style/ExoMediaButton.ExitFullscreen"
-            android:foreground="?attr/selectableItemBackgroundBorderless" />
+            style="@style/FullScreenExoControlButton"
+            android:contentDescription="@string/exo_controls_fullscreen_exit_description"
+            android:src="@drawable/exo_styled_controls_fullscreen_exit" />
 
     </LinearLayout>
 

src/main/res/values/styles.xml

@@ -435,9 +435,8 @@
         <item name="android:textStyle">bold</item>
     </style>
 
-    <style name="ExoMediaButton.ExitFullscreen" parent="ExoStyledControls.Button.Center">
-        <item name="android:src">@drawable/exo_styled_controls_fullscreen_exit</item>
-        <item name="android:contentDescription">@string/exo_controls_fullscreen_exit_description</item>
-        <item name="android:padding">@dimen/exo_icon_padding</item>
+    <style name="FullScreenExoControlButton" parent="ExoStyledControls.Button.Center">
+        <item name="android:background">@drawable/ripple</item>
     </style>
+
 </resources>