From 20acca87e499dce7f89bd75a5fed4f803bd2fd43 Mon Sep 17 00:00:00 2001
From: Koushik Dutta <koush@Koushik-MacStudio.localdomain>
Date: Fri, 12 Aug 2022 17:22:56 -0700
Subject: [PATCH] core: fix video clip bugs

---
 plugins/core/.vscode/settings.json            |  2 +-
 plugins/core/package-lock.json                |  4 +--
 plugins/core/package.json                     |  2 +-
 plugins/core/ui/src/common/videoclip.ts       |  4 +--
 plugins/core/ui/src/interfaces/VideoClips.vue | 36 +++++++------------
 5 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/plugins/core/.vscode/settings.json b/plugins/core/.vscode/settings.json
index 1d973b7ea..79c896063 100644
--- a/plugins/core/.vscode/settings.json
+++ b/plugins/core/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "scrypted.debugHost": "koushik-mac",
+    "scrypted.debugHost": "127.0.0.1",
 }
\ No newline at end of file
diff --git a/plugins/core/package-lock.json b/plugins/core/package-lock.json
index f2dff3b31..1b981e346 100644
--- a/plugins/core/package-lock.json
+++ b/plugins/core/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.22",
+   "version": "0.1.23",
    "lockfileVersion": 2,
    "requires": true,
    "packages": {
       "": {
          "name": "@scrypted/core",
-         "version": "0.1.22",
+         "version": "0.1.23",
          "hasInstallScript": true,
          "license": "Apache-2.0",
          "dependencies": {
diff --git a/plugins/core/package.json b/plugins/core/package.json
index 378c5877f..558b6922c 100644
--- a/plugins/core/package.json
+++ b/plugins/core/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@scrypted/core",
-   "version": "0.1.22",
+   "version": "0.1.23",
    "description": "Scrypted Core plugin. Provides the UI, websocket, and engine.io APIs.",
    "author": "Scrypted",
    "license": "Apache-2.0",
diff --git a/plugins/core/ui/src/common/videoclip.ts b/plugins/core/ui/src/common/videoclip.ts
index e0ab1c4ab..78a355b03 100644
--- a/plugins/core/ui/src/common/videoclip.ts
+++ b/plugins/core/ui/src/common/videoclip.ts
@@ -6,11 +6,11 @@ import { VideoClip } from "@scrypted/types";
 export async function fetchClipThumbnail(mediaManager: MediaManager, device: VideoClips, clip: VideoClip) {
     const mo = await device.getVideoClipThumbnail(clip.id);
     const url = await mediaManager.convertMediaObject(mo, ScryptedMimeTypes.LocalUrl);
-    return new URL(url.toString()).pathname;
+    return url.toString();
 }
 
 export async function fetchClipUrl(mediaManager: MediaManager, device: VideoClips, clip: VideoClip) {
     const mo = await device.getVideoClip(clip.id);
     const url = await mediaManager.convertMediaObject(mo, ScryptedMimeTypes.LocalUrl);
-    return new URL(url.toString()).pathname;
+    return url.toString();
 }
diff --git a/plugins/core/ui/src/interfaces/VideoClips.vue b/plugins/core/ui/src/interfaces/VideoClips.vue
index e0885b3a3..6c2f528ed 100644
--- a/plugins/core/ui/src/interfaces/VideoClips.vue
+++ b/plugins/core/ui/src/interfaces/VideoClips.vue
@@ -4,18 +4,8 @@
       <video :src="playUrl" controls autoplay></video>
     </v-dialog>
 
-    <v-list-item
-      v-for="(clip, index) in pageClips"
-      :key="clip.id"
-      @click="playClip(clip, index)"
-    >
-      <v-img
-        class="mr-2"
-        :src="pageThumbnails[index]"
-        contain
-        max-height="100px"
-        max-width="100px"
-      >
+    <v-list-item v-for="(clip, index) in pageClips" :key="clip.id" @click="playClip(clip, index)">
+      <v-img class="mr-2" :src="pageThumbnails[index]" contain max-height="100px" max-width="100px">
       </v-img>
       <v-list-item-content>
         <v-list-item-title>
@@ -61,21 +51,17 @@
       <v-spacer></v-spacer>
       <v-dialog v-model="removeAllClipsDialog" v-if="pages" width="unset">
         <template v-slot:activator="{ on }">
-          <v-btn v-on="on" small text color="red"
-            ><v-icon x-small>fa fa-trash</v-icon></v-btn
-          >
+          <v-btn v-on="on" small text color="red">
+            <v-icon x-small>fa fa-trash</v-icon>
+          </v-btn>
         </template>
         <v-card>
           <v-card-title> Delete All Clips? </v-card-title>
-          <v-card-text
-            >Please confirm deletion of all video clips. This action can not be
-            undone.</v-card-text
-          >
+          <v-card-text>Please confirm deletion of all video clips. This action can not be
+            undone.</v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn small text @click="removeAllClipsDialog = false"
-              >Cancel</v-btn
-            >
+            <v-btn small text @click="removeAllClipsDialog = false">Cancel</v-btn>
             <v-btn small text color="red" @click="removeAllClips">Delete</v-btn>
           </v-card-actions>
         </v-card>
@@ -88,6 +74,7 @@ import { datePickerLocalTimeToUTC } from "../common/date";
 import { fetchClipThumbnail, fetchClipUrl } from "../common/videoclip";
 import RPCInterface from "./RPCInterface.vue";
 import Vue from "vue";
+import path from "path";
 
 export default {
   mixins: [RPCInterface],
@@ -189,7 +176,10 @@ export default {
     async downloadClip(clip) {
       const mediaManager = this.$scrypted.mediaManager;
       const url = await fetchClipUrl(mediaManager, this.device, clip);
-      window.open(url + "?attachment");
+      const a = document.createElement('a');
+      a.setAttribute('href', url);
+      a.setAttribute('download', path.basename(url));
+      a.click();
     },
     async removeClip(clip) {
       this.device.removeVideoClips(clip.id);