feat: clean and fully set up songle file webapp

davay42 · davay42 · commit c2092ccd4b28 · 2024-10-23T14:20:20.000+07:00
diff --git a/index.html b/index.html
@@ -3,11 +3,11 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   <title>Chromatone Spectrogram</title>
   <link rel="icon" type="image/svg+xml" href="/logo.svg">
   <meta name="theme-color" content="#D3D3E8">
-  <meta name="application-name" content="Chromatone Spectrogram">
+  <meta name="application-name" content="Spectrogram">
   <meta name="author" content="Denis Starov">
   <meta name="creator" content="Chromatone">
   <meta name="description" content="2.5D representation on frequency domain in color">
@@ -26,8 +26,41 @@
   <meta name="twitter:image:type" content="image/png">
   <meta name="twitter:image" content="/spectrogram.png">
 
-  <link rel="manifest"
-    href='data:application/manifest+json,{ "name": "Chromatone Spectrogram", "short_name": "Spectrogram", "description": "Visual time-frequency analysis for all", "background_color": "#000000", "theme_color":"#ffffff", "display": "standalone"}' />
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Spectrogram">
+
+  <link rel="manifest" href='data:application/manifest+json,{
+  "id": "spectrogram-v1",
+  "name": "Chromatone Spectrogram",
+  "short_name": "Spectrogram", 
+  "description": "Visual time-frequency analysis for all",
+  "background_color": "#000000",
+  "theme_color": "#D3D3E8",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "./",
+  "scope": "./",
+  "display_override": ["window-controls-overlay", "standalone"],
+  "handle_links": "preferred",
+  "prefer_related_applications": false,
+  "categories": ["music", "audio", "tools"],
+  "icons": [{
+    "src": "/logo.svg",
+    "sizes": "any",
+    "type": "image/svg+xml",
+    "purpose": "any"
+  }],
+    "screenshots": [{
+    "src": "/spectrogram.png",
+    "type": "image/png",
+    "sizes": "1280x720",
+    "form_factor": "wide"
+  }],
+    "launch_handler": {
+    "client_mode": ["focus-existing", "auto"]
+  },
+}' />
 
 </head>
 
diff --git a/src/App.vue b/src/App.vue
@@ -30,7 +30,6 @@ watch([width, height], ([w, h]) => {
 })
 
 onMounted(() => {
-  initGetUserMedia()
   ctx = canvasElement.value.getContext('2d')
   tempCanvas = document.createElement('canvas')
   tempCtx = tempCanvas.getContext('2d')
@@ -170,33 +169,6 @@ onKeyStroke(' ', (e) => { e.preventDefault(); paused.value = !paused.value })
 
 onKeyStroke('Enter', (e) => { e.preventDefault(); clear(); })
 
-
-function initGetUserMedia() {
-  if (typeof window === 'undefined') return;
-
-  window.AudioContext = window.AudioContext || window.webkitAudioContext;
-  if (!window.AudioContext) {
-    throw new Error("AudioContext not supported");
-  }
-
-  if (navigator.mediaDevices === undefined) {
-    navigator.mediaDevices = {};
-  }
-
-  if (navigator.mediaDevices.getUserMedia === undefined) {
-    navigator.mediaDevices.getUserMedia = function (constraints) {
-      const getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
-      if (!getUserMedia) {
-        throw new Error("getUserMedia is not implemented in this browser");
-      }
-
-      return new Promise((resolve, reject) => {
-        getUserMedia.call(navigator, constraints, resolve, reject);
-      });
-    };
-  }
-}
 </script>
 
 <template lang="pug">
