fix: force empty queue in live mode (#119)

core/rating/api/views.py

@@ -8,6 +8,7 @@
 from drf_spectacular.utils import extend_schema
 from rest_framework import status
 from rest_framework.response import Response
+from rest_framework.throttling import ScopedRateThrottle
 from rest_framework.views import APIView
 
 from ..models import Vote
@@ -16,7 +17,12 @@
 log = logging.getLogger(__name__)
 
 
-class ObjectRatingView(APIView):
+class ObjectRatingView(
+    APIView,
+):
+    throttle_classes = [ScopedRateThrottle]
+    throttle_scope = "rating.vote"
+
     @transaction.atomic
     def get_vote(self, request, obj_ct, obj_uid):
         app_label, model = obj_ct.split(".")

core/settings/base.py

@@ -414,6 +414,7 @@
         "user": "240/minute",
         "subscription.voucher": "10/hour",
         "account.login_email": "20/hour",
+        "rating.vote": "1200/minute",  # NOTE: implement separate limit for POST
     },
     "DEFAULT_SCHEMA_CLASS": "drf_spectacular.openapi.AutoSchema",
     # 'DEFAULT_METADATA_CLASS': 'rest_framework.metadata.SimpleMetadata',

src/components/player/Queue.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 
 import QueueMedia from "@/components/player/QueueMedia.vue";
@@ -26,9 +26,17 @@ export default defineComponent({
   emits: ["close"],
   setup(props, { emit }) {
     const { isMobile } = useDevice();
-    const { currentMedia, queuedMedia } = useQueueState();
+    const { currentMedia, queuedMedia, queueLength } = useQueueState();
     const { clearQueue } = useQueueControls();
     const close = () => emit("close");
+    watch(
+      () => queueLength.value,
+      (newValue) => {
+        if (newValue < 1) {
+          close();
+        }
+      }
+    );
     useEventListener(document, "keydown", (e) => {
       if (e.code === "KeyX") {
         close();

src/composables/queue.ts

@@ -159,7 +159,7 @@ const useQueueControls = () => {
   // mapping actions depending on mode
   const clearQueue = async (): Promise<void> => {
     if (isWeb) {
-      await clearQueueWeb();
+      await clearQueueWeb(isLive.value);
     } else {
       const channel = "queue:clear";
       await appBridge.send(channel);

src/stores/queue.ts

@@ -91,10 +91,15 @@ export const useQueueStore = defineStore("queue", {
       const tail = this.media.slice(splitAt);
       this.media = [...head, ...shuffle(tail)];
     },
-    async clearQueue(): Promise<void> {
-      log.debug("queueStore - clearQueue");
-      this.media = this.media.slice(this.currentIndex, this.currentIndex + 1);
-      this.currentIndex = 0;
+    async clearQueue(force = false): Promise<void> {
+      log.debug("queueStore - clearQueue", { force });
+      if (force) {
+        this.media = [];
+        this.currentIndex = -1;
+      } else {
+        this.media = this.media.slice(this.currentIndex, this.currentIndex + 1);
+        this.currentIndex = 0;
+      }
     },
     // replace complete queue state
     // this method is used when running in "App-mode" and queue data is handled by native app