Use labels stacking to build playlist

4 files changed, 176 insertions, 75 deletions

diff --git a/music_sampler/app.py b/music_sampler/app.py
index 81c47a7..510cb44 100644
--- a/music_sampler/app.py
+++ b/music_sampler/app.py
@@ -1,4 +1,4 @@
-from .helpers import parse_args, register_fonts, duration_to_min_sec, path
+from .helpers import parse_args, register_fonts, path
 
 parse_args()
 
@@ -6,9 +6,9 @@ import kivy
 kivy.require("1.9.1")
 from kivy.app import App
 from kivy.uix.floatlayout import FloatLayout
+from kivy.uix.stacklayout import StackLayout
 from kivy.uix.relativelayout import RelativeLayout
 from kivy.properties import ListProperty, StringProperty
-from kivy.clock import Clock
 from kivy.core.window import Window
 from kivy.lang import Builder
 from .key import Key
@@ -16,6 +16,8 @@ from .mapping import Mapping
 
 register_fonts()
 
+from .app_blocks.playlist import *
+
 class KeyList(RelativeLayout):
     keylist = ListProperty([])
     first_key = StringProperty("")
@@ -33,33 +35,6 @@ class KeyList(RelativeLayout):
         if len(self.keylist) > 2:
             self.third_key  = self.keylist[2]
 
-class PlayList(RelativeLayout):
-    playlist = ListProperty([])
-
-    def __init__(self, **kwargs):
-        super(PlayList, self).__init__(**kwargs)
-        Clock.schedule_interval(self.update_playlist, 0.5)
-
-    def update_playlist(self, dt):
-        if self.parent is None or 'Mapping' not in self.parent.ids:
-            return True
-
-        open_files = self.parent.ids['Mapping'].open_files
-        self.playlist = []
-        for music_file in open_files.values():
-            if not music_file.is_in_use():
-                continue
-
-            text = "{}/{}".format(
-                    duration_to_min_sec(music_file.sound_position),
-                    duration_to_min_sec(music_file.sound_duration))
-
-            if music_file.is_loaded_paused():
-                self.playlist.append(["⏸", music_file.name, text, False])
-            else:
-                self.playlist.append(["⏵", music_file.name, text, True])
-
-
 class ActionList(RelativeLayout):
     action_title = StringProperty("")
     action_list = ListProperty([])
diff --git a/music_sampler/app_blocks/__init__.py b/music_sampler/app_blocks/__init__.py
new file mode 100644
index 0000000..c412eb1
--- /dev/null
+++ b/music_sampler/app_blocks/__init__.py
@@ -0,0 +1 @@
+from . import playlist
diff --git a/music_sampler/app_blocks/playlist.py b/music_sampler/app_blocks/playlist.py
new file mode 100644
index 0000000..b704d4d
--- /dev/null
+++ b/music_sampler/app_blocks/playlist.py
@@ -0,0 +1,125 @@
+from kivy.uix.label import Label
+from kivy.uix.stacklayout import StackLayout
+from kivy.uix.relativelayout import RelativeLayout
+from kivy.properties import ListProperty
+from kivy.clock import Clock
+from ..helpers import duration_to_min_sec
+
+import math
+
+__all__ = ["PlayList",
+        "PlayListIcons", "PlayListIcon",
+        "PlayListNames", "PlayListName",
+        "PlayListTimes", "PlayListTime"]
+
+class PlayList(RelativeLayout):
+    playlist = ListProperty([])
+
+    def __init__(self, **kwargs):
+        super(PlayList, self).__init__(**kwargs)
+        Clock.schedule_interval(self.update_playlist, 0.5)
+
+    def update_playlist(self, dt):
+        if self.parent is None or 'Mapping' not in self.parent.ids:
+            return True
+
+        open_files = self.parent.ids['Mapping'].open_files
+        playlist = []
+        for music_file in open_files.values():
+            if not music_file.is_in_use():
+                continue
+
+            time_info = "{}/{}".format(
+                    duration_to_min_sec(music_file.sound_position),
+                    duration_to_min_sec(music_file.sound_duration))
+
+            if music_file.is_loaded_paused():
+                playlist.append(["⏸", music_file.name, time_info, False])
+            else:
+                playlist.append(["⏵", music_file.name, time_info, True])
+        self.playlist = playlist
+
+
+class PlayListIcons(StackLayout):
+    def __init__(self, **kwargs):
+        super(PlayListIcons, self).__init__(**kwargs)
+        self.icons = []
+
+    def on_parent(self, instance, parent):
+        parent.bind(playlist=self.update_playlist_icons)
+
+    def update_playlist_icons(self, instance, playlist):
+        for icon in self.icons:
+            self.remove_widget(icon)
+        self.icons = []
+        for icon, filename, time_info, playing in playlist:
+            icon_label = PlayListIcon(text=icon)
+            self.add_widget(icon_label)
+            self.icons.append(icon_label)
+
+class PlayListIcon(Label):
+    def __init__(self, text='', **kwargs):
+        super(PlayListIcon, self).__init__(**kwargs)
+        self.text = text
+
+    def on_parent(self, instance, parent):
+        if parent is not None:
+            self.font_size = math.ceil(2 * math.sqrt(parent.parent.parent.key_size))
+            self.height = parent.parent.labels_height
+
+
+class PlayListNames(StackLayout):
+    def __init__(self, **kwargs):
+        super(PlayListNames, self).__init__(**kwargs)
+        self.names = []
+
+    def on_parent(self, instance, parent):
+        parent.bind(playlist=self.update_playlist_names)
+
+    def update_playlist_names(self, instance, playlist):
+        for name in self.names:
+            self.remove_widget(name)
+        self.names = []
+        for icon, filename, time_info, playing in playlist:
+            name_label = PlayListName(text=filename, is_playing=playing)
+            self.add_widget(name_label)
+            self.names.append(name_label)
+
+class PlayListName(Label):
+    def __init__(self, text='', is_playing=False, **kwargs):
+        super(PlayListName, self).__init__(**kwargs)
+        self.text = text
+        self.bold = is_playing
+
+    def on_parent(self, instance, parent):
+        if parent is not None:
+            self.font_size = math.ceil(2 * math.sqrt(parent.parent.parent.key_size))
+            self.height = parent.parent.labels_height
+
+class PlayListTimes(StackLayout):
+    def __init__(self, **kwargs):
+        super(PlayListTimes, self).__init__(**kwargs)
+        self.times = []
+
+    def on_parent(self, instance, parent):
+        parent.bind(playlist=self.update_playlist_times)
+
+    def update_playlist_times(self, instance, playlist):
+        for time in self.times:
+            self.remove_widget(time)
+        self.times = []
+        for icon, filename, time_info, playing in playlist:
+            time_label = PlayListTime(text=time_info)
+            self.add_widget(time_label)
+            self.times.append(time_label)
+
+class PlayListTime(Label):
+    def __init__(self, text='', **kwargs):
+        super(PlayListTime, self).__init__(**kwargs)
+        self.text = text
+
+    def on_parent(self, instance, parent):
+        if parent is not None:
+            self.font_size = math.ceil(2 * math.sqrt(parent.parent.parent.key_size))
+            self.height = parent.parent.labels_height
+
diff --git a/music_sampler/music_sampler.kv b/music_sampler/music_sampler.kv
index 9057532..8e94da8 100644
--- a/music_sampler/music_sampler.kv
+++ b/music_sampler/music_sampler.kv
@@ -105,14 +105,16 @@
   action_list_y: self.border
 
   play_list_height: self.action_list_height
-  play_list_width: self.width - self.action_list_width - 3* self.border
+  play_list_width: self.width - self.key_list_width - self.action_list_width - 4* self.border
   play_list_y: self.border
   play_list_x: self.action_list_width + self.key_list_width + 3 * self.border
 
+  max_height: max(mock_symbola.height, mock_ubuntu_regular.height, mock_ubuntu_bold.height)
   min_height: min(mock_symbola.height, mock_ubuntu_regular.height, mock_ubuntu_bold.height)
   symbola_line_height: self.min_height / max(mock_symbola.height,1)
   ubuntu_regular_line_height: self.min_height / max(mock_ubuntu_regular.height,1)
   ubuntu_bold_line_height: self.min_height / max(mock_ubuntu_bold.height,1)
+
   Label:
     id: mock_symbola
     font_name: "Symbola"
@@ -271,58 +273,56 @@
   
 <PlayList>:
   size_hint: None, None
+  labels_height: self.parent.max_height or 1
   canvas:
     Color:
       rgba: 250./255, 250./255, 250./255, 1
     Rectangle:
       pos:  0, 0
       size: self.width, self.height
-
-  Label:
-    id: playlist_icons
-    font_name: "Symbola"
-    font_size: math.ceil(2 * math.sqrt(self.parent.parent.key_size or 10))
-    line_height: self.parent.parent.symbola_line_height or 1
-    color: 0, 0, 0, 1
-    text: "\n".join(map(lambda x: x[0], self.parent.playlist))
-    text_size: None, self.parent.height
-    halign: "left"
-    valign: "top"
-    size_hint: None, None
-    size: self.texture_size[0], self.parent.height
-  Label:
-    id: playlist_names
-    font_name: "Ubuntu" # FIXME: Mettre en gras quand c'est en cours
-    line_height: self.parent.parent.ubuntu_regular_line_height or 1
-    font_size: math.ceil(2 * math.sqrt(self.parent.parent.key_size or 10))
-    color: 0, 0, 0, 1
-    text: "\n".join(map(lambda x: x[1], self.parent.playlist))
-    text_size: None, self.parent.height
-    halign: "left"
-    valign: "top"
-    size_hint: None, None
-    pos: 15, self.y
-    size: self.texture_size[0], self.parent.height
-  Label:
-    canvas.before:
-      Color:
-        rgba: 250./255, 250./255, 250./255, 1
-      Rectangle:
-        pos:  self.pos
-        size: self.width, self.height
-    id: playlist_times
-    font_name: "Ubuntu"
-    line_height: self.parent.parent.ubuntu_regular_line_height or 1
-    font_size: math.ceil(2 * math.sqrt(self.parent.parent.key_size or 10))
-    color: 0, 0, 0, 1
-    text: "\n".join(map(lambda x: x[2], self.parent.playlist))
-    text_size: None, self.parent.height
-    halign: "left"
-    valign: "top"
-    size_hint: None, None
-    pos: self.parent.width - 3 * self.width / 2 - 2 * (self.parent.parent.border or 0), self.y
-    size: self.texture_size[0], self.parent.height
+  PlayListIcons:
+    orientation: 'lr-tb'
+    size_hint: 0.05, 1
+    pos_hints: { 'x': 0, 'top': 0 }
+  PlayListNames:
+    orientation: 'lr-tb'
+    pos_hint: { 'x': 0.05, 'bottom': 0 }
+    size_hint: 0.65, 1
+  PlayListTimes:
+    orientation: 'lr-tb'
+    pos_hint: { 'x': 0.7, 'bottom': 0 }
+    size_hint: 0.30, 1
  
+<PlayListIcon>:
+  font_name: "Symbola"
+  color: 0, 0, 0, 1
+  text_size: None, None
+  halign: "left"
+  size_hint: 1, None
+  width: self.texture_size[0]
+
+<PlayListName>:
+  font_name: "Ubuntu"
+  color: 0, 0, 0, 1
+  text_size: None, None
+  halign: "left"
+  size_hint: None, None
+  width: self.texture_size[0]
+
+<PlayListTime>:
+  canvas.before:
+    Color:
+      rgba: 250./255, 250./255, 250./255, 1
+    Rectangle:
+      pos:  self.pos
+      size: self.width, self.height
+  font_name: "Ubuntu"
+  color: 0, 0, 0, 1
+  text_size: None, None
+  halign: "left"
+  size_hint: None, None
+  width: self.texture_size[0]
+
 <Mapping>:
   size_hint: None, None
   key_size: 48