Implement mediahub music player gui
authorhjjang <heonjae.jang@samsung.com>
Mon, 3 Jul 2017 08:57:54 +0000 (17:57 +0900)
committerhjjang <heonjae.jang@samsung.com>
Mon, 3 Jul 2017 08:57:54 +0000 (17:57 +0900)
Change-Id: If969abca91b1759ffcbb16203c0df6908b306c05
Signed-off-by: hjjang <heonjae.jang@samsung.com>
TVMediaHub/TVMediaHub.Tizen/Models/MusicPlayerModel.cs
TVMediaHub/TVMediaHub.Tizen/TVMediaHub.Tizen.csproj
TVMediaHub/TVMediaHub.Tizen/ViewModels/MusicPlayerViewModel.cs
TVMediaHub/TVMediaHub.Tizen/Views/MusicGroup.xaml
TVMediaHub/TVMediaHub.Tizen/Views/MusicPlayer.xaml
TVMediaHub/TVMediaHub.Tizen/Views/MusicPlayer.xaml.cs
TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml [changed mode: 0755->0644]
TVMediaHub/TVMediaHub.Tizen/Views/MusicTab.xaml.cs
TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_pause.png [new file with mode: 0644]
TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_play.png [new file with mode: 0644]
TVMediaHub/TVMediaHub.Tizen/res/img_music_list_focused_shadow.9.png [new file with mode: 0644]

index 74c1294..b38b31e 100644 (file)
@@ -32,6 +32,7 @@ namespace TVMediaHub.Tizen.Models
         public string Title;
         public string Artist;
         public string AlbumCover;
+        public string AlbumName;
     }
 
     /// <summary>
@@ -99,7 +100,7 @@ namespace TVMediaHub.Tizen.Models
                     currentMusic = value;
 
                     /// 1. Stop the player
-                    if (playerInstance.State == PlayerState.Playing)
+                    if (playerInstance.State == PlayerState.Playing || playerInstance.State == PlayerState.Paused)
                     {
                         StopPlayer();
                     }
@@ -113,6 +114,7 @@ namespace TVMediaHub.Tizen.Models
                         Title = (currentMusic.MediaContentInformation as AudioInformation).Title,
                         Artist = (currentMusic.MediaContentInformation as AudioInformation).Artist,
                         AlbumCover = ((currentMusic.MediaContentInformation as AudioInformation).ThumbnailPath.Length != 0) ? (currentMusic.MediaContentInformation as AudioInformation).ThumbnailPath : "img_media_no_contents.png",
+                        AlbumName = (currentMusic.MediaContentInformation as AudioInformation).Album
                     });
 
                     /// 4. Update the progressbar of the current music
