marknorrapscm / serverless-media-portal Goto Github PK

The whole frontend needs refactoring, but a good place to start is by extracting the functional logic into custom hooks. The throwaway nature of the initial project meant that I didn't do this from the beginning as I should. A good component to start that on is frontend/src/components/AuthWrapper.js.

Currently, the functionality for logging in is in the component itself. We want the component to contain only UI concerns, so we want a custom hook that looks like this:

export function AuthWrapper(props) {
    const [isLoading, isAuthorized, hasFailedLoginAttempts] = useLogin();

    return (
        <div>
            ...  
        </div>
    );
}

...where useLogin() is the custom hook.

Comments currently live forever and cannot be deleted once posted, neither by the admin or the author.

The upload form is basic with a primitive user experience. This is one of a series of issues which list possible improvements:

• Currently, once a video has been uploaded the thumbnail generation process is automatically triggered in AWS
  • The frontend knows what the expected URL of each thumbnail and every few seconds it makes a HEAD request to see if they've been created yet
    • This process is a bit messy and could be improved
  • When thumbnails are detected, they abruptly appear on the webpage
  • Adding grey placeholder boxes, each with a spinner inside, would signal to the user that work is being done

For example, what YouTube have as video links are being loaded:

The existing upload form:

The upload form is basic with a primitive user experience. This is one of a series of issues which list possible improvements:

• Automatically clear the form once an upload is complete
  • Currently the user has to click a "Clear form" button

Serverless Error ----------------------------------------

  An error occurred: ThumbnailMakerLambdaFunction - 
Resource handler returned message: 
'MemorySize' value failed to satisfy constraint: 
Member must have value less than or equal to 3008 
Service: Lambda, Status Code: 400

Setting to 3008, the deployment run without issues

The upload form is basic with a primitive user experience. This is one of a series of issues which list possible improvements:

• Users currently have to click the "Browse" button and select a file from the file system
  • The "Browse" button should remain, but drag-and-dropping a video file onto the page should be implemented
  • Dragging a video onto the page should initiate the upload process just like selecting it via the "Browse" button

Opening this issue to make a note of it.

Since v1.1 thumbnails are now generated from videos of any aspect ratio (previously they were tailored for videos shot in portrait mode). Although this works, it appears that the CSS of the related videos pane needs to be adjusted to correctly display these wider thumbnails. Case in point, cropped from a landscape tablet:

The image overlays the text. Setting a max-width will probably solve it.

Currently, the delete video functionality only deletes the row from the video table, leaving the redundant video and thumbnail images sitting in S3.

The upload form is basic with a primitive user experience. This is one of a series of issues which list possible improvements:

• Implement a two stage upload process of:
  • Having nothing but the "Browse" button present
  • When the user selects a video and the upload begins, only then is the rest of the form displayed
  • When the form submits and the upload is complete, a success message is displayed along with a link to the video