From bf341f49439fa4c0978c9f091d7aca42ad917cb9 Mon Sep 17 00:00:00 2001
From: aidewoode <aidewoode@gmail.com>
Date: Wed, 27 Dec 2023 22:45:11 +0800
Subject: [PATCH] Remove sortable drag handle on mobile device

---
 app/controllers/application_controller.rb                  | 6 +++++-
 app/javascript/controllers/playlist_sortable_controller.js | 7 +++++--
 app/views/current_playlist/songs/_song.html.erb            | 4 +++-
 app/views/playlists/songs/_song.html.erb                   | 5 ++++-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index bb2d03ca..b53f3f24 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -4,7 +4,7 @@ class ApplicationController < ActionController::Base
   include Pagy::Backend
   include SessionsHelper
 
-  helper_method :native_app?, :need_transcode?, :render_flash
+  helper_method :native_app?, :need_transcode?, :render_flash, :mobile?
 
   before_action :find_current_session
   before_action :find_current_request_details
@@ -78,6 +78,10 @@ def render_flash(type: :success, message: "")
     turbo_stream.update "turbo-flash", partial: "shared/flash"
   end
 
+  def mobile?
+    browser.device.mobile?
+  end
+
   private
 
   def find_current_session
diff --git a/app/javascript/controllers/playlist_sortable_controller.js b/app/javascript/controllers/playlist_sortable_controller.js
index cd1c975b..135fb2dc 100644
--- a/app/javascript/controllers/playlist_sortable_controller.js
+++ b/app/javascript/controllers/playlist_sortable_controller.js
@@ -3,6 +3,8 @@ import { fetchRequest } from '../helper'
 import { installEventHandler } from './mixins/event_handler'
 
 export default class extends Controller {
+  DRAG_HANDLE_SELECTOR = '.js-playlist-sortable-item-handle'
+
   initialize () {
     installEventHandler(this)
   }
@@ -47,7 +49,7 @@ export default class extends Controller {
   }
 
   #handleMouseDown = (event) => {
-    const handle = event.target.closest('.js-playlist-sortable-item-handle')
+    const handle = event.target.closest(this.DRAG_HANDLE_SELECTOR)
 
     if (handle) {
       this.dragHandle = handle
@@ -58,8 +60,9 @@ export default class extends Controller {
 
   #handleDragStart = (event) => {
     const target = event.target
+    const handleExists = target.querySelector(this.DRAG_HANDLE_SELECTOR)
 
-    if (!target.draggable || !target.contains(this.dragHandle)) {
+    if (!target.draggable || (handleExists && !target.contains(this.dragHandle))) {
       event.preventDefault()
       return
     }
diff --git a/app/views/current_playlist/songs/_song.html.erb b/app/views/current_playlist/songs/_song.html.erb
index e7016d19..c2312183 100644
--- a/app/views/current_playlist/songs/_song.html.erb
+++ b/app/views/current_playlist/songs/_song.html.erb
@@ -8,7 +8,9 @@
   data-test-id='current_playlist_song'>
 
   <div class='o-flex o-flex--align-center u-py-narrow'>
-    <button class='c-button c-button--icon js-playlist-sortable-item-handle u-mr-narrow' data-test-id='playlist_song_sortable_handle'><%= icon_tag "drag-indicator", size: "small" %></button>
+    <% unless mobile? %>
+      <button class='c-button c-button--icon js-playlist-sortable-item-handle u-mr-narrow' data-test-id='playlist_song_sortable_handle'><%= icon_tag "drag-indicator", size: "small" %></button>
+    <% end %>
 
     <button class='c-button c-button--link o-flex__item--grow-1' data-delegated-action='current-playlist-songs#play'>
       <div class='o-flex o-flex--justify-between o-flex--align-center'>
diff --git a/app/views/playlists/songs/_song.html.erb b/app/views/playlists/songs/_song.html.erb
index 1b470acc..5505b4f2 100644
--- a/app/views/playlists/songs/_song.html.erb
+++ b/app/views/playlists/songs/_song.html.erb
@@ -1,6 +1,9 @@
 <li id='<%= "#{dom_id(playlist)}_#{dom_id(song)}" %>' class='c-list__item u-p-0' data-playlist-songs-target='item' data-song-id='<%= song.id %>' data-test-id='playlist_song' draggable='true'>
   <div class='o-flex o-flex--align-center u-py-narrow'>
-    <button class='c-button c-button--icon js-playlist-sortable-item-handle u-mr-narrow' data-test-id='playlist_song_sortable_handle'><%= icon_tag "drag-indicator", size: "small" %></button>
+    <% unless mobile? %>
+      <button class='c-button c-button--icon js-playlist-sortable-item-handle u-mr-narrow' data-test-id='playlist_song_sortable_handle'><%= icon_tag "drag-indicator", size: "small" %></button>
+    <% end %>
+
     <%= button_to(
           current_playlist_songs_path(song_id: song.id, should_play: true),
           class: "c-button c-button--link u-w-100",