Merge pull request #145 from caorushizi/fix/addForm

fix: 🐛  release 2.2.0-beta.2

.env

@@ -1,6 +1,6 @@
 APP_NAME=mediago
 APP_ID=mediago.ziying.site
 APP_COPYRIGHT=caorushizi
-APP_VERSION=2.2.0-beta.1
+APP_VERSION=2.2.0-beta.2
 
 APP_SERVER_PORT=8433

packages/main/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediago",
-  "version": "2.2.0-beta.1",
+  "version": "2.2.0-beta.2",
   "description": "在线视频下载器",
   "main": "main/index.js",
   "author": "",

packages/main/scripts/release.ts

@@ -31,10 +31,6 @@ const options: builder.Configuration = {
     "./package.json",
   ],
   extraResources: [
-    {
-      from: "./app/mobile",
-      to: "mobile",
-    },
     {
       from: "./app/plugin",
       to: "plugin",

packages/main/src/helper/variables.ts

@@ -38,8 +38,6 @@ export const biliDownloaderBin = resolveBin("BBDown");
 export const m3u8DownloaderBin = resolveBin(downloaderBinName);
 export const videoServerBin = resolveBin("server");
 
-// mobile path
-export const mobilePath = resolveStatic("mobile");
 // plugin path
 export const pluginPath = resolveStatic("plugin/index.js");
 

packages/main/src/preload.ts

@@ -143,7 +143,7 @@ const electronApi = {
   getDownloadLog(id: number): Promise<string> {
     return ipcRenderer.invoke("get-download-log", id);
   },
-  showDownloadDialog(data: Omit<DownloadItem, "id">) {
+  showDownloadDialog(data: Omit<DownloadItem, "id">[]) {
     return ipcRenderer.invoke("show-download-dialog", data);
   },
   pluginReady() {

packages/main/src/repository/VideoRepository.ts

@@ -18,6 +18,11 @@ export default class VideoRepository {
   ) {}
 
   async addVideo(video: Omit<DownloadItem, "id">) {
+    // 先判断有没有同名的视频
+    const exist = await this.findVideoByName(video.name);
+    if (exist) {
+      throw new Error("视频名称已存在，请更换视频名称");
+    }
     const item = new Video();
     item.name = video.name;
     item.url = video.url;

packages/plugin/src/components/BilibiliButton.ts

@@ -39,7 +39,7 @@ export class BilibiliButton extends LitElement {
     const videoImage = $(BILIBILI_DOWNLOAD_BUTTON).eq(this.index);
     const url = videoImage.attr("href") || "";
     const name = videoImage.parent().find(".bili-video-card__info--tit").text();
-    showDownloadDialog({ name, url, type: "bilibili" });
+    showDownloadDialog([{ name, url, type: "bilibili" }]);
   }
 
   render() {
@@ -65,7 +65,8 @@ function bilibili() {
   });
 }
 
-bilibili();
-setInterval(() => {
-  bilibili();
-}, 3000);
+if (location.pathname === "www.bilibili.com") {
+  setInterval(() => {
+    bilibili();
+  }, 3000);
+}

packages/plugin/src/components/FloatButton.ts

@@ -4,8 +4,14 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import logo from "../assets/logo.png";
-import { addIpcListener, pluginReady, showDownloadDialog } from "../helper";
+import {
+  addIpcListener,
+  pluginReady,
+  removeIpcListener,
+  showDownloadDialog,
+} from "../helper";
 import { DownloadType } from "../../../main/types/interfaces";
+import { classMap } from "lit/directives/class-map.js";
 
 interface SourceData {
   id: number;
@@ -22,75 +28,182 @@ export class FloatButton extends LitElement {
       position: fixed;
       bottom: 20px;
       right: 20px;
-      z-index: 99999;
+      z-index: 9999999;
       cursor: pointer;
       background: #fff;
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      transition: box-shadow 0.3s ease-in-out;
       border-radius: 5px;
       height: 50px;
       width: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
+      visibility: hidden;
+      &.show {
+        visibility: visible;
+      }
       &:hover {
-        background: #f2f2f2;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
       }
       .logo-img {
         width: 45px;
         height: 45px;
+        flex: 1;
       }
       .badge {
         position: absolute;
-        right: -2px;
-        top: -2px;
+        right: -5px;
+        top: -5px;
         background: red;
         color: #fff;
         border-radius: 50%;
-        height: 6px;
-        width: 6px;
+        height: 16px;
+        width: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
+        font-size: 12px;
       }
     }
   `;
 
-  data: SourceData | null = null;
-
-  @property({ type: Number })
-  count = 0;
+  @property({ type: Array })
+  private data: SourceData[] = [];
 
-  onClick(e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-    console.log("this.data:", this.data);
+  private dragging = false;
+  private dragOccurred: boolean = false;
+  private top: number = 0;
+  private left: number = 0;
+  private offsetX: number = 0;
+  private offsetY: number = 0;
+  private button: HTMLElement | null = null;
 
+  onClick() {
+    if (this.dragOccurred) return;
     if (!this.data) return;
 
-    showDownloadDialog({
-      name: this.data.name,
-      url: this.data.url,
-      type: this.data.type,
-    });
+    showDownloadDialog(this.data);
   }
 
   firstUpdated() {
     addIpcListener("webview-link-message", this.receiveMessage);
+
+    this.button = this.renderRoot.querySelector(".mg-float-button");
+    if (this.button) {
+      const react = this.button.getBoundingClientRect();
+      this.top = react.top;
+      this.left = react.left;
+    }
+
+    window.addEventListener("resize", this.handleWindowResize);
+    document.addEventListener("mousemove", this.handleMouseMove);
+    document.addEventListener("mouseup", this.handleMouseUp);
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    removeIpcListener("webview-link-message", this.receiveMessage);
+    window.removeEventListener("resize", this.handleWindowResize);
+    document.removeEventListener("mousemove", this.handleMouseMove);
+    document.removeEventListener("mouseup", this.handleMouseUp);
   }
 
-  receiveMessage = (_: any, data: any) => {
-    this.count = 1;
-    this.data = data;
+  handleWindowResize = () => {
+    if (!this.button) return;
+
+    const { left, top } = this.getPosition(this.left, this.top);
+
+    this.left = left;
+    this.top = top;
+
+    this.button.style.left = `${this.left}px`;
+    this.button.style.top = `${this.top}px`;
   };
 
-  render() {
-    if (this.count === 0) {
-      return html``;
+  receiveMessage = (_: unknown, data: SourceData) => {
+    this.data = [...this.data, data];
+  };
+
+  handleMouseStart = (event: MouseEvent) => {
+    this.dragging = true;
+    this.dragOccurred = false;
+    this.offsetX = event.clientX - this.left;
+    this.offsetY = event.clientY - this.top;
+  };
+
+  handleMouseUp = () => {
+    this.dragging = false;
+  };
+
+  getPosition = (newLeft: number, newTop: number) => {
+    if (!this.button) return { left: 0, top: 0 };
+
+    // 获取滚动条的宽度
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+
+    // 获取窗口的宽度和高度
+    const windowWidth =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth;
+    const windowHeight =
+      window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight;
+
+    // 确保按钮不会被拖出屏幕
+    if (newLeft < 0) {
+      newLeft = 0;
+    } else if (
+      newLeft + this.button.offsetWidth >
+      windowWidth - scrollbarWidth
+    ) {
+      newLeft = windowWidth - this.button.offsetWidth - scrollbarWidth;
+    }
+
+    if (newTop < 0) {
+      newTop = 0;
+    } else if (newTop + this.button.offsetHeight > windowHeight) {
+      newTop = windowHeight - this.button.offsetHeight;
     }
 
-    return html`<div class="mg-float-button" @click=${this.onClick}>
-      <img class="logo-img" src=${logo} />
-      <span class="badge"></span>
+    return {
+      left: newLeft,
+      top: newTop,
+    };
+  };
+
+  handleMouseMove = (event: MouseEvent) => {
+    if (this.dragging && this.button) {
+      this.dragOccurred = true;
+      const newLeft = event.clientX - this.offsetX;
+      const newTop = event.clientY - this.offsetY;
+
+      const { left, top } = this.getPosition(newLeft, newTop);
+      this.left = left;
+      this.top = top;
+      this.button.style.left = `${this.left}px`;
+      this.button.style.top = `${this.top}px`;
+    }
+  };
+
+  render() {
+    const classes = {
+      "mg-float-button": true,
+      show: this.data.length > 0,
+    };
+
+    return html`<div
+      @click=${this.onClick}
+      @mousedown=${this.handleMouseStart}
+      draggable="false"
+      class=${classMap(classes)}
+    >
+      <img class="logo-img" src=${logo} draggable="false" />
+      <span class="badge">${this.data.length}</span>
     </div>`;
   }
 }

packages/plugin/src/helper/index.ts

@@ -33,7 +33,7 @@ export function downloadItem(item: Item) {
   window.electron.downloadItem(item);
 }
 
-export function showDownloadDialog(item: Item) {
+export function showDownloadDialog(item: Item[]) {
   window.electron.showDownloadDialog(item);
 }