Merge pull request #307 from blackcandy-org/dev

Fix #305, add no repeat mode in player

app/assets/stylesheets/components/_icon.scss

@@ -17,3 +17,12 @@
   width: 22px;
   height: 22px;
 }
+
+.c-icon--active {
+  color: var(--icon-active-color);
+}
+
+.c-icon--emphasis {
+  color: var(--icon-emphasis-color);
+}
+

app/assets/stylesheets/components/_player.scss

@@ -1,10 +1,18 @@
+@use "../tools/functions" as *;
+
 .c-player {
   background: var(--player-bg-color);
 }
 
 .c-player__control {
   background: var(--player-bg-color);
   position: relative;
+  padding: spacing("medium") spacing("small");
+  color: var(--player-control-color);
+}
+
+.c-player__control__main {
+  color: var(--player-control-main-color);
 }
 
 .c-player__header {

app/assets/stylesheets/generic/_reset.scss

@@ -42,7 +42,7 @@ textarea {
 /* Reset element style generate from button_to */
 [type="submit"] {
   text-align: left;
-  color: var(--text-primary-color);
+  color: currentcolor;
   font-weight: normal;
 }
 

app/assets/stylesheets/settings/_theme.scss

@@ -30,7 +30,6 @@ $green: rgb(35, 166, 80);
   /* Text */
   --text-primary-color: #{$grey-900};
   --text-secondary-color: #{$grey-600};
-  --text-red-color: #{$red};
 
   /* Sidebar */
   --sidebar-bg-color: #{$grey-100};
@@ -114,6 +113,8 @@ $green: rgb(35, 166, 80);
   --player-progress-bg-color: #{$grey-200};
   --player-progress-hover-bg-color: #{$grey-100};
   --player-progress-color: #{$purple};
+  --player-control-color: #{$grey-500};
+  --player-control-main-color: #{$grey-900};
 
   /* Badge */
   --badge-bg-color: #{color.change($purple-light, $alpha: 0.2)};
@@ -122,6 +123,10 @@ $green: rgb(35, 166, 80);
   /* Card */
   --card-border-color: #{$grey-200};
   --card-bg-color: #{$grey-100};
+
+  /* Icon */
+  --icon-active-color: #{$purple};
+  --icon-emphasis-color: #{$red};
 }
 
 @mixin dark-theme {
@@ -135,7 +140,6 @@ $green: rgb(35, 166, 80);
   /* Text */
   --text-primary-color: #{$white};
   --text-secondary-color: #{$grey-300};
-  --text-red-color: #{$red};
 
   /* Sidebar */
   --sidebar-bg-color: #{$grey-900};
@@ -218,6 +222,8 @@ $green: rgb(35, 166, 80);
   --player-progress-bg-color: #{$black};
   --player-progress-hover-bg-color: #{$grey-800};
   --player-progress-color: #{$purple};
+  --player-control-color: #{$grey-400};
+  --player-control-main-color: #{$white};
 
   /* Badge */
   --badge-bg-color: #{color.change($purple, $alpha: 0.2)};
@@ -226,6 +232,10 @@ $green: rgb(35, 166, 80);
   /* Card */
   --card-border-color: #{$grey-700};
   --card-bg-color: #{$grey-900};
+
+  /* Icon */
+  --icon-active-color: #{$purple-light};
+  --icon-emphasis-color: #{$red};
 }
 
 [data-color-scheme="light"] {

app/assets/stylesheets/utilities/_text.scss

@@ -22,10 +22,6 @@
   color: var(--text-secondary-color) !important;
 }
 
-.u-text-color-red {
-  color: var(--text-red-color) !important;
-}
-
 .u-text-monospace {
   font-family: variables.$monospace-fonts;
 }

app/helpers/application_helper.rb

@@ -12,7 +12,9 @@ def icon_tag(name, options = {})
     return if name.blank?
 
     size_class = options[:size].blank? ? "" : "c-icon--#{options[:size]}"
-    icon_class = ["c-icon", size_class, options[:class]].join(" ")
+    active_class = options[:active] ? "c-icon--active" : ""
+    emphasis_class = options[:emphasis] ? "c-icon--emphasis" : ""
+    icon_class = ["c-icon", size_class, active_class, emphasis_class, options[:class]].join(" ")
 
     tag.svg(
       fill: "currentColor",

app/javascript/controllers/player_controller.js

@@ -116,6 +116,10 @@ export default class extends Controller {
     return (typeof currentTime === 'number') ? Math.round(currentTime) : 0
   }
 
+  get isEndOfPlaylist () {
+    return this.currentIndex === this.player.playlist.length - 1
+  }
+
   #setBeforePlayingStatus = () => {
     this.headerTarget.classList.add('is-expanded')
     this.loaderTarget.classList.remove('u-display-none')
@@ -160,21 +164,29 @@ export default class extends Controller {
   }
 
   #setStopStatus = () => {
-    this.#clearTimerInterval()
+    this.#setPauseStatus()
 
     if (this.player.playlist.length === 0) {
       this.headerTarget.classList.remove('is-expanded')
-      this.#setPauseStatus()
     }
   }
 
   #setEndStatus = () => {
     this.#clearTimerInterval()
 
-    if (this.currentMode === 'single') {
-      this.player.play()
-    } else {
-      this.next()
+    switch (this.currentMode) {
+      case 'noRepeat':
+        if (this.isEndOfPlaylist) {
+          this.player.stop()
+        } else {
+          this.next()
+        }
+        break
+      case 'single':
+        this.player.play()
+        break
+      default:
+        this.next()
     }
   }
 
@@ -204,7 +216,7 @@ export default class extends Controller {
   }
 
   #initMode () {
-    this.modes = ['repeat', 'single', 'shuffle']
+    this.modes = ['noRepeat', 'repeat', 'single', 'shuffle']
     this.currentModeIndex = 0
     this.updateMode()
   }