@@ -151,7 +153,6 @@ namespace TVMediaHub.Tizen.Models
         private void InitializePlayer()
         {
             playerInstance = new Player();
-
             playerInstance.PlaybackCompleted += ((s, e) =>
             {
                 StopPlayer();
@@ -222,6 +223,37 @@ namespace TVMediaHub.Tizen.Models
         }
 
         /// <summary>
+        /// Toggles pause and play the current music
+        /// </summary>
+        public void TogglePausePlay()
+        {
+            if (playerInstance.State == PlayerState.Playing)
+            {
+                try
+                {
+                    playerInstance.Pause();
+                }
+                catch (Exception e)
+                {
+                    DbgPort.E("Error : " + e.Message);
+                }
+                StopProgressbarTimer();
+            }
+            else if (playerInstance.State == PlayerState.Paused)
+            {
+                try
+                {
+                    playerInstance.Start();
+                }
+                catch (Exception e)
+                {
+                    DbgPort.E("Error : " + e.Message);
+                }
+                StartProgressbarTimer();
+            }
+        }
+
+        /// <summary>
         /// Stops the current music
         /// </summary>
         public void StopPlayer()
index 3f8a617..edff850 100755 (executable)
     <Content Include="res\btn_media_select_pre.9.png" />
     <Content Include="res\btn_media_unselect_check_bk.png" />
     <Content Include="res\btn_media_unselect_check_wh.png" />
+    <Content Include="res\btn_music_info_pause.png" />
+    <Content Include="res\btn_music_info_play.png" />
     <Content Include="res\btn_viewer_control_focused.png" />
     <Content Include="res\btn_viewer_control_forward_normal.png" />
     <Content Include="res\btn_viewer_control_forward_pressed.png" />
     <Content Include="res\img_gradient_topbottom.9.png" />
     <Content Include="res\img_media_no_contents.png" />
     <Content Include="res\img_movie_unavailable.png" />
+    <Content Include="res\img_music_list_focused_shadow.9.png" />
     <Content Include="res\img_photozoom_gradient.9.png" />
     <Content Include="res\img_stroke.9.png" />
     <Content Include="res\img_stroke2.9.png" />
       </FlavorProperties>
     </VisualStudio>
   </ProjectExtensions>
-</Project>
+</Project>
\ No newline at end of file
index b4d39d9..ee9d2d6 100644 (file)
@@ -16,6 +16,7 @@
 
 using System.ComponentModel;
 using TVMediaHub.Tizen.Models;
+using Xamarin.Forms;
 
 namespace TVMediaHub.Tizen.ViewModels
 {
@@ -40,10 +41,17 @@ namespace TVMediaHub.Tizen.ViewModels
         public string AlbumArtist { get; private set; }
 
         /// <summary>
+        /// The album name to be shown
+        /// </summary>
+        public string AlbumName { get; private set; }
+
+        /// <summary>
         /// The album cover to be shown
         /// </summary>
         public string AlbumCover { get; private set; }
 
+        public Command MusicPlayerButtonClickCommand { get; private set; }
+
         /// <summary>
         /// An event that is occurred when property of ViewModel is changed
         /// </summary>
@@ -71,6 +79,12 @@ namespace TVMediaHub.Tizen.ViewModels
             AlbumTitle = "Title";
             AlbumArtist = "Artist";
             AlbumCover = "img_media_no_contents.png";
+            AlbumName = "Album";
+
+            MusicPlayerButtonClickCommand = new Command(() =>
+            {
+                MusicPlayerModel.Instance.TogglePausePlay();
+            });
 
             MusicPlayerModel.Instance.SetCurrentMusicInfoListener((e, args) =>
             {
@@ -87,6 +101,9 @@ namespace TVMediaHub.Tizen.ViewModels
 
                 AlbumCover = args.AlbumCover;
                 OnPropertyChanged("AlbumCover");
+
+                AlbumName = args.AlbumName;
+                OnPropertyChanged("AlbumName");
             });
 
             MusicPlayerModel.Instance.SetCurrentMusicProgressListener((e, arg) =>
index 1b9dbad..34277cc 100644 (file)
@@ -11,6 +11,6 @@
 
     <Grid x:Name="GroupContentArea"
           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.926}"
-          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.085}">
-    </Grid>
+          RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.0737}">
+        </Grid>
 </RelativeLayout>
\ No newline at end of file
index 3667788..ca8f177 100644 (file)
@@ -1,18 +1,26 @@
 <?xml version="1.0" encoding="utf-8" ?>
-<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
-                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-                  x:Class="TVMediaHub.Tizen.Views.MusicPlayer">
+<RelativeLayout xmlns="http://xamarin.com/schemas/2014/forms"
+                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+                xmlns:Utils="clr-namespace:TVMediaHub.Tizen.Utils"
+                x:Class="TVMediaHub.Tizen.Views.MusicPlayer">
+    <Utils:NinePatch x:Name="MusicPlayerShadowImage"
+           Source="img_music_list_focused_shadow.9.png" />    
     <Image x:Name="MusicPlayerAlbumArt"
-           Source="{Binding AlbumCover}"
-           WidthRequest="300"
-           HeightRequest="300"
-           HorizontalOptions="Center"/>
+           Source="{Binding AlbumCover}" />
+    <Image x:Name="MusicPlayerPausePlayButton"
+           Source="btn_music_info_play.png" />
+    <Button x:Name="MusicPlayerFocusArea"
+            Command="{Binding MusicPlayerButtonClickCommand}"
+            Focused="MusicPlayerFocusAreaFocused"
+            Unfocused="MusicPlayerFocusAreaUnfocused"
+            Opacity="0"/>
     <Label x:Name="MusicPlayerTitle"
            Text="{Binding AlbumTitle}"
-           HorizontalOptions="Center"/>
+           LineBreakMode="TailTruncation" />
     <Label x:Name="MusicPlayerArtist"
            Text="{Binding AlbumArtist}"
-           HorizontalOptions="Center"/>
-    <ProgressBar x:Name="MusicPlayerProgressbar"
-                 Progress="{Binding ProgressBarPercentage}"/>
-</StackLayout>
\ No newline at end of file
+           LineBreakMode="TailTruncation" />
+    <Label x:Name="MusicPlayerAlbum"
+           Text="{Binding AlbumName}"
+           LineBreakMode="TailTruncation" />
+</RelativeLayout>
\ No newline at end of file
index 008a402..8c20801 100644 (file)
@@ -14,6 +14,9 @@
 * limitations under the License.
 */
 
+using System;
+using Tizen.Xamarin.Forms.Extension;
+using TVMediaHub.Tizen.Utils;
 using TVMediaHub.Tizen.ViewModels;
 using Xamarin.Forms;
 
@@ -22,16 +25,91 @@ namespace TVMediaHub.Tizen.Views
     /// <summary>
     /// A custom ContentPage for displaying the music player
     /// </summary>
-    public partial class MusicPlayer : StackLayout
+    public partial class MusicPlayer : RelativeLayout
     {
+        private bool IsInitailized;
+        private Rectangle ShadowImageFocusedBounds;
+        private Rectangle ShadowImageNormalBounds;
+
+        private Rectangle AlbumImageFocusedBounds;
+        private Rectangle AlbumImageNormalBounds;
+
+        private Rectangle PausePlayButtonBounds;
+
+        private Rectangle TitleBounds;
+        private Rectangle ArtistBounds;
+        private Rectangle AlbumNameBounds;
+
         /// <summary>
         /// A constructor
         /// </summary>
         public MusicPlayer()
         {
             BindingContext = MusicPlayerViewModelLocator.ViewModel;
-
+            IsInitailized = false;
             InitializeComponent();
+            InitializeSize();
+        }
+
+        private void MusicPlayerFocusAreaFocused(object sender, FocusEventArgs e)
+        {
+            MusicPlayerShadowImage.LayoutTo(ShadowImageFocusedBounds);
+            MusicPlayerAlbumArt.LayoutTo(AlbumImageFocusedBounds);
+        }
+
+        private void MusicPlayerFocusAreaUnfocused(object sender, FocusEventArgs e)
+        {
+            MusicPlayerShadowImage.LayoutTo(ShadowImageNormalBounds);
+            MusicPlayerAlbumArt.LayoutTo(AlbumImageNormalBounds);
+        }
+
+        private void InitializeSize()
+        {
+            WidthRequest = SizeUtils.GetWidthSize(546);
+            HeightRequest = SizeUtils.GetHeightSize(546);
+            Margin = new Thickness(SizeUtils.GetWidthSize(-14), SizeUtils.GetHeightSize(-14), 0, 0);
+
+
+            MusicPlayerShadowImage.BorderTop = SizeUtils.GetHeightSize(67);
+            MusicPlayerShadowImage.BorderBottom = SizeUtils.GetHeightSize(67);
+            MusicPlayerShadowImage.BorderLeft = SizeUtils.GetWidthSize(67);
+            MusicPlayerShadowImage.BorderRight = SizeUtils.GetWidthSize(67);
+
+            ShadowImageFocusedBounds = new Rectangle(0, 0, SizeUtils.GetWidthSize(546), SizeUtils.GetHeightSize(546));
+            ShadowImageNormalBounds = new Rectangle(SizeUtils.GetWidthSize(6), SizeUtils.GetHeightSize(6), SizeUtils.GetWidthSize(532), SizeUtils.GetHeightSize(532));
+
+            AlbumImageFocusedBounds = new Rectangle(SizeUtils.GetWidthSize(64), SizeUtils.GetHeightSize(64), SizeUtils.GetWidthSize(418), SizeUtils.GetHeightSize(418));
+            AlbumImageNormalBounds = new Rectangle(SizeUtils.GetWidthSize(70), SizeUtils.GetHeightSize(70), SizeUtils.GetWidthSize(406), SizeUtils.GetHeightSize(406));
+
+            PausePlayButtonBounds = new Rectangle(SizeUtils.GetWidthSize(223), SizeUtils.GetHeightSize(223), SizeUtils.GetWidthSize(100), SizeUtils.GetHeightSize(100));
+
+            TitleBounds = new Rectangle(SizeUtils.GetWidthSize(72), SizeUtils.GetHeightSize(498), SizeUtils.GetWidthSize(406), SizeUtils.GetHeightSize(32));
+            ArtistBounds = new Rectangle(SizeUtils.GetWidthSize(72), SizeUtils.GetHeightSize(542), SizeUtils.GetWidthSize(418), SizeUtils.GetHeightSize(28));
+            AlbumNameBounds = new Rectangle(SizeUtils.GetWidthSize(72), SizeUtils.GetHeightSize(572), SizeUtils.GetWidthSize(418), SizeUtils.GetHeightSize(28));
+
+            MusicPlayerTitle.FontSize = SizeUtils.GetFontSize(28);
+
+            MusicPlayerArtist.FontSize = SizeUtils.GetFontSize(24);
+            MusicPlayerArtist.Opacity = 0.5;
+
+            MusicPlayerAlbum.FontSize = SizeUtils.GetFontSize(24);
+            MusicPlayerAlbum.Opacity = 0.25;
+        }
+
+        protected override void LayoutChildren(double x, double y, double width, double height)
+        {
+            if (IsInitailized == false)
+            {
+                base.LayoutChildren(x, y, width, height);
+                MusicPlayerAlbumArt.Layout(AlbumImageNormalBounds);
+                MusicPlayerTitle.Layout(TitleBounds);
+                MusicPlayerArtist.Layout(ArtistBounds);
+                MusicPlayerAlbum.Layout(AlbumNameBounds);
+                MusicPlayerShadowImage.Layout(ShadowImageNormalBounds);
+                MusicPlayerPausePlayButton.Layout(PausePlayButtonBounds);
+                MusicPlayerFocusArea.Layout(PausePlayButtonBounds);
+                IsInitailized = true;
+            }
         }
     }
 }
