From ae3b831aa4a58d05fcb4a6b1b8b8dcfc0ba872dd Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sun, 4 Sep 2022 08:25:39 +1200 Subject: [PATCH 1/3] Upgrading from ReactSortable to ReactDND --- src/js/components/Fields/Commands.js | 149 +++++++++++++++++++-------- 1 file changed, 106 insertions(+), 43 deletions(-) diff --git a/src/js/components/Fields/Commands.js b/src/js/components/Fields/Commands.js index 88ccb82f..e7a0554a 100644 --- a/src/js/components/Fields/Commands.js +++ b/src/js/components/Fields/Commands.js @@ -1,9 +1,86 @@ -import React, { useState, useEffect } from 'react'; -import { ReactSortable } from 'react-sortablejs'; +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import { useDrop, useDrag } from 'react-dnd'; import Icon from '../Icon'; import Link from '../Link'; import { sortItems, indexToArray } from '../../util/arrays'; +const DRAGGABLE_TYPE = 'COMMAND'; + +const Command = ({ + index, + onExecute, + onDrag, + onDragEnd, + command: { + id, + url, + name, + icon, + colour, + } = {}, +}) => { + const ref = useRef(null); + + const [{ isDragging }, dragRef] = useDrag({ + type: DRAGGABLE_TYPE, + item: { index }, + collect: (monitor) => ({ + isDragging: monitor.isDragging(), + }), + end: onDragEnd, + }); + + const [_dropProps, dropRef] = useDrop({ + accept: DRAGGABLE_TYPE, + hover: (item, monitor) => { + const dragIndex = item.index; + const hoverIndex = index; + const hoverBoundingRect = ref.current?.getBoundingClientRect() + const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2; + const hoverActualY = monitor.getClientOffset().y - hoverBoundingRect.top; + + // if dragging down, continue only when hover is smaller than middle Y + if (dragIndex < hoverIndex && hoverActualY < hoverMiddleY) return; + // if dragging up, continue only when hover is bigger than middle Y + if (dragIndex > hoverIndex && hoverActualY > hoverMiddleY) return; + + onDrag(dragIndex, hoverIndex); + item.index = hoverIndex; + }, + }) + + let className = 'list__item commands-setup__item'; + if (isDragging) className += ' list__item--dragging'; + + return ( +
+
+
+ +
+
+ + +
+
+ {name || {url}} +
+
+
+ onExecute(id, true)}> + + + + + +
+
+ ); +} + const Commands = ({ commands, runCommand, @@ -18,58 +95,44 @@ const Commands = ({ useEffect(() => { setList(sortItems(indexToArray(commands), 'sort_order')); }, []); - - const onSort = () => { - const nextCommands = {}; - if (!list || !list.length) return; + const onDrag = useCallback((dragIndex, hoverIndex) => { + setList((prev) => { + const next = [...prev]; + const dragItem = next[dragIndex]; + const hoverItem = next[hoverIndex]; + next[dragIndex] = hoverItem; + next[hoverIndex] = dragItem; + return next; + }); + }, [list]); + + const onDragEnd = () => { + if (!list || !list.length) return; + const nextCommands = {}; list.forEach((item, index) => { nextCommands[item.id] = { ...item, sort_order: index, }; }); - onChange(nextCommands); }; return ( - - { - list.map((command) => ( -
-
- -
- - -
-
- {command.name ? command.name : {command.url}} -
-
-
- runCommand(command.id, true)}> - - - - - -
-
- )) - } - +
+ {list.map((command, index) => ( + + ))} +
); -} +}; export default Commands; From daee7b4369576730564da5f2d7ae6509f90be4cd Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sun, 4 Sep 2022 08:40:15 +1200 Subject: [PATCH 2/3] Removing sources priority sorting (deprecating it) --- package.json | 1 - src/js/components/Fields/SourcesPriority.js | 67 ------------------- src/js/locale/de.yaml | 3 - src/js/locale/en.yaml | 3 - src/js/locale/es.yaml | 3 - src/js/locale/fr.yaml | 3 - src/js/locale/it.yaml | 3 - src/js/locale/ja.yaml | 3 - src/js/locale/nl.yaml | 3 - src/js/locale/pl.yaml | 3 - src/js/locale/ru.yaml | 3 - src/js/locale/sv.yaml | 3 - src/js/views/Debug.js | 11 +++ src/js/views/Search.js | 1 - src/js/views/Settings.js | 21 +----- src/scss/app.scss | 2 - src/scss/components/_sortable.scss | 6 -- .../components/_sources-priority-field.scss | 40 ----------- 18 files changed, 12 insertions(+), 167 deletions(-) delete mode 100755 src/js/components/Fields/SourcesPriority.js delete mode 100644 src/scss/components/_sortable.scss delete mode 100755 src/scss/components/_sources-priority-field.scss diff --git a/package.json b/package.json index 11ee03f8..a7b08ff3 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "react-redux": "^7.2.2", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", - "react-sortablejs": "^6", "redux": "^4.0.5", "redux-persist": "^6.0.0", "redux-thunk": "^2.3.0", diff --git a/src/js/components/Fields/SourcesPriority.js b/src/js/components/Fields/SourcesPriority.js deleted file mode 100755 index 2f8e0ce5..00000000 --- a/src/js/components/Fields/SourcesPriority.js +++ /dev/null @@ -1,67 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { ReactSortable } from 'react-sortablejs'; -import { set as uiSet } from '../../services/ui/actions'; -import Icon from '../Icon'; -import { titleCase } from '../../util/helpers'; - -const SourcesPriority = ({ - uri_schemes, - uri_schemes_priority, -}) => { - const [list, setList] = useState([]); - const dispatch = useDispatch(); - - useEffect(() => { - processList(); - }, []); - - useEffect(() => { - processList(); - }, [uri_schemes]); - - const processList = () => { - let seen = []; - let unseen = []; - uri_schemes.forEach((uri) => { - const index = uri_schemes_priority.indexOf(uri); - if (index > -1) { - seen[index] = { uri }; - } else { - unseen.push({ uri }); - } - }); - setList([ ...seen, ...unseen ]); - } - - const onSort = () => { - dispatch(uiSet({ uri_schemes_priority: list.map(({ uri }) => uri) })); - } - - return ( - - { - list.map(({ uri }) => { - const name = titleCase(uri.replace(':', '').replace('+', ' ')); - - return ( - - - {name} - - ); - }) - } - - ); -} - -export default SourcesPriority; diff --git a/src/js/locale/de.yaml b/src/js/locale/de.yaml index a2b25808..abf6dc9a 100755 --- a/src/js/locale/de.yaml +++ b/src/js/locale/de.yaml @@ -303,9 +303,6 @@ settings: touch_events: Aktivieren Berührungsereignissen zur Steuerungen touch_events_tooltip: Ermöglicht Links- und Rechts-Wischen zum Wechseln der Titeln wide_scrollbars: Breite Bildlaufleisten verwenden - sources_priority: - label: Quellen Priorität - description: Drag-and-Drop zur Priorisierung von Suchanbietern und Ergebnissen reporting: label: Berichterstattung sublabel: Erlaubt die Berichterstattung anonymer Nutzungsstatistiken diff --git a/src/js/locale/en.yaml b/src/js/locale/en.yaml index e699fbcf..6f46dcd6 100755 --- a/src/js/locale/en.yaml +++ b/src/js/locale/en.yaml @@ -394,9 +394,6 @@ settings: wide: Wide scrollbars hidden: Hidden scrollbars smooth_scrolling: Smooth scroll - sources_priority: - label: Sources priority - description: Drag-and-drop to prioritize search providers and results reporting: label: Reporting sublabel: Allow reporting of anonymous usage statistics diff --git a/src/js/locale/es.yaml b/src/js/locale/es.yaml index f87de99c..f92e3962 100644 --- a/src/js/locale/es.yaml +++ b/src/js/locale/es.yaml @@ -366,9 +366,6 @@ settings: wide_scrollbars: Usar barras de desplazamiento anchas grid_glow: Efecto resplandeciente en miniaturas grid_glow_tooltip: Deshabilitar el efecto para dispositivos lentos o navegadores antiguos - sources_priority: - label: Prioridad de fuentes - description: Arrastre y suelte para priorizar proveedores y resultados reporting: label: Reporte sublabel: Permitir reporte de estadísticas de uso anónimas diff --git a/src/js/locale/fr.yaml b/src/js/locale/fr.yaml index ed2a0a11..446c56b9 100755 --- a/src/js/locale/fr.yaml +++ b/src/js/locale/fr.yaml @@ -379,9 +379,6 @@ settings: wide: Larges hidden: Cachées smooth_scrolling: Défilement doux - sources_priority: - label: Priorité des sources - description: Glisser-déposer pour réordonner les sources et les résultats reporting: label: Rapport sublabel: Autoriser la création de rapports anonymisés sur les statistiques d'utilisation diff --git a/src/js/locale/it.yaml b/src/js/locale/it.yaml index e76cb4cb..d74a81b1 100755 --- a/src/js/locale/it.yaml +++ b/src/js/locale/it.yaml @@ -366,9 +366,6 @@ settings: wide_scrollbars: Usa barra di scorrimento larga grid_glow: Effetto bagliore miniature grid_glow_tooltip: Disattiva l'effetto per dispositivi poco potenti o browser non recenti - sources_priority: - label: Priorità fonti - description: Trascina e rilascia per dare la priorità ai provider di ricerca e ai risultati reporting: label: Segnalazione sublabel: Consenti statistiche di utilizzo anonime diff --git a/src/js/locale/ja.yaml b/src/js/locale/ja.yaml index e4285290..8ca53d92 100644 --- a/src/js/locale/ja.yaml +++ b/src/js/locale/ja.yaml @@ -331,9 +331,6 @@ settings: touch_events: 再生コントロールにタッチイベントを有効化 touch_events_tooltip: 左右スワイプでトラックを変更可能 wide_scrollbars: 広いスクロールバーを使用 - sources_priority: - label: ソース優先順位 - description: ソースの優先順位をドラッグ＆ドロップで決める reporting: label: リポート sublabel: 匿名で使用レポートを送信 diff --git a/src/js/locale/nl.yaml b/src/js/locale/nl.yaml index 14887cf6..ea4bc91f 100755 --- a/src/js/locale/nl.yaml +++ b/src/js/locale/nl.yaml @@ -364,9 +364,6 @@ settings: touch_events_tooltip: Maakt het mogelijk om naar links of rechts te vegen om van tracks te veranderen grid_glow: Miniatuur gloei effect wide_scrollbars: Gebruik brede schuifbalken - sources_priority: - label: Prioriteit bronnen - description: Verslepen om voorrang van zoekmachines en resultaten te wijzigen reporting: label: Rapportering sublabel: Sta het versturen van anonieme gebruiksstatistieken toe diff --git a/src/js/locale/pl.yaml b/src/js/locale/pl.yaml index 006ea57d..118a87bf 100755 --- a/src/js/locale/pl.yaml +++ b/src/js/locale/pl.yaml @@ -331,9 +331,6 @@ settings: touch_events: Włącz obsługę zdarzeń dotykowych touch_events_tooltip: Umożliwia zmienianie utworów poprzez przesunięcia palcem po ekranie wide_scrollbars: Używaj szerokich pasków przewijania - sources_priority: - label: Priorytety źródeł - description: Przesuń i upuść aby zmienić priorytety dostawców reporting: label: Raportowanie sublabel: Włącz anonimowe raportowanie statystyk diff --git a/src/js/locale/ru.yaml b/src/js/locale/ru.yaml index 23824ee2..7be62a93 100644 --- a/src/js/locale/ru.yaml +++ b/src/js/locale/ru.yaml @@ -391,9 +391,6 @@ settings: wide: Широкие полосы прокрутки hidden: Скрытые полосы прокрутки smooth_scrolling: Плавная прокрутка - sources_priority: - label: Приоритет источников - description: Перетаскивание для определения приоритетов поисковых систем и результатов reporting: label: Отчетность sublabel: Разрешить отчеты об анонимной статистике использования diff --git a/src/js/locale/sv.yaml b/src/js/locale/sv.yaml index cf560e3e..23d860ad 100644 --- a/src/js/locale/sv.yaml +++ b/src/js/locale/sv.yaml @@ -367,9 +367,6 @@ settings: wide_scrollbars: Use wide scrollbars grid_glow: Thumbnail glow effect grid_glow_tooltip: Inaktivera effekten för lågenergi enheter eller äldre webbläsare - sources_priority: - label: Sources priority - description: Dra och släpp för att prioritera sök resultaten från olika utgivningar reporting: label: Rapportering sublabel: Tillåt rapportering av anonym användarstatistik diff --git a/src/js/views/Debug.js b/src/js/views/Debug.js index 0e63ca62..2f706875 100755 --- a/src/js/views/Debug.js +++ b/src/js/views/Debug.js @@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'; import Header from '../components/Header'; import Icon from '../components/Icon'; import Button from '../components/Button'; +import LinksSentence from '../components/LinksSentence'; import * as uiActions from '../services/ui/actions'; import * as pusherActions from '../services/pusher/actions'; import * as mopidyActions from '../services/mopidy/actions'; @@ -75,6 +76,7 @@ class Debug extends React.Component { log_pusher, log_snapcast, access_token, + uri_schemes = [], } = this.props; const { mopidy_call, @@ -216,6 +218,14 @@ class Debug extends React.Component {

+