update: add recorder

package.json

@@ -8,7 +8,8 @@
     "preview": "vite preview",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "build:tauri": "tauri build"
   },
   "dependencies": {
     "@tauri-apps/api": "^1.5.3",

src/App.vue

@@ -309,7 +309,7 @@ onMounted(() => {
           <button @click="handleScreenshot" title="Take a photo">📷Screenshot</button>
 
           <template v-if="videoRecorder">
-            <button v-if="Boolean(videoRecorder.mediaRecorder)" @click="videoRecorder.stop()" title="Take a photo" style="
+            <button v-if="Boolean(videoRecorder.mediaRecorder)" @click="videoRecorder.stop()" title="Save record" style="
     background: #F44336;">📹Save</button>
             <button v-else @click="videoRecorder.start()" title="Record canvas" >📹Record...</button>
           </template>
@@ -364,6 +364,9 @@ onMounted(() => {
       color: white;
       font-size: 12px;
     }
+    a {
+      text-decoration: none;
+    }
 
     select {
       width: 150px;

src/components/TauriActions.vue

@@ -33,7 +33,7 @@ export default defineComponent({
 
 <template>
   <button @click="toggleFullScreen">Fullscreen {{ isFull ? '✕':'' }}</button>
-  <button @click="toggleTop">Top {{ isTop ? '📌':'' }}</button>
-  <button @click="goGithub">🔗Github</button>
+  <button @click="toggleTop" title="Pin window top">Top {{ isTop ? '📌':'' }}</button>
+  <button @click="goGithub" title="Github">ℹ️</button>
 </template>
 

src/main.js

@@ -8,8 +8,8 @@ import moment from 'moment/moment'
 const timeDisplay = BUILD_TIMESTAMP ? moment(BUILD_TIMESTAMP).format('YYYY-MM-DD HH:mm:ss') : 'N/A'
 console.info(
   `%c ${pkg.name} ${pkg.version} ${import.meta.env.MODE} %c ${timeDisplay} %c`,
-  'background:#5CC19D; border-radius: 3px 0 0 3px; padding:2px 0; color: #f9f9f9; font-size: 10px;',
-  'background:#f9f9f9; border-radius: 0 3px 3px 0; padding:2px 0; color: #5CC19D; font-size: 10px; font-weight: bold;',
+  'background:#004C3F; border-radius: 3px 0 0 3px; padding:2px 0; color: #f9f9f9; font-size: 10px;',
+  'background:#f9f9f9; border-radius: 0 3px 3px 0; padding:2px 0; color: #004C3F; font-size: 10px; font-weight: bold;',
   'background:transparent'
 )
 

src/utils/video-recorder.ts

@@ -9,7 +9,7 @@ export class VideoRecorder {
     this.videoElement = videoElement;
     this.mediaRecorder = null;
     this.recordedChunks = [];
-    console.log(this)
+    console.log('[VideoRecorder]', this)
   }
 
   start() {
@@ -27,6 +27,7 @@ export class VideoRecorder {
     };
 
     this.mediaRecorder.onstop = () => {
+      console.log('record stop', this.mediaRecorder);
       const blob = new Blob(this.recordedChunks, {type: 'video/webm'});
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
@@ -38,6 +39,7 @@ export class VideoRecorder {
 
     this.recordedChunks = [];
     this.mediaRecorder.start(10);
+    console.log('record start', this.mediaRecorder);
   }
 
   stop() {