FEAT: Optimize code & add hlsPlayer

rust-learning-examples · Aug 7, 2022 · 7d416f7 · 7d416f7
1 parent 18ee631
commit 7d416f7
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 682 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "dev-toolbox",
   "private": true,
   "main": "index.js",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -17,6 +17,7 @@
     "ace-builds": "^1.8.1",
     "axios": "^0.27.2",
     "element-plus": "^2.2.8",
+    "hls-player.js": "^0.0.2",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "pinia-plugin-persistedstate": "^1.6.1",

diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -36,8 +36,6 @@ hyper-tls = "0.5"
 tower = { version = "0.4", features = ["make"] }
 tower-http = { version = "0.3", features = ["cors"] }
 
-
-
 [dependencies.tauri-plugin-sqlite]
 git = "https://github.com/lzdyes/tauri-plugin-sqlite"
 tag = "v0.1.1"

diff --git a/src-tauri/src/code_snippet.rs b/src-tauri/src/code_snippet.rs
@@ -3,23 +3,23 @@ use once_cell::sync::Lazy;
 use std::sync::{Mutex, Arc};
 
 pub struct KeyboardEventsHandler {
-allow_record: Arc<Mutex<bool>>,
-is_shift: Arc<Mutex<bool>>,
-input_text: Arc<Mutex<String>>,
+allow_record: bool,
+is_shift: bool,
+input_text: String,
 }
 
 impl Default for KeyboardEventsHandler {
   fn default() -> Self {
     Self {
-      allow_record: Arc::new(Mutex::new(false)),
-      is_shift: Arc::new(Mutex::new(false)),
-      input_text: Arc::new(Mutex::new("".into())),
+      allow_record: false,
+      is_shift: false,
+      input_text: "".into(),
     }
   }
  }
 
