Push side recording data to server

.dockerignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile

@@ -0,0 +1,13 @@
+FROM node:18
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build 
+
+CMD ["npm","run","dev"]

app/auth/slides/[slide]/page.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 "use client";
 import { useEffect, useState } from "react";
 
@@ -6,6 +7,7 @@ import { SlideType } from "@/src/constants";
 import useSlidesStore from "@/src/store";
 import { ISlide } from "@/src/types";
 import Reveal from "@/reveal.js-4.6.0/dist/reveal.esm";
+import { ServerClient } from "@/src/server-client";
 const Page = ({
   params,
   searchParams,
@@ -18,9 +20,10 @@ const Page = ({
   const presentation = useSlidesStore(
     (store) => store.fullPresentations?.get(params.slide),
   );
-
   const [slides, setSlides] = useState<Array<ISlide>>([]);
   const [slidesMeta, setslidesMeta] = useState<Array<any>>([]);
+  const slideTransitionData: Record<string, { dur: number }> = {};
+
   useEffect(() => {
     if (apiServer) {
       getPresentation(
@@ -40,9 +43,55 @@ const Page = ({
   useEffect(() => {
     console.log("Component mounted/updated");
     if (Reveal) {
+      let lastSlideChangedTime = new Date().getTime();
+      let totalTime = 0;
       console.log("Reveal initialized");
-      //@ts-ignore
       Reveal.initialize({});
+      Reveal.on("ready", () => {
+        console.log("Slide ready");
+        lastSlideChangedTime = new Date().getTime();
+      });
+
+      Reveal.on("slidechanged", (event) => {
+        console.log("Slide Changed");
+        console.log(event);
+        const time = new Date().getTime();
+
+        const slideId = event.previousSlide.dataset["slideid"];
+        console.log(
+          ` slide id ${slideId} time  ${time - lastSlideChangedTime} ms, ${
+            (time - lastSlideChangedTime) / 1000
+          } sec`,
+        );
+        slideTransitionData[slideId] = {
+          dur: (time - lastSlideChangedTime) / 1000,
+        };
+        lastSlideChangedTime = time;
+
+        // check for last slide
+        if (event.indexh === Reveal.getTotalSlides() - 1) {
+          console.log("THIS IS A LAST SLIDE");
+          console.log(slideTransitionData);
+          ServerClient.createVideoMetaData(
+            presentation.id,
+            slideTransitionData,
+            apiServer,
+          );
+        }
+      });
+
+      Reveal.on("slidetransitionend", (event) => {
+        console.log("slidetransitionend");
+        console.log(event);
+      });
+      Reveal.on("fragmentshown", (event) => {
+        console.log("fragmentshown");
+        console.log(event);
+      });
+      Reveal.on("fragmenthidden", (event) => {
+        console.log("fragmenthidden");
+        console.log(event);
+      });
     }
   });
 
@@ -81,8 +130,12 @@ const Page = ({
           }}
         >
           <div className="slides">
-            <section data-autoslide="2000">Slide 1</section>
-            <section data-autoslide="2000">Slide 2</section>
+            <section data-autoslide="2000" data-slideid={"start-1"}>
+              START 1
+            </section>
+            <section data-autoslide="2000" n data-slideid={"start-2"}>
+              START 2
+            </section>
             {slides.map((slide, index) => (
               <>
                 <Slide
@@ -111,6 +164,12 @@ const Page = ({
                 />
               </>
             ))}
+            <section data-autoslide="2000" data-slideid={"end-1"}>
+              end 1
+            </section>
+            <section data-autoslide="2000" n data-slideid={"end-2"}>
+              end 2
+            </section>
           </div>
         </div>
       </div>

components/Slide/Slide.tsx

@@ -16,10 +16,10 @@ export const Slide: FC<SlideProps> = ({
   slideType,
   explanationEn,
   slideMeta,
+  id,
 }: SlideProps) => {
   const getSlide = () => {
     if (slideType === SlideType.QUESTION) {
-      console.log(slideMeta);
       return (
         <section
           data-autoslide={
@@ -28,6 +28,7 @@ export const Slide: FC<SlideProps> = ({
           data-transition="fade-in fade-out"
           data-auto-animate-restart
           data-background-color="white"
+          data-slideid={`${id}-question`}
         >
           <div
             data-id="question"
@@ -47,9 +48,10 @@ export const Slide: FC<SlideProps> = ({
     } else if (slideType === SlideType.OPTION_LIST) {
       return (
         <section
-          data-autoslide="500"
+          data-autoslide={slideMeta?.allOptDur * 1000}
           data-transition="fade-in fade-out"
           data-background-color="white"
+          data-slideid={`${id}-option-list`}
         >
           <div className="flex h-screen w-full flex-col text-left">
             <div
@@ -68,8 +70,7 @@ export const Slide: FC<SlideProps> = ({
             <div data-id="options" className="w-full">
               {options.map((opt: any, index) => (
                 <div
-                  data-autoslide={slideMeta?.options[index]?.dur * 1000}
-                  className="fragment mt-4 w-2/3 bg-gray-50 pb-2  pl-4 pr-4 pt-2 text-2xl text-black"
+                  className="mt-4 w-2/3 bg-gray-50 pb-2  pl-4 pr-4 pt-2 text-2xl text-black"
                   key={opt.en}
                   dangerouslySetInnerHTML={{
                     __html: marked.parse(opt.en),
@@ -86,6 +87,7 @@ export const Slide: FC<SlideProps> = ({
           data-autoslide={slideMeta?.rightAnswer?.dur * 1000}
           data-transition="fade-in fade-out"
           data-background-color="white"
+          data-slideid={`${id}-right-answer`}
         >
           <div className="flex h-screen w-full flex-col">
             <div
@@ -130,8 +132,9 @@ export const Slide: FC<SlideProps> = ({
       return (
         <section
           data-autoslide={slideMeta?.explanationDur * 1000}
-          data-transition="fade-in slide-out"
+          data-transition="fade-in fade-out"
           data-background-color="white"
+          data-slideid={`${id}-explation`}
         >
           <div className="flex h-screen w-full flex-col">
             <div

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3.5'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: docker-next
+    ports:
+      - '3000:3000'
+    volumes:
+      - .:/app
+      - /app/node_modules

package.json

@@ -29,6 +29,7 @@
     "reveal.js": "4.5",
     "tailwindcss": "3.3.3",
     "typescript": "5.1.6",
+    "uuid": "^9.0.1",
     "zustand": "^4.4.1"
   },
   "devDependencies": {
@@ -42,6 +43,7 @@
     "@storybook/react": "^7.3.2",
     "@storybook/testing-library": "^0.2.0",
     "@types/reveal.js": "^4.4.3",
+    "@types/uuid": "^9.0.5",
     "eslint-plugin-storybook": "^0.6.13",
     "prettier": "^3.0.2",
     "prettier-plugin-tailwindcss": "^0.5.3",

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};