old mode 100755 (executable)
new mode 100644 (file)
index 445a45d..c1fdee6
                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
         <RelativeLayout RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
-            <Views:FooterDeleteStatus x:Name="FooterDelete" IsVisible="False"
+            <Views:FooterDeleteStatus x:Name="FooterDelete"
+                                      IsVisible="False"
                                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
-                                      SelectedCount="{Binding SelectedCount}"/>
-            <Views:FooterNormalStatus x:Name="FooterNormal"  IsVisible="True"
+                                      SelectedCount="{Binding SelectedCount}" />
+            <Views:FooterNormalStatus x:Name="FooterNormal"
+                                      IsVisible="True"
                                       IsFooterEnabled="True"
                                       RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}"
                                       RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
                                       SourceList="{Binding SourceList}"
                                       SortOptions="{Binding SortOptions}"
-                                      OptionList="{Binding OptionList}"/>
+                                      OptionList="{Binding OptionList}" />
         </RelativeLayout>
-        <Views:MusicPlayer x:Name="MusicPlayer"
-                           RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.855}"
-                           RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.3}"
-                           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.0}">
-        </Views:MusicPlayer>
-        <ScrollView x:Name="MusicTabScrollView"
-                    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.8545}"
-                    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.7386}"
-                    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.2614}"
-                    Orientation="Horizontal" IsVisible="False">
-            <StackLayout x:Name="MusicContentView"
-                         Orientation="Horizontal"
-                         HorizontalOptions="Start"
-                         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}">
-            </StackLayout>
-        </ScrollView>
-        <StackLayout x:Name="MusicNoContents" Orientation="Vertical" IsVisible="True"
+        
+        <StackLayout x:Name="MusicTabContents"
+                     RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.855}"
+                     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}"
+                     Orientation="Horizontal">
+            <Views:MusicPlayer x:Name="MusicPlayer" />            
+            <ScrollView x:Name="MusicTabScrollView"
+                        Orientation="Horizontal"
+                        IsVisible="False">
+                <StackLayout x:Name="MusicContentView"
+                             Orientation="Horizontal"
+                             HorizontalOptions="Start"
+                             RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.1}">
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout x:Name="MusicNoContents"
+                     Orientation="Vertical"
+                     IsVisible="True"
                      RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}">