-static KEYBOARD_EVENTS_HANDLER: Lazy<KeyboardEventsHandler> = Lazy::new(|| {
-  KeyboardEventsHandler::default()
+static KEYBOARD_EVENTS_HANDLER: Lazy<Arc<Mutex<KeyboardEventsHandler>>> = Lazy::new(|| {
+  Arc::new(Mutex::new(KeyboardEventsHandler::default()))
 });
 
 enum RegexWord {
@@ -36,8 +36,8 @@ pub fn watch<E>(executor: E) where E: Fn(String) -> () + Send + Sync + 'static {
     let key = key.to_string();
     // println!("in-- key: {}", key);
     if regex::Regex::new(r"Shift$").unwrap().is_match(&key) {
-      let mut is_shift = KEYBOARD_EVENTS_HANDLER.is_shift.lock().unwrap();
-      *is_shift = true;
+      let mut global_keyboard_events_handler = KEYBOARD_EVENTS_HANDLER.lock().unwrap();
+      global_keyboard_events_handler.is_shift = true;
     } else {
       let get_record_word = || {
         let key = regex::Regex::new(r"^Key").unwrap().replace(&key, "").to_string();
@@ -78,24 +78,22 @@ pub fn watch<E>(executor: E) where E: Fn(String) -> () + Send + Sync + 'static {
       };
 
       let record_word = get_record_word();
-      let is_shift = KEYBOARD_EVENTS_HANDLER.is_shift.lock().unwrap();
-      let mut allow_record = KEYBOARD_EVENTS_HANDLER.allow_record.lock().unwrap();
-      let mut input_text = KEYBOARD_EVENTS_HANDLER.input_text.lock().unwrap();
 
       match &record_word {
         RegexWord::ShiftText(key) => {
-          if *is_shift {
+          let mut global_keyboard_events_handler = KEYBOARD_EVENTS_HANDLER.lock().unwrap();
+          if global_keyboard_events_handler.is_shift {
             match key.as_str() {
               "·" => {
-                *input_text = "".to_string();
-                *allow_record = true;
+                global_keyboard_events_handler.input_text = "".to_string();
+                global_keyboard_events_handler.allow_record = true;
               },
               "/" => {
-                if *allow_record && input_text.len() > 0 {
-                  executor((*input_text).clone());
+                if global_keyboard_events_handler.allow_record && global_keyboard_events_handler.input_text.len() > 0 {
+                  executor(global_keyboard_events_handler.input_text.clone());
                 }
-                *input_text = "".to_string();
-                *allow_record = false;
+                global_keyboard_events_handler.input_text = "".to_string();
+                global_keyboard_events_handler.allow_record = false;
               },
               _ => ()
             }
@@ -104,44 +102,45 @@ pub fn watch<E>(executor: E) where E: Fn(String) -> () + Send + Sync + 'static {
         _ => ()
       }
 
-      if *allow_record {
+      let mut global_keyboard_events_handler = KEYBOARD_EVENTS_HANDLER.lock().unwrap();
+      if global_keyboard_events_handler.allow_record {
         match &record_word {
           RegexWord::Text(key) => {
-            (*input_text).push_str(&key);
+            global_keyboard_events_handler.input_text.push_str(&key);
           },
           RegexWord::ShiftText(key) => {
-            if *is_shift {
+            if global_keyboard_events_handler.is_shift {
               match key.as_str() {
-                "1" => (*input_text).push_str("!"),
-                "2" => (*input_text).push_str("@"),
-                "3" => (*input_text).push_str("#"),
-                "4" => (*input_text).push_str("$"),
-                "5" => (*input_text).push_str("%"),
-                "6" => (*input_text).push_str("^"),
-                "7" => (*input_text).push_str("&"),
-                "8" => (*input_text).push_str("*"),
-                "9" => (*input_text).push_str("("),
-                "0" => (*input_text).push_str(")"),
+                "1" => global_keyboard_events_handler.input_text.push_str("!"),
+                "2" => global_keyboard_events_handler.input_text.push_str("@"),
+                "3" => global_keyboard_events_handler.input_text.push_str("#"),
+                "4" => global_keyboard_events_handler.input_text.push_str("$"),
+                "5" => global_keyboard_events_handler.input_text.push_str("%"),
+                "6" => global_keyboard_events_handler.input_text.push_str("^"),
+                "7" => global_keyboard_events_handler.input_text.push_str("&"),
+                "8" => global_keyboard_events_handler.input_text.push_str("*"),
+                "9" => global_keyboard_events_handler.input_text.push_str("("),
+                "0" => global_keyboard_events_handler.input_text.push_str(")"),
                 // "·" => (*input_text).push_str("~"), // start
-                "-" => (*input_text).push_str("_"),
-                "=" => (*input_text).push_str("+"),
-                "[" => (*input_text).push_str("{"),
-                "]" => (*input_text).push_str("}"),
-                "\\" => (*input_text).push_str("|"),
-                ";" => (*input_text).push_str(":"),
-                "'" => (*input_text).push_str("\""),
-                "," => (*input_text).push_str("<"),
-                "." => (*input_text).push_str(">"),
+                "-" => global_keyboard_events_handler.input_text.push_str("_"),
+                "=" => global_keyboard_events_handler.input_text.push_str("+"),
+                "[" => global_keyboard_events_handler.input_text.push_str("{"),
+                "]" => global_keyboard_events_handler.input_text.push_str("}"),
+                "\\" => global_keyboard_events_handler.input_text.push_str("|"),
+                ";" => global_keyboard_events_handler.input_text.push_str(":"),
+                "'" => global_keyboard_events_handler.input_text.push_str("\""),
+                "," => global_keyboard_events_handler.input_text.push_str("<"),
+                "." => global_keyboard_events_handler.input_text.push_str(">"),
                 // "/" => (*input_text).push_str("?"), // end
                 _ => ()
               }
             } else {
-              (*input_text).push_str(&key);
+              global_keyboard_events_handler.input_text.push_str(&key);
             }
           },
           RegexWord::Tab => {},
           RegexWord::Delete => {
-            (*input_text).pop();
+            global_keyboard_events_handler.input_text.pop();
           },
           _ => {}
         }
@@ -155,8 +154,8 @@ pub fn watch<E>(executor: E) where E: Fn(String) -> () + Send + Sync + 'static {
     let key = key.to_string();
     // println!("out-- key: {}", key);
     if regex::Regex::new(r"Shift$").unwrap().is_match(&key) {
-      let mut is_shift = KEYBOARD_EVENTS_HANDLER.is_shift.lock().unwrap();
-      *is_shift = false;
+      let mut global_keyboard_events_handler = KEYBOARD_EVENTS_HANDLER.lock().unwrap();
+      global_keyboard_events_handler.is_shift = false;
     }
   });
   loop {}

diff --git a/src-tauri/src/http/mod.rs b/src-tauri/src/http/mod.rs
@@ -1,14 +1,14 @@
 pub mod handler;
-pub mod config;
+// pub mod config;
 use std::net::SocketAddr;
 use axum::{routing, Router};
 
-use once_cell::sync::Lazy;
-use std::sync::{Mutex, Arc};
+// use once_cell::sync::Lazy;
+// use std::sync::{Mutex, Arc};
 
-pub static CONFIG: Lazy<Arc<Mutex<config::Config>>> = Lazy::new(|| {
-  Arc::new(Mutex::new(config::Config::default()))
-});
+// pub static CONFIG: Lazy<Arc<Mutex<config::Config>>> = Lazy::new(|| {
+//   Arc::new(Mutex::new(config::Config::default()))
+// });
 
 pub async fn listen(port: u16) -> Result<(), &'static str> {
 

diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -15,10 +15,10 @@ fn code_snippet_handler(input_text: String, replace_content: String) -> Result<(
 #[tauri::command]
 async fn start_http_server_handler(port: u16) -> Result<(), &'static str> {
   println!("Starting http server..{}.", port);
-  {
-    let mut config = http::CONFIG.lock().unwrap();
-    (*config).port = port;
-  }
+  // {
+  //   let mut config = http::CONFIG.lock().unwrap();
+  //   (*config).port = port;
+  // }
   match http::listen(port).await {
     Ok(()) => {
       Ok(())

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "dev-toolbox",
-    "version": "0.0.1"
+    "version": "0.0.2"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
@@ -24,6 +24,7 @@ export default defineComponent({
           router.getRoute('home'),
           router.getRoute('codeSpippets'),
           router.getRoute('httpProxy'),
+          router.getRoute('hlsPlayer'),
         ]
       }),
       onMenuItemClick(menuItem: any) {

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -11,6 +11,7 @@ const routes = useRoutes([
       { path: '/home', name: 'home', meta: { title: '首页' }, component: () => import('@/views/home/index.vue') },
       { path: '/codeSpippets', name: 'codeSpippets', meta: { title: '代码段' }, component: () => import('@/views/codeSpippets/index.vue') },
       { path: '/httpProxy', name: 'httpProxy', meta: { title: 'http代理' }, component: () => import('@/views/httpProxy/index.vue') },
+      { path: '/hlsPlayer', name: 'hlsPlayer', meta: { title: 'hls播放器' }, component: () => import('@/views/hlsPlayer/index.vue') },
     ]
   },
 ])

diff --git a/src/views/hlsPlayer/index.vue b/src/views/hlsPlayer/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="page">
+    <div>
+      <el-input v-model="inputUrl"></el-input>
+      <el-button @click="onPlay">播放url</el-button>
+    </div>
+    <hls-player ref="hlsPlayer" v-bind="hlsPlayerAttrs"></hls-player>
+  </div>
+</template>
+
+<script lang='jsx'>
+import { reactive, toRefs, defineComponent, onMounted } from 'vue'
+import 'hls-player.js'
+import { tauri } from "@tauri-apps/api"
+
+export default defineComponent({
+  components: {},
+  setup (props, ctx) {
+    const state = reactive({
+      // https://hls-js.netlify.app/demo/
+      inputUrl: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+      hlsPlayer: null,
+      hlsPlayerAttrs: {
+        options: {debug: false, autoplay: true, muted: true},
+        events: {
+          onLoadSegmentDataBuffer: async (segment, dataBuffer) => {
+              // console.log(11, segment, dataBuffer);
+            },
+        }
+      },
+      onPlay() {
+        state.hlsPlayer.src = state.inputUrl
+      }
+    })
+
+    onMounted(async () => {
+      state.hlsPlayer.shadowRoot.querySelector('video').style = 'max-width: 100%;'
+      state.onPlay()
+    })
+
+    return { ...toRefs(state) }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+hls-player {
+  max-width: 100%;
+}
+</style>
diff --git a/types/components.d.ts b/types/components.d.ts
@@ -29,6 +29,7 @@ declare module '@vue/runtime-core' {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSpace: typeof import('element-plus/es')['ElSpace']

diff --git a/vite.config.ts b/vite.config.ts
@@ -101,7 +101,15 @@ export default defineConfig(params => {
 
 function getPlugins(): any[] {
   const plugins = [
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: tag => {
+            return tag === 'hls-player'
+          }
+        }
+      }
+    }),
     vueJsx(),
     legacy({
       targets: ['defaults'/*, 'not IE 11'*/, 'ie >= 11'],