Merge pull request #3 from canwdev/dev-kvm

optimize ui

Author: canwdev

.eslintrc.cjs

@@ -3,13 +3,13 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 
 module.exports = {
   root: true,
-  'extends': [
+  extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier'
+    '@vue/eslint-config-prettier',
   ],
   parserOptions: {
-    ecmaVersion: 'latest'
-  }
+    ecmaVersion: 'latest',
+  },
 }

README-en.md

@@ -0,0 +1,51 @@
+## Web MediaDevices Player
+
+A web application for playing system [video/audio] input devices using the [Media Capture and Streams API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) technology.
+
+- Web version: https://canwdev.github.io/web-mediadevices-player/
+- Tauri packaged client: [Releases](https://github.com/canwdev/web-mediadevices-player/releases)
+- [Chinese Readme](./README.md)
+
+Main purposes:
+- View HDMI to USB capture card
+- Play webcam videos, desktop screen recording
+- Capture screenshots and record in webm format
+- v1.1.5 New features
+    - [CH9329](https://one-kvm.mofeng.run/ch9329_hid/) KVM keyboard and mouse control, ref: [webusbkvm](https://github.com/kkocdko/kblog/blob/master/source/toys/webusbkvm/README.md)
+    - Supports relative mouse, absolute mouse, hotkeys, and ASCII text sending.
+    - Video screen QR code scanning
+
+![screenshot](docs/screenshot-2.jpg)
+![screenshot](docs/screenshot-3.jpg)
+![screenshot](docs/screenshot.png)
+
+Tips:
+- The first time you use it, it will request camera and microphone permissions. You can reject microphone permissions if not needed. After requesting, it will wait a few seconds to load the devices.
+- This page must run in https or localhost environments. Other environments (such as: filesystem) do not have access to devices.
+- There may be issues with dragging the progress bar of the recorded webm video. Manually transcoding it to mp4 can solve the problem.
+
+## Development
+
+> Contributions are welcome
+
+```sh
+# Install dependencies
+yarn install
+
+# Development mode
+yarn dev
+
+# Build the Web version
+yarn build
+
+# Build Tauri App
+yarn build:tauri
+```
+
+---
+
+## Star History
+
+- Thanks for your stars https://www.ruanyifeng.com/blog/2024/06/weekly-issue-303.html
+
+[![Star History Chart](https://api.star-history.com/svg?repos=canwdev/web-mediadevices-player&type=Date)](https://star-history.com/#canwdev/web-mediadevices-player&Date)

README.md

@@ -4,7 +4,7 @@
 
 - 网页版：https://canwdev.github.io/web-mediadevices-player/
 - Tauri 打包的客户端：[Releases](https://github.com/canwdev/web-mediadevices-player/releases)
-- [English Readme](https://github.com/canwdev/web-mediadevices-player/tree/master?tab=readme-ov-file#english)
+- [English Readme](./README-en.md)
 
 主要用途：
 - HDMI to USB 采集卡查看
@@ -15,9 +15,9 @@
   - 支持相对鼠标、绝对鼠标、快捷键、ASCII文本发送
   - 视频画面二维码扫描
 
-![screenshot](screenshot-2.jpg)
-![screenshot](screenshot-3.jpg)
-![screenshot](screenshot.png)
+![screenshot](docs/screenshot-2.jpg)
+![screenshot](docs/screenshot-3.jpg)
+![screenshot](docs/screenshot.png)
 
 提示：
 - 首次使用会请求摄像头和麦克风权限，如果不需要麦克风权限可以拒绝，请求过后会等待几秒钟加载设备。
@@ -46,45 +46,8 @@ yarn build:tauri
 
 ---
 
-## English
+## Star History
 
-A web application for playing system [video/audio] input devices using the [Media Capture and Streams API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) technology.
+- Thanks for your stars https://www.ruanyifeng.com/blog/2024/06/weekly-issue-303.html
 
-- Web version: https://canwdev.github.io/web-mediadevices-player/
-- Tauri packaged client: [Releases](https://github.com/canwdev/web-mediadevices-player/releases)
-
-Main purposes:
-- View HDMI to USB capture card
-- Play webcam videos, desktop screen recording
-- Capture screenshots and record in webm format
-- v1.1.5 New features
-  - [CH9329](https://one-kvm.mofeng.run/ch9329_hid/) KVM keyboard and mouse control, ref: [webusbkvm](https://github.com/kkocdko/kblog/blob/master/source/toys/webusbkvm/README.md)
-  - Supports relative mouse, absolute mouse, hotkeys, and ASCII text sending.
-  - Video screen QR code scanning
-
-![screenshot](screenshot-2.jpg)
-![screenshot](screenshot-3.jpg)
-![screenshot](screenshot.png)
-
-Tips:
-- The first time you use it, it will request camera and microphone permissions. You can reject microphone permissions if not needed. After requesting, it will wait a few seconds to load the devices.
-- This page must run in https or localhost environments. Other environments (such as: filesystem) do not have access to devices.
-- There may be issues with dragging the progress bar of the recorded webm video. Manually transcoding it to mp4 can solve the problem.
-
-## Development
-
-> Contributions are welcome
-
-```sh
-# Install dependencies
-yarn install
-
-# Development mode
-yarn dev
-
-# Build the Web version
-yarn build
-
-# Build Tauri App
-yarn build:tauri
-```
+[![Star History Chart](https://api.star-history.com/svg?repos=canwdev/web-mediadevices-player&type=Date)](https://star-history.com/#canwdev/web-mediadevices-player&Date)

screenshot-2.jpg renamed to docs/screenshot-2.jpg

@@ -1,6 +1,6 @@
 {
   "name": "web-mediadevices-player",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -15,6 +15,7 @@
     "build:tauri": "tauri build"
   },
   "dependencies": {
+    "@mdi/font": "^7.4.47",
     "@tauri-apps/api": "^1.5.3",
     "@vueuse/core": "^10.10.0",
     "jsqr": "^1.4.0",

screenshot-3.jpg renamed to docs/screenshot-3.jpg

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "web-mediadevices-player",
-    "version": "1.1.5"
+    "version": "1.1.6"
   },
   "tauri": {
     "allowlist": {

screenshot.png renamed to docs/screenshot.png

@@ -164,3 +164,17 @@
 .fadeMove-leave-active {
   position: absolute;
 }
+
+
+// animation: linear blink-animation 3s infinite;
+@keyframes blink-animation {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}