Fix multi-select, add new book flag

2024-12-20 19:06:06 +01:00 · 2021-09-01 13:47:18 -05:00 · 2021-09-01 13:47:18 -05:00 · 0c017c4227
commit 0c017c4227
parent 234653b549
15 changed files with 106 additions and 36 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -8,6 +8,6 @@ npm-debug.log
 /audiobooks2
 /metadata
 dev.js
-/test/
+test/
 /client/.nuxt/
 /client/dist/
--- a/.gitignore
+++ b/.gitignore
@ -5,6 +5,6 @@ node_modules/
 /audiobooks/
 /audiobooks2/
 /metadata/
-/test/
+test/
 /client/.nuxt/
 /client/dist/
--- a/client/assets/app.css
+++ b/client/assets/app.css
@ -62,6 +62,14 @@
  border-right: 6px solid transparent;
  border-top: 6px solid white;
 }
+.triangle-right {
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-top: 8px solid rgb(34,127,35);
+  border-right: 8px solid rgb(34,127,35);
+}

 .icon-text {
  font-size: 1.1rem;
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@ -6,7 +6,7 @@
        <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">
          <span class="material-icons text-4xl text-white">arrow_back</span>
        </a>
-        <h1 class="text-2xl font-book">AudioBookshelf</h1>
+        <h1 class="text-2xl font-book mr-6">AudioBookshelf</h1>

        <controls-global-search />
        <div class="flex-grow" />
--- a/client/components/cards/BookCard.vue
+++ b/client/components/cards/BookCard.vue
@ -1,31 +1,41 @@
 <template>
-  <div class="rounded-sm h-full overflow-hidden relative bookCard" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
-    <nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
-      <div class="w-full relative" :style="{ height: height + 'px' }">
-        <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
+  <div class="relative">
+    <!-- New Book Flag -->
+    <div v-show="isNew" class="absolute top-4 left-0 w-4 h-10 pr-2 bg-darkgreen box-shadow-xl">
+      <div class="absolute top-0 left-0 w-full h-full transform -rotate-90 flex items-center justify-center">
+        <p class="text-center text-sm">New</p>
+      </div>
+      <div class="absolute -bottom-4 left-0 triangle-right" />
+    </div>

-        <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
-          <div v-show="!isSelectionMode" class="h-full flex items-center justify-center">
-            <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
-              <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
+    <div class="rounded-sm h-full overflow-hidden relative bookCard" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
+      <nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
+        <div class="w-full relative" :style="{ height: height + 'px' }">
+          <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
+
+          <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
+            <div v-show="!isSelectionMode" class="h-full flex items-center justify-center">
+              <div class="hover:text-gray-200 hover:scale-110 transform duration-200" @click.stop.prevent="play">
+                <span class="material-icons" :style="{ fontSize: playIconFontSize + 'rem' }">play_circle_filled</span>
+              </div>
+            </div>
+            <div v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
+              <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
+            </div>
+            <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
+              <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
            </div>
          </div>
-          <div v-show="!isSelectionMode" class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-50" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="editClick">
-            <span class="material-icons" :style="{ fontSize: sizeMultiplier + 'rem' }">edit</span>
-          </div>
-          <div class="absolute cursor-pointer hover:text-yellow-300 hover:scale-125 transform duration-100" :style="{ top: 0.375 * sizeMultiplier + 'rem', left: 0.375 * sizeMultiplier + 'rem' }" @click.stop.prevent="selectBtnClick">
-            <span class="material-icons" :class="selected ? 'text-yellow-400' : ''" :style="{ fontSize: 1.25 * sizeMultiplier + 'rem' }">{{ selected ? 'radio_button_checked' : 'radio_button_unchecked' }}</span>
-          </div>
-        </div>
-        <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>
+          <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 bg-yellow-400 shadow-sm" :style="{ width: width * userProgressPercent + 'px' }"></div>

-        <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0">
-          <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
-            <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
-          </div>
-        </ui-tooltip>
-      </div>
-    </nuxt-link>
+          <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0">
+            <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
+              <span class="material-icons text-red-100 pr-1" :style="{ fontSize: 0.875 * sizeMultiplier + 'rem' }">priority_high</span>
+            </div>
+          </ui-tooltip>
+        </div>
+      </nuxt-link>
+    </div>
  </div>
 </template>

@ -51,6 +61,12 @@ export default {
    }
  },
  computed: {
+    isNew() {
+      return this.tags.includes('new')
+    },
+    tags() {
+      return this.audiobook.tags || []
+    },
    audiobookId() {
      return this.audiobook.id
    },
--- a/client/components/controls/FilterSelect.vue
+++ b/client/components/controls/FilterSelect.vue
@ -115,9 +115,6 @@ export default {
      if (!_sel) return ''
      return _sel.text
    },
-    authors() {
-      return this.$store.getters['audiobooks/getUniqueAuthors']
-    },
    genres() {
      return this.$store.state.audiobooks.genres
    },
--- a/client/components/ui/MultiSelect.vue
+++ b/client/components/ui/MultiSelect.vue
@ -103,7 +103,6 @@ export default {
      this.menu.style.top = boundingBox.y + boundingBox.height - 4 + 'px'
      this.menu.style.left = boundingBox.x + 'px'
      this.menu.style.width = boundingBox.width + 'px'
-      console.log('Recalc menu pos', boundingBox.height)
    },
    unmountMountMenu() {
      if (!this.$refs.menu) return
@ -138,8 +137,10 @@ export default {
      if (this.$refs.input) this.$refs.input.blur()
    },
    clickedOption(e, itemValue) {
-      e.stopPropagation()
-      e.preventDefault()
+      if (e) {
+        e.stopPropagation()
+        e.preventDefault()
+      }
      if (this.$refs.input) this.$refs.input.focus()

      var newSelected = null
@ -187,7 +188,7 @@ export default {
        return i === cleaned || cleanedKebab === i
      })
      if (matchesItem) {
-        this.clickedOption(matchesItem.value)
+        this.clickedOption(null, matchesItem)
      } else {
        this.insertNewItem(this.textInput)
      }
--- a/client/nuxt.config.js
+++ b/client/nuxt.config.js
@ -36,6 +36,7 @@ module.exports = {
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Fira+Mono&family=Ubuntu+Mono&family=Open+Sans:wght@400;600&family=Gentium+Book+Basic' },
+      { rel: 'stylesheet', href: "https://fonts.googleapis.com/css2?family=Fondamento&family=Gentium+Book+Basic&family=Kurale&family=Lateef&family=Mate+SC&family=Merienda&display=swap" },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
    ]
  },
--- a/client/package.json
+++ b/client/package.json
@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf-client",
-  "version": "0.9.86-beta",
+  "version": "0.9.87-beta",
  "description": "Audiobook manager and player",
  "main": "index.js",
  "scripts": {
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@ -23,6 +23,7 @@ module.exports = {
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
+        darkgreen: 'rgb(34,127,35)',
        'black-50': '#bbbbbb',
        'black-100': '#666666',
        'black-200': '#555555',
@ -38,7 +39,12 @@ module.exports = {
      fontFamily: {
        sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
        mono: ['Ubuntu Mono', ...defaultTheme.fontFamily.mono],
-        book: ['Gentium Book Basic', 'serif']
+        book: ['Gentium Book Basic', 'serif'],
+        fondamento: 'Fondamento',
+        gentium: 'Gentium Book Basic',
+        kurale: 'Kurale',
+        mate: 'Mate SC',
+        merienda: 'Merienda'
      }
    }
  },
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf",
-  "version": "0.9.86-beta",
+  "version": "0.9.87-beta",
  "description": "Self-hosted audiobook server for managing and playing audiobooks.",
  "main": "index.js",
  "scripts": {
--- a/server/HlsController.js
+++ b/server/HlsController.js
@ -30,6 +30,12 @@ class HlsController {
    var streamId = req.params.stream
    var fullFilePath = Path.join(this.MetadataPath, streamId, req.params.file)

+    // development test stream - ignore
+    if (streamId === 'test') {
+      Logger.debug('Test Stream Request', streamId, req.headers, fullFilePath)
+      return res.sendFile(fullFilePath)
+    }
+
    var exists = await fs.pathExists(fullFilePath)
    if (!exists) {
      Logger.warn('File path does not exist', fullFilePath)
--- a/server/RssFeeds.js
+++ b/server/RssFeeds.js
@ -3,6 +3,7 @@ const express = require('express')
 const ip = require('ip')
 const Logger = require('./Logger')

+// Not functional at the moment - just an idea
 class RssFeeds {
  constructor(Port, db) {
    this.Port = Port
--- a/server/Server.js
+++ b/server/Server.js
@ -133,6 +133,7 @@ class Server {

    app.use('/api', this.authMiddleware.bind(this), this.apiController.router)
    app.use('/hls', this.authMiddleware.bind(this), this.hlsController.router)
+    // app.use('/hls', this.hlsController.router)
    app.use('/feeds', this.rssFeeds.router)

    app.post('/login', (req, res) => this.auth.login(req, res))
@ -142,6 +143,21 @@ class Server {
      res.json({ success: true })
    })

+
+    // Used in development to set-up streams without authentication
+    if (process.env.NODE_ENV !== 'production') {
+      app.use('/test-hls', this.hlsController.router)
+      app.get('/test-stream/:id', async (req, res) => {
+        var uri = await this.streamManager.openTestStream(this.MetadataPath, req.params.id)
+        res.send(uri)
+      })
+      app.get('/catalog.json', (req, res) => {
+        Logger.error('Catalog request made', req.headers)
+        res.json()
+      })
+    }
+
+
    this.server.listen(this.Port, this.Host, () => {
      Logger.info(`Running on http://${this.Host}:${this.Port}`)
    })
--- a/server/StreamManager.js
+++ b/server/StreamManager.js
@ -1,4 +1,5 @@
 const Stream = require('./Stream')
+const StreamTest = require('./test/StreamTest')
 const Logger = require('./Logger')
 const fs = require('fs-extra')
 const Path = require('path')
@ -100,6 +101,23 @@ class StreamManager {
    this.db.updateUserStream(client.user.id, null)
  }

+  async openTestStream(streamPath, audiobookId) {
+    Logger.info('Open Stream Test Request', audiobookId)
+    var audiobook = this.audiobooks.find(ab => ab.id === audiobookId)
+    var stream = new StreamTest(streamPath, audiobook)
+
+    stream.on('closed', () => {
+      console.log('Stream closed')
+    })
+
+    var playlistUri = await stream.generatePlaylist()
+    stream.start()
+
+    Logger.info('Stream Playlist', playlistUri)
+    Logger.info('Test Stream Opened for audiobook', audiobook.title, 'with streamId', stream.id)
+    return playlistUri
+  }
+
  streamUpdate(socket, { currentTime, streamId }) {
    var client = socket.sheepClient
    if (!client || !client.stream) {