-            <Image x:Name="ImgNoContents" Source="img_media_no_contents.png" HorizontalOptions="Center"/>
-            <Label x:Name="LabelNoContents" Text="No content" FontFamily="BreezeSans" HorizontalOptions="Center"/>
+            <Image x:Name="ImgNoContents"
+                   Source="img_media_no_contents.png"
+                   HorizontalOptions="Center" />
+            <Label x:Name="LabelNoContents"
+                   Text="No content"
+                   FontFamily="BreezeSans"
+                   HorizontalOptions="Center" />
         </StackLayout>
     </RelativeLayout>
 </mh:ContentPageEx>
\ No newline at end of file
index c89ba88..7b3d946 100755 (executable)
  * limitations under the License.
  */
 
-using System;
 using System.Collections.ObjectModel;
 using System.Collections.Specialized;
-using System.ComponentModel;
-using System.Threading;
 using System.Windows.Input;
 using TVMediaHub.Tizen.Controls;
 using TVMediaHub.Tizen.DataModels;
@@ -122,8 +119,8 @@ namespace TVMediaHub.Tizen.Views
             ImgNoContents.WidthRequest = SizeUtils.GetWidthSize(68);
             LabelNoContents.HeightRequest = SizeUtils.GetHeightSize(32);
             LabelNoContents.FontSize = SizeUtils.GetFontSize(28);
