Merge pull request #3182 from owncloud/feature/styled_player_view

improve music player design
owncloud · Apr 14, 2021 · 77f54e8 · 77f54e8
2 parents e010305 + 3820d05
commit 77f54e8
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ Summary
 -------
 
 * Bugfix - Fix navbar is visible in file preview screen after rotation: [#3184](https://github.com/owncloud/android/pull/3184)
+* Enhancement - Replace blank view in music player with cover art: [#3121](https://github.com/owncloud/android/issues/3121)
 * Enhancement - Support for apk files: [#2691](https://github.com/owncloud/android/issues/2691)
 * Enhancement - Align previews actions: [#3155](https://github.com/owncloud/android/issues/3155)
 
@@ -23,6 +24,14 @@ Details
    https://github.com/owncloud/android/issues/3139
    https://github.com/owncloud/android/pull/3184
 
+* Enhancement - Replace blank view in music player with cover art: [#3121](https://github.com/owncloud/android/issues/3121)
+
+   We replaced the blank view in the music preview player with styled up cover art. For music files
+   that does not have cover art embodied we made it display a place holder.
+
+   https://github.com/owncloud/android/issues/3121
+   https://github.com/owncloud/android/pull/3182
+
 * Enhancement - Support for apk files: [#2691](https://github.com/owncloud/android/issues/2691)
 
    Apk files could be installed from the app after being downloaded. Installation process will be

diff --git a/changelog/unreleased/3121 b/changelog/unreleased/3121
@@ -0,0 +1,6 @@
+Enhancement: Replace blank view in music player with cover art
+
+We replaced the blank view in the music preview player with styled up cover art.
+For music files that does not have cover art embodied we made it display a place holder.
+
+https://github.com/owncloud/android/issues/3121 https://github.com/owncloud/android/pull/3182
diff --git a/owncloudApp/src/main/java/com/owncloud/android/ui/preview/PreviewAudioFragment.java b/owncloudApp/src/main/java/com/owncloud/android/ui/preview/PreviewAudioFragment.java
@@ -218,10 +218,10 @@ private void extractAndSetCoverArt(OCFile file) {
                 Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
                 mImagePreview.setImageBitmap(bitmap); //associated cover art in bitmap
             } else {
-                mImagePreview.setImageResource(R.drawable.logo);
+                mImagePreview.setImageResource(R.drawable.ic_place_holder_music_cover_art);
             }
         } catch (Throwable t) {
-            mImagePreview.setImageResource(R.drawable.logo);
+            mImagePreview.setImageResource(R.drawable.ic_place_holder_music_cover_art);
         }
     }
 

diff --git a/owncloudApp/src/main/res/drawable/ic_place_holder_music_cover_art.xml b/owncloudApp/src/main/res/drawable/ic_place_holder_music_cover_art.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="200"
+    android:viewportHeight="200">
+  <path
+      android:pathData="M0,0h200v200h-200z"
+      android:strokeWidth="3.81912"
+      android:fillColor="@color/primary"
+      android:strokeColor="@color/primary"/>
+  <path
+      android:pathData="m78.094,58.945v47.641c-2.664,-1.535 -5.735,-2.484 -9.031,-2.484 -9.98,0 -18.063,8.083 -18.063,18.063 0,9.98 8.083,18.063 18.063,18.063 9.98,0 18.063,-8.083 18.063,-18.063V77.008c14.948,0 29.895,0 44.843,0V107.413c-2.664,-1.535 -5.735,-2.484 -9.031,-2.484 -9.98,0 -18.063,8.083 -18.063,18.063 0,9.98 8.083,18.063 18.063,18.063 9.98,0 18.063,-8.083 18.063,-18.063V58.945c-20.969,0 -41.937,0 -62.906,0z"
+      android:strokeWidth="4.516"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/owncloudApp/src/main/res/drawable/ic_place_holder_music_cover_art_overlay.xml b/owncloudApp/src/main/res/drawable/ic_place_holder_music_cover_art_overlay.xml
@@ -0,0 +1,26 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="200dp"
+    android:height="200dp"
+    android:viewportWidth="200"
+    android:viewportHeight="200">
+  <path
+      android:pathData="M0,0 L200,200V0Z"
+      android:strokeAlpha="0.43137255"
+      android:strokeLineJoin="miter"
+      android:strokeWidth="1"
+      android:strokeLineCap="butt">
+    <aapt:attr name="android:fillColor">
+      <gradient
+          android:type="linear"
+          android:angle="0"
+          android:startX="0"
+          android:startY="0"
+          android:startColor="#6effffff"
+          android:endX="100"
+          android:endY="100"
+          android:endColor="#00ffffff"
+          />
+    </aapt:attr>
+  </path>
+</vector>
diff --git a/owncloudApp/src/main/res/layout/preview_audio_fragment.xml b/owncloudApp/src/main/res/layout/preview_audio_fragment.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="utf-8"?><!--
   ownCloud Android client application
 
-  Copyright (C) 2020 ownCloud GmbH.
-  
+  Copyright (C) 2021 ownCloud GmbH.
+
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU General Public License version 2,
   as published by the Free Software Foundation.
@@ -14,47 +14,59 @@
 
   You should have received a copy of the GNU General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  
+
 -->
 
-<RelativeLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/top"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:gravity="center"
-    tools:context=".ui.preview.PreviewAudioFragment"
     android:filterTouchesWhenObscured="true">
 
     <FrameLayout
         android:id="@+id/visual_area"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="0dp"
-        android:layout_alignParentTop="true"
-        android:layout_above="@+id/media_controller"
-        >
+        android:padding="30dp"
+        app:layout_constraintDimensionRatio="1:1"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/media_controller"
+        android:elevation="16dp"
+        android:outlineProvider="paddedBounds"
+        android:clipToPadding="false">
 
         <ImageView
             android:id="@+id/image_preview"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:layout_margin="@dimen/standard_margin"
-            android:layout_gravity="center"
             android:contentDescription="@string/preview_image_description"
-            android:src="@drawable/logo" />
+            android:scaleType="centerCrop"
+            android:src="@drawable/ic_place_holder_music_cover_art"
+            app:layout_constraintBottom_toBottomOf="parent" />
+
+        <ImageView
+            android:id="@+id/image_preview_overlay"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:contentDescription="@string/preview_image_description"
+            android:scaleType="centerCrop"
+            android:src="@drawable/ic_place_holder_music_cover_art_overlay" />
 
     </FrameLayout>
 
+    <!-- last to draw, will be top in Z axis -->
     <com.owncloud.android.media.MediaControlView
-        android:id="@id/media_controller"
+        android:id="@+id/media_controller"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_margin="16dp"
-        />
+        app:layout_constraintBottom_toBottomOf="parent" />
 
-    <!-- last to draw, will be top in Z axis -->
     <include layout="@layout/top_progress_bar" />
 
-</RelativeLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>