feat: report issue button

package.json

@@ -16,6 +16,7 @@
     "@iconify-json/mdi": "^1.1.66",
     "@types/canvas-confetti": "^1.6.4",
     "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.12.7",
     "solid-devtools": "^0.29.3",
     "typescript": "^5.4.5",
     "unocss": "^0.59.2",

src/components/OptionEditor.tsx

@@ -127,9 +127,9 @@ export function OptionEditor() {
       <video
         ref={x => (videoEl = x)}
         src={store.fileInfo.url}
-        class="w-full h-64 outline-0 rounded-t-xl"
+        class="optionEditor-video w-full h-64 outline-0 rounded-t-xl"
         classList={{'outline-2 outline-solid outline-yellow outline-offset--2': previewingSpeed()}}
-        controls
+        controls muted
         onfocus={() => setPreviewingSpeed(false)}
         ontimeupdate={x => setVideoTime(x.currentTarget.currentTime)}
       />

src/components/OutputDisplay.tsx

@@ -1,4 +1,4 @@
-import { Show, createSignal } from "solid-js";
+import { Show, createMemo, createSignal } from "solid-js";
 import { store } from "../store";
 import confetti from 'canvas-confetti';
 
@@ -23,13 +23,43 @@ function playConfetti(el: HTMLElement) {
 
 export function OutputDisplay() {
   const [showDonate, setShowDonate] = createSignal(false)
+  const hasError = createMemo(() => isNaN(store.outputFileContent?.length || 0))
 
   return <Show when={store.outputFileURL}>
     <section
-      class="bg-slate-2 rounded-xl p-4 mt-4 animate-zoom-in animate-duration-300 animate-ease-out"
+      class="rounded-xl p-4 mt-4 animate-zoom-in animate-duration-300 animate-ease-out"
+      classList={{ 'bg-gray-1': hasError(), 'bg-slate-2': !hasError() }}
       ref={e => setTimeout(() => playConfetti(e!), 50)}
     >
       <h2>Output</h2>
+
+      <Show when={hasError()}>
+        <div class="bg-white p-4 rounded-xl mb-4">
+          <div class="">
+            <i class="i-mdi-emoticon-sad-outline text-xl mr-2" />
+            Am I messed it up?
+
+            <button class="rounded ml-4 p-4 py-2 bg-blue-6 text-white cursor-pointer" onClick={() => {
+              const title = `Failed to convert: ${store.fileInfo.extname}`
+              const body = [
+                '<!-- if possible, please provide the video file 🫴🎬 to analyze and solve bug🔬. -->',
+                '<!-- (sample files are public, please consider carefully) -->',
+                '',
+                `- File: ${store.fileInfo.extname}  (${readableFileSize(store.fileContent?.byteLength || 0)})` ,
+                `- User-Agent: ${navigator.userAgent}`,
+                `- File Info: \`${JSON.stringify(store.fileInfo)}\``,
+                `- Options: \`${JSON.stringify(store.options)}\``,
+                `- Git Revision: ${GIT_REVISION}`,
+                `- Source: ${location.href}`,
+              ].join('\n')
+              window.open(`https://github.com/lyonbot/video-to-gif/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`, 'tweetShare')
+            }}>
+              <i class="i-mdi-flag"></i> Report an Issue
+            </button>
+          </div>
+        </div>
+      </Show>
+
       <p>File size: {readableFileSize(store.outputFileContent?.length || 0)}</p>
       <p>
         <a

src/components/Processing.tsx

@@ -1,4 +1,4 @@
-import { Show, createEffect, createRoot, createSignal } from "solid-js";
+import { Show, createEffect, createMemo, createRoot, createSignal } from "solid-js";
 import { encode as GIFEncode } from 'modern-gif'
 import GIFWorkerJS from 'modern-gif/worker?url'
 import { outputSize, outputTimeRange, store, updateStore } from "../store";
@@ -13,6 +13,13 @@ export function ProcessingBar() {
   let [percentage, setPercentage] = createSignal(0);
   let [errorMessage, setErrorMessage] = createSignal('');
 
+  const errorHint = createMemo(() => {
+    const msg = errorMessage()
+    if (!msg) return null
+
+    if (/allocation failed/.test(msg)) return "Please reduce the width / height / framerate / duration, and try again"
+  })
+
   let [isUseFFMpeg, setIsUseFFMpeg] = createSignal(true);
 
   async function processWithGIFjs() {
@@ -230,7 +237,8 @@ export function ProcessingBar() {
       return;
     }
 
-    setIsRunning(true)
+    setIsRunning(true);
+    (document.querySelector('video.optionEditor-video') as HTMLVideoElement)?.pause()
     setErrorMessage('')
     console.time('process')
 
@@ -297,6 +305,12 @@ export function ProcessingBar() {
       <div class="text-center my-4 text-red-7">
         <i class="i-mdi-alert-circle"></i> {errorMessage()}
       </div>
+
+      <Show when={errorHint()}>
+        <div class="text-center my-4 mt--2 text-orange">
+          {errorHint()}
+        </div>
+      </Show>
     </Show>
 
     <Show when={isRunning()}>

src/report.ts

@@ -4,6 +4,7 @@ export function setupSentry() {
   if (import.meta.env.DEV) return;
   Sentry.init({
     dsn: 'https://0c8214d0263fb84bbe9de352b663ddf3@o4507088476766208.ingest.us.sentry.io/4507088478404608',
+    release: GIT_REVISION,
   });
 }
 

src/types/shim.d.ts

@@ -2,4 +2,6 @@ declare class ImageCapture {
   constructor(videoTrack: MediaStreamTrack);
   track: MediaStreamTrack
   grabFrame(): Promise<ImageBitmap>
-}
+}
+
+declare const GIT_REVISION: string;

vite.config.ts

@@ -1,8 +1,12 @@
+import childProcess from 'node:child_process';
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 import devtools from 'solid-devtools/vite';
 import UnoCSS from 'unocss/vite';
 
+let GIT_REVISION = 'unknown'
+try { GIT_REVISION = childProcess.execSync("git rev-parse HEAD").toString().trim() } catch { }
+
 export default defineConfig({
   plugins: [
     UnoCSS(),
@@ -20,4 +24,7 @@ export default defineConfig({
   build: {
     target: 'esnext',
   },
+  define: {
+    GIT_REVISION: JSON.stringify(GIT_REVISION)
+  }
 });