-            MusicContentView.Padding = new Thickness(0, SizeUtils.GetHeightSize(74));
             MusicContentView.Spacing = SizeUtils.GetWidthSize(60);
+            MusicTabContents.Padding = new Thickness(0, SizeUtils.GetHeightSize(74), 0, 0);
         }
 
         /// <summary>
@@ -222,7 +219,7 @@ namespace TVMediaHub.Tizen.Views
         /// <param name="e">A SelectedItemChanged event's argument</param>
         private void OnSourceChanged(object sender, SelectedItemChangedEventArgs e)
         {
-            String storageName = e.SelectedItem as String;
+            string storageName = e.SelectedItem as string;
 
             //BottomButtonList.Clear();
             ChangeSourceCommand?.Execute(storageName);
diff --git a/TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_pause.png b/TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_pause.png
new file mode 100644 (file)
index 0000000..f73f5c8
Binary files /dev/null and b/TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_pause.png differ
diff --git a/TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_play.png b/TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_play.png
new file mode 100644 (file)
index 0000000..9380081
Binary files /dev/null and b/TVMediaHub/TVMediaHub.Tizen/res/btn_music_info_play.png differ
diff --git a/TVMediaHub/TVMediaHub.Tizen/res/img_music_list_focused_shadow.9.png b/TVMediaHub/TVMediaHub.Tizen/res/img_music_list_focused_shadow.9.png
new file mode 100644 (file)
index 0000000..93ba39d
Binary files /dev/null and b/TVMediaHub/TVMediaHub.Tizen/res/img_music_list_focused_shadow.9.png differ