app/views/playlists/_playlist.html.erb

@@ -2,7 +2,7 @@
   <div class='c-card__body'>
     <%= link_to playlist_songs_path(playlist), class: "o-flex o-flex--align-center" do %>
       <% if playlist.favorite? %>
-        <%= icon_tag("heart", class: "u-text-color-red") %>
+        <%= icon_tag("heart", emphasis: true) %>
       <% else %>
         <%= icon_tag("queue-music") %>
       <% end %>

app/views/shared/_player.html.erb

@@ -23,32 +23,33 @@
       <%= loader_tag %>
     </div>
   </div>
-  <div class='u-px-small u-py-medium o-flex o-flex--justify-between o-flex--align-center c-player__control'>
+  <div class='o-flex o-flex--justify-between o-flex--align-center c-player__control'>
     <div class='u-cursor-pointer' data-action='click->player#nextMode'>
-      <span data-player-target='modeButton'><%= icon_tag "repeat", title: t("label.repeat_mode") %></span>
-      <span data-player-target='modeButton'><%= icon_tag "repeat-one", title: t("label.single_mode") %></span>
-      <span data-player-target='modeButton'><%= icon_tag "shuffle", title: t("label.shuffle_mode") %></span>
+      <span data-player-target='modeButton'><%= icon_tag "repeat", title: t("label.no_repeat_mode") %></span>
+      <span data-player-target='modeButton'><%= icon_tag "repeat", active: true, title: t("label.repeat_mode") %></span>
+      <span data-player-target='modeButton'><%= icon_tag "repeat-one", active: true, title: t("label.single_mode") %></span>
+      <span data-player-target='modeButton'><%= icon_tag "shuffle", active: true, title: t("label.shuffle_mode") %></span>
     </div>
-    <div>
-      <span class='u-text-color-primary u-cursor-pointer' data-action='click->player#previous' data-test-id='player_previous_button'>
+    <div class="c-player__control__main">
+      <span class='u-cursor-pointer' data-action='click->player#previous' data-test-id='player_previous_button'>
         <%= icon_tag "rewind", size: "large", title: t("label.previous_song") %>
       </span>
-      <span class='u-mx-medium u-text-color-primary u-cursor-pointer' data-action='click->player#play' data-player-target='playButton' data-test-id='player_play_button'>
+      <span class='u-mx-medium u-cursor-pointer' data-action='click->player#play' data-player-target='playButton' data-test-id='player_play_button'>
         <%= icon_tag "play", size: "large", title: t("label.play_song") %>
       </span>
-      <span class='u-mx-medium  u-text-color-primary u-cursor-pointer u-display-none' data-action='click->player#pause' data-player-target='pauseButton' data-test-id='player_pause_button'>
+      <span class='u-mx-medium u-cursor-pointer u-display-none' data-action='click->player#pause' data-player-target='pauseButton' data-test-id='player_pause_button'>
         <%= icon_tag "pause", size: "large", title: t("label.pause_song") %>
       </span>
-      <span class='u-text-color-primary u-cursor-pointer' data-action='click->player#next' data-test-id='player_next_button'>
+      <span class='u-cursor-pointer' data-action='click->player#next' data-test-id='player_next_button'>
         <%= icon_tag "fast-forward", size: "large", title: t("label.next_song") %>
       </span>
     </div>
     <div data-action='turbo:submit-end->player#toggleFavorite' data-test-id='player_favorite_button'>
       <%= button_to favorite_playlist_songs_path, form_class: "u-visibility-hidden", form: {"data-player-target" => "favoriteButton"} do %>
         <%= icon_tag "heart", title: t("label.toggle_favorite") %>
       <% end %>
-      <%= button_to favorite_playlist_songs_path, method: :delete, form_class: "u-display-none", form: {"data-player-target" => "unFavoriteButton"}, class: "u-text-color-red" do %>
-        <%= icon_tag "heart", title: t("label.toggle_favorite") %>
+      <%= button_to favorite_playlist_songs_path, method: :delete, form_class: "u-display-none", form: {"data-player-target" => "unFavoriteButton"} do %>
+        <%= icon_tag "heart", emphasis: true, title: t("label.toggle_favorite") %>
       <% end %>
     </div>
   </div>

config/locales/en.yml

@@ -77,6 +77,7 @@ en:
     various_artists: 'Various Artists'
     unknown_artist: 'Unknown Artist'
     unknown_album: 'Unknown Album'
+    no_repeat_mode: 'No repeat mode'
     repeat_mode: 'Repeat mode'
     single_mode: 'Single mode'
     shuffle_mode: 'Shuffle mode'