Add a way to display full lyrics in the song details view

blitzloop/res/web/css/main.css

@@ -293,14 +293,20 @@ body {
 	font-size: 30px;
 }
 
-.song .meta p span{
+.song .meta p span, .song .lyrics p span {
 	position: absolute;
 	margin-top: -6px;
 	font-size: 12px;
 	width: 50%;
 	color: #246;
 }
 
+.song .lyrics p {
+  padding-top: 13px;
+  padding-bottom: 4px;
+  white-space: pre-wrap;
+}
+
 .choice {
 	margin: 8px;
 	clear: both;
@@ -521,4 +527,4 @@ h2 {
 
 #settings {
 	text-align: center;
-}
+}

blitzloop/res/web/js/app.js

@@ -208,7 +208,8 @@ app.controller('SongDetailCtrl', function($scope, $rootScope, $routeParams, $htt
                 channels: [3],
                 speed: 0,
                 pitch: 0,
-                pause: false
+                pause: false,
+                expand_lyrics: false,
             };
             for (var i = 0; i < data.variants.length; i++) {
                 if (data.variants[i].default) {
@@ -239,6 +240,9 @@ app.controller('SongDetailCtrl', function($scope, $rootScope, $routeParams, $htt
             $location.path("/queue/" + data.qid + "/new")
         });
     };
+    $scope.toggleLyrics = function() {
+      $scope.song.config.expand_lyrics = !$scope.song.config.expand_lyrics;
+    };
     $scope.refresh();
 });
 
@@ -330,6 +334,9 @@ app.controller('QueueEntryCtrl', function($scope, $rootScope, $routeParams, $htt
             $scope.refresh();
         });;
     };
+    $scope.toggleLyrics = function() {
+      $scope.song.config.expand_lyrics = !$scope.song.config.expand_lyrics;
+    };
     $scope.$on('$destroy',function(){
         $timeout.cancel($scope.refresh_promise);
     });

blitzloop/res/web/partials/song.html

@@ -5,7 +5,11 @@
 		<p><span translate>Artist</span>{{song.meta.artist}}</p>
 		<p><span translate>Album</span>{{song.meta.album}}</p>
 		<p><span translate>Seen on</span>{{song.meta.seenon}}</p>
-		<p><span translate>Lyrics</span>{{variant.snippet}}</p>
+		<p><span translate>Lyrics</span><a ng-click="toggleLyrics()">{{variant.snippet}}</a></p>
+	</div>
+	<hr style="margin-top: 0" ng-show="song.config.expand_lyrics">
+	<div class="lyrics" ng-show="song.config.expand_lyrics">
+		<p><span translate>Lyrics</span>{{variant.lyrics}}</p>
 	</div>
 	<hr style="margin-top: 0">
 	<div class="sliders" ng-hide="tab=='songs'">

blitzloop/song.py

@@ -862,25 +862,43 @@ def aspect(self):
         else:
             return fractions.Fraction(self.song["aspect"])
 
-    def get_lyric_snippet(self, variant_id, length=100):
+    def _get_lyrics(self, variant_id):
         variant = self.variants[variant_id]
         tags = set(i for i in variant.tag_list if variant.tags[i].edge == TagInfo.BOTTOM)
-        lyrics = ""
+        lyrics = []
         broke = False
+        space = None
         for compound in self.compounds:
-            if len(lyrics) >= length:
-                break
             for tag, molecule in compound.items():
+                if space is None:
+                    space = molecule.SPACE
                 if tag not in tags:
                     continue
-                if molecule.break_before and not broke:
-                    lyrics += "/" + molecule.SPACE
                 broke = False
-                lyrics += molecule.text + molecule.SPACE
+                lyrics.append(molecule.text)
                 if molecule.break_after:
-                    lyrics += "/" + molecule.SPACE
                     broke = True
 
+        return {
+            'lyrics': lyrics,
+            'space': space,
+        }
+
+    def get_lyrics(self, variant_id):
+        return "\n".join(self._get_lyrics(variant_id)['lyrics'])
+
+    def get_lyric_snippet(self, variant_id, length=100):
+        result = self._get_lyrics(variant_id)
+        space = result['space']
+        lyrics = ""
+        for phrase in result['lyrics']:
+            if len(lyrics) >= length:
+                break
+            if lyrics:
+                lyrics += space + "/" + space + phrase
+            else:
+                lyrics += phrase
+
         return lyrics
 
     def get_font_path(self, font):

blitzloop/web.py

@@ -95,7 +95,8 @@ def get_song_meta(song):
 
 def get_song_variants(song):
     return [{"id": i, "name": v.name, "default": v.default,
-             "snippet": song.get_lyric_snippet(k)}
+             "snippet": song.get_lyric_snippet(k),
+             "lyrics": song.get_lyrics(k)}
             for i, (k, v) in enumerate(song.variants.items())]
 
 def get_qe_config(qe):