[VPS-55] When the timer runs out on a scene, a custom image determined by the User displays alongside the TimeOut text.

[djos192]

Description

• Based on work Aarnob was working on last year.
• The Details are well mentioned in the comments

AS: A staff member of the University of Auckland's Pharmacology Department I WANT TO: be able to upload an image to show when the timer runs out in a certain scenario BECAUSE: Depending on which scenario the timer runs out on, there might be a different ending (i.e. the patient becomes ill, the patient dies etc).

AC's: 1) When the timer runs out on the scenario, a modal pops up staying "Out of time". 2) This modal has an image shown inside it. 3) This image is customisable by an "Upload File" button in the right sidebar.

Technical Implementation Plan:

• See below, but summary as follows:
• The image is uploaded to Firebase (similarly to other images used in a scene)
• This image is saved within the directory containing all images for that scene under the name endImage.png
• This uploading should have already been implemented
• The image now needs to be retrieved and displayed in the modal, with suggestions on how to do so detailed below.

[KW781]

Hi, the issue is basically implementing the second half of the modal image feature that I was working on last year. The idea was that when editing a scene, a user could add an image that they would want displayed at the end of the timer for that particular. I did originally implement the functionality for uploading the image into firebase, however the part I struggled with was actually retrieving the image from firebase at the end of the timer. This is what I'll be trying to implement.

[KW781]

Here is the full details of this particular issue:

As stated above, the idea was that upon the end of the timer for the scene, we would show an image in the modal. Essentially, an image would be shown in the modal below:

The image would be configurable via the scene editor, basically there would be a file input button in the sidebar shown below, where you could upload the image that would be shown at the end of the scene.

In terms of the backend, the image would be uploaded to Firebase, which stores all of the multimedia for Firebase such as the images that are uploaded to the canvas for a scene. In the firebase storage, all the multimedia is stored per scenario and per scene (i.e. there is a folder for each scenario, the name of the folder being the scenario ID, and within each scenario folder there is a folder for each scene, the name of the folder being the scene ID). For the folder for a scene, the end image is uploaded there when the scene is saved with the name 'endImage', as shown below:

The functionality of the image being uploaded has already been implemented (by me), by first allowing for an end image to be passed to the uploadFile and uploadFiles functions in this commit. In the uploadFiles function, endImage is the actual image being passed whereas in the uploadFile function endImage is just a boolean that indicates whether the file is being uploaded is an end modal image (true) or not (false).

Subsequently, in this commit I changed the saveScene function so that the endImage property of the scene object is added when invoking the uploadFiles function. I also added a file input in the side bar, where the onChange handler adds the end image to the scene object.

Since the uploading of the end image has already been implemented, what is left is implementing the retrieval of the end image from firebase when the timer ends. Note that since this aspect of the feature hasn't been implemented yet, the actual file input button for the end modal image was eventually removed. But it's fairly simple to add file input button back, simple just add the following JSX code to the SceneSettings component (frontend/src/containers/pages/AuthoringTool/SceneSettings.js):

``

Upload Media

      <input
        type="file"
        name="mediaUpload"
        onChange={(event) => {
          setCurrentScene({
            ...currentScene,
            media: event.target.files[0],
          });
        }}
      />

``

The button added will upload an image to firebase, as explained previously. In terms of implementing the retrieval functionality, we could look into how other multimedia is retrieved from Firebase. Take a look at the following:

• The PlayScenarioCanvas component (frontend\src\containers\pages\PlayScenarioPage\PlayScenarioCanvas.js) which is the component for the canvas where the scene is played, and where all the scene images are rendered.
• The useGet hook in crudHooks.js (frontend\src\hooks\crudHooks.js), which is called to retrieve a scene object.
• The component resolver function (frontend\src\containers\pages\PlayScenarioPage\componentResolver.js), which returns the appropriate component depending on the type of multimedia.