feat(ui): auto-scroll track queue to current track

.github/workflows/release.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           node-version: 14.x
       - run: npm ci
-      - run: npm run release:publish -- -l
+      - run: npm run release:publish -- onTagOrDraft -l
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
 
@@ -32,20 +32,20 @@ jobs:
         with:
           node-version: 14.x
       - run: npm ci
-      - run: npm run release:publish -- -w
+      - run: npm run release:publish -- onTagOrDraft -w
         env:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
 
-#  release-macos:
-#    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-#    runs-on: macos-latest
-#
-#    steps:
-#      - uses: actions/checkout@v2
-#      - uses: actions/setup-node@v1
-#        with:
-#          node-version: 14.x
-#      - run: npm ci
-#      - run: npm run release:publish -- -m
-#        env:
-#          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+ release-macos:
+   if: ${{ github.event.workflow_run.conclusion == 'success' }}
+   runs-on: macos-latest
+
+   steps:
+     - uses: actions/checkout@v2
+     - uses: actions/setup-node@v1
+       with:
+         node-version: 14.x
+     - run: npm ci
+     - run: npm run release:publish -- onTagOrDraft -m
+       env:
+         GH_TOKEN: ${{ secrets.GH_TOKEN }}

README.md

@@ -12,12 +12,13 @@ There are thunsands of them in the wild. This mine is an excuse for learning [El
 
 ### features
 
-- [ ] enqueue tracks/albums by dragging to tracks queue
-- [ ] system integration (play folder/file)
-- [ ] images from tags
-- [ ] display album/artist descriptions
+- [ ] feedback when adding to playlist
 - [ ] number of disk on album details page
 - [ ] display years (artist & album details page)
+- [ ] images from tags
+- [ ] system integration (play folder/file)
+- [ ] display album/artist descriptions
+- [ ] enqueue tracks/albums by dragging to tracks queue
 - [ ] configure replay gain from settings
 - [ ] display tracks/albums/artists count in settings
 - [ ] allow reseting database from settings

package.json

@@ -19,7 +19,7 @@
     "postinstall": "electron-builder install-app-deps",
     "release:artifacts": "electron-builder",
     "release:bump": "standard-version -s -prerelease alpha",
-    "release:publish": "electron-builder -p onTagOrDraft",
+    "release:publish": "electron-builder -p",
     "start": "electron .",
     "storybook": "start-storybook -p 6006 -s ./fixtures",
     "test": "jest --coverage",
@@ -125,4 +125,4 @@
       "node scripts/remove-secrets"
     ]
   }
-}
+}

renderer/components/TracksQueue/TracksQueue.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount, tick } from 'svelte'
   import { _ } from 'svelte-intl'
   import Button from '../Button/Button.svelte'
   import Heading from '../Heading/Heading.svelte'
@@ -17,6 +18,8 @@
   import { current } from '../../stores/tutorial'
   import { formatTime, sumDurations } from '../../utils'
 
+  let list
+
   function handleRemove(i) {
     if ($current !== null && $tracks.length === 1) {
       showSnack({ message: $_('no clear during tutorial') })
@@ -32,6 +35,18 @@
     }
     clear()
   }
+
+  onMount(() =>
+    index.subscribe(async () => {
+      await tick()
+      if (list) {
+        const current = list.querySelector('.current')
+        if (current) {
+          current.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+      }
+    })
+  )
 </script>
 
 <style type="postcss">
@@ -71,7 +86,7 @@
     <Button icon="delete" class="mx-4" on:click={handleClear} />
   {/if}
 </header>
-<div>
+<div bind:this={list}>
   <SortableList
     items={$tracks}
     on:move={({ detail: { from, to } }) => move(from, to)}>

renderer/components/TracksQueue/TracksQueue.test.js

@@ -13,6 +13,11 @@ import * as snackbars from '../../stores/snackbars'
 import { addRefs, mockInvoke, sleep, translate } from '../../tests'
 
 describe('TracksQueue component', () => {
+  beforeAll(() => {
+    // JSDom does not support scrollIntoView as it doesn't do layout
+    Element.prototype.scrollIntoView = jest.fn()
+  })
+
   beforeEach(() => {
     jest.resetAllMocks()
     clear()
@@ -76,11 +81,17 @@ describe('TracksQueue component', () => {
       await tick()
 
       expect(get(index)).toEqual(2)
+      expect(
+        screen.getByText(tracks[2].tags.title).closest('.row').scrollIntoView
+      ).toHaveBeenCalled()
 
       fireEvent.click(screen.getByText(tracks[1].tags.title))
       await tick()
 
       expect(get(index)).toEqual(1)
+      expect(
+        screen.getByText(tracks[1].tags.title).closest('.row').scrollIntoView
+      ).toHaveBeenCalled()
     })
 
     it('clears tracks queue', async () => {