Merge pull request #45 from hicsail/feature/video-popup

Allow video popup dialog to fetch from backend url
hicsail · Jul 22, 2024 · fa5dff5 · fa5dff5
2 parents 92e37eb + cb39f3a
commit fa5dff5
Show file tree

Hide file tree

Showing 27 changed files with 901 additions and 304 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,17 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
-  'extends': [
-    'plugin:react/recommended',
-    'eslint:recommended'
-  ],
+  extends: ["plugin:react/recommended", "eslint:recommended"],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
   },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-  }
-}
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,5 +1,3 @@
 {
-    "recommendations": [
-        "ionic.ionic"
-    ]
+  "recommendations": ["ionic.ionic"]
 }
diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -1,12 +1,12 @@
-import { CapacitorConfig } from '@capacitor/cli';
+import { CapacitorConfig } from "@capacitor/cli";
 
 const config: CapacitorConfig = {
-  appId: 'io.ionic.starter',
-  appName: 'cycm-ionic',
-  webDir: 'dist',
+  appId: "io.ionic.starter",
+  appName: "cycm-ionic",
+  webDir: "dist",
   server: {
-    androidScheme: 'https'
-  }
+    androidScheme: "https",
+  },
 };
 
 export default config;
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -7,4 +7,4 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
-});
+});
diff --git a/cypress/e2e/test.cy.ts b/cypress/e2e/test.cy.ts
@@ -1,6 +1,6 @@
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/folder/Inbox')
-    cy.contains('#container', 'Inbox')
-  })
-})
+describe("My First Test", () => {
+  it("Visits the app root url", () => {
+    cy.visit("/folder/Inbox");
+    cy.contains("#container", "Inbox");
+  });
+});
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
@@ -34,4 +34,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')
diff --git a/index.html b/index.html
@@ -3,21 +3,21 @@
   <head>
     <meta charset="utf-8" />
     <title>CYCM</title>
-    
+
     <base href="/" />
-    
+
     <meta name="color-scheme" content="light dark" />
     <meta
       name="viewport"
       content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
     />
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
-    
+
     <link rel="manifest" href="/manifest.json" />
-    
+
     <link rel="shortcut icon" type="image/png" href="/cycm-logo.svg" />
-    
+
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Ionic App" />

diff --git a/package-lock.json b/package-lock.json
diff --git a/postcss.config.js b/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+interface ButtonProps {
+  id?: string;
+  text: string;
+  backgroundColor: string;
+  textColor?: string;
+  size?: string | number;
+  py: string | number;
+  px: string | number;
+  onClick?: (e: any) => void;
+}
+
+let Button: React.FC<ButtonProps> = ({
+  id,
+  text,
+  backgroundColor,
+  textColor,
+  size,
+  px,
+  py,
+  onClick,
+}) => {
+  const [hover, setHover] = useState(false);
+  return (
+    <button
+      id={id}
+      className={`text-white border border-solid border-2 hover:bg-transparent focus:ring-4 focus:outline-none font-medium rounded-full mr-2`}
+      style={{
+        backgroundColor: hover ? "transparent" : backgroundColor,
+        color: hover ? backgroundColor : textColor ? textColor : "white",
+        borderColor: backgroundColor,
+        fontSize: size,
+        paddingLeft: px,
+        paddingRight: px,
+        paddingTop: py,
+        paddingBottom: py,
+      }}
+      onClick={onClick}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {text}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -184,6 +184,7 @@ const Card: React.FC<CardProps> = ({
           <CardModal
             title={title}
             sentences={sentences}
+            backgroundVideo={null}
             id={id}
             voiceId={voiceId}
             manual_id={manual_id}
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,4 +7,4 @@ export default defineConfig({ @@
           // implement node event listeners here
         },
       },
-    });
+    });