timeline slider fixed, works for displayTime and hideTime attribute f…

…or elements

@empirica-mocks/core/mocks.js

@@ -110,6 +110,7 @@ export function usePlayers() {
 
 export function useGlobal() {
  // This is a mock function that returns a mock global object
+ // UPDATE CDN IF TESTING LOCALLY / DEPLOYING
  const global = {
  isMock: true,
  recruitingBatchConfig: {

src/app/editor/components/RenderPanel.tsx

@@ -37,6 +37,12 @@ export function RenderPanel() {
 
  //console.log('Current stage', localStorage.getItem('currentStageIndex'))
 
+ useEffect(() => {
+ // Updates value of timeline slider when elapsed time changes
+ console.log('Elapsed time changed:', elapsed)
+ setTime(elapsed)
+ }, [elapsed])
+
  return (
  <div className="flex" data-cy="render-panel">
  {currentStageIndex === 'default' && (

src/app/editor/stageContext.jsx

@@ -1,35 +1,35 @@
 //import { set } from 'node_modules/cypress/types/lodash';
-import { createContext, useState } from 'react';
+import { createContext, useState } from 'react'
 
 // export const StageContext = createContext({
 // currentStageIndex: "default",
 // elapsed: "default"
 // });
 
-const StageContext = createContext();
+const StageContext = createContext()
 
 const StageProvider = ({ children }) => {
- const [currentStageIndex, setCurrentStageIndex] = useState('default');
- const [elapsed, setElapsed] = useState('default');
- const [treatment, setTreatment] = useState(null);
+ const [currentStageIndex, setCurrentStageIndex] = useState('default')
+ const [elapsed, setElapsed] = useState(0)
+ const [treatment, setTreatment] = useState(null)
 
  const contextValue = {
  currentStageIndex,
  setCurrentStageIndex,
  elapsed,
  setElapsed,
  treatment,
- setTreatment
- };
+ setTreatment,
+ }
 
  return (
  <StageContext.Provider value={contextValue}>
  {children}
  </StageContext.Provider>
- );
-};
+ )
+}
 
-export { StageContext, StageProvider };
+export { StageContext, StageProvider }
 
 // import React, { createContext, useState, useContext } from 'react';