update: 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": {

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

@@ -38,7 +38,7 @@ const kvmInputHelp = () => {
 </script>
 
 <template>
-  <transition name="fade">
+  <transition name="fade-scale">
     <div
       ref="rootRef"
       v-if="mVisible"
@@ -62,10 +62,10 @@ const kvmInputHelp = () => {
           </select>
         </label>
 
-        <label title="Toggle video element controls" class="cursor-pointer">
-          <input type="checkbox" v-model="settingsStore.isShowControls" />
-          <span>Video Controls UI</span>
-        </label>
+        <!--<label title="Toggle video element controls" class="cursor-pointer">-->
+        <!--  <input type="checkbox" v-model="settingsStore.isShowControls" />-->
+        <!--  <span>Video Controls UI</span>-->
+        <!--</label>-->
 
         <label class="cursor-pointer">
           <input type="checkbox" v-model="settingsStore.floatUI" />

package.json

@@ -14,19 +14,26 @@ const {docked} = toRefs(props)
 </script>
 
 <template>
-  <div class="darg-button-wrapper">
+  <div class="drag-button-wrapper">
     <button :class="{docked}" class="btn-no-style btn-action-bar-drag">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
-        />
+      <!--<svg v-if="docked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">-->
+      <!--  <path-->
+      <!--    d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"-->
+      <!--  />-->
+      <!--</svg>-->
+      <svg v-if="docked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+      </svg>
+
+      <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
       </svg>
     </button>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.darg-button-wrapper {
+.drag-button-wrapper {
   position: absolute;
   top: 0;
   left: 0;
@@ -43,10 +50,14 @@ const {docked} = toRefs(props)
   line-height: 1;
   color: white;
 
-  transition: all 0.3s;
-  transform: translateY(15px);
+  transition: all 0.3s cubic-bezier(0.6, 0.08, 0.55, 1.4);
+  transform: translateY(10px);
   border-radius: var(--radius);
   //opacity: 0;
+  //background-color: red;
+  height: 10px;
+  display: flex;
+  align-items: center;
 
   &::before {
     left: -80% !important;
@@ -62,6 +73,7 @@ const {docked} = toRefs(props)
     transform: translateY(0px);
     border-radius: 0 0 var(--radius) var(--radius);
     background-color: var(--bg);
+    height: 20px;
     &::before {
       left: -100% !important;
       opacity: 1 !important;