OV-377: Create preview page and flow #429

stefano-lacorazza · 2024-09-25T14:11:11Z

Summary:

This pull request implements the following features:

Preview Page Creation:
- Created a whitelisted separate Preview page, accessible via a generated JWT-based URL.
- Added a video player to this page for playback of the video.
Button for Generating Preview Link:
- Added a button to each rendered video on the homepage to copy the preview link.
- When the button is clicked, a request is sent to the backend to generate a JWT containing the video ID.
JWT-based Preview URL Generation:
- Added an endpoint to generate a preview URL with a JWT and the videoId.
- The server response returns a URL string with the format preview/:jwt, which includes the JWT and the video ID.
- Upon receiving the server response, the preview URL is copied to the clipboard.
Preview URL Access and JWT Decoding:
- When a user accesses the preview URL, the JWT and videoId are extracted from the page URL.
- A request is sent to decode the JWT and retrieve the videoId.
- The decoded videoId is then used to fetch the corresponding video URL for playback.
New Public-Video Controller:
- Implemented a new public-video controller to handle requests related to video previews, including decoding JWTs and retrieving video information.

OutreachVids.-.Google.Chrome.2024-09-25.09-10-12.mp4

stefano-lacorazza · 2024-09-25T14:14:32Z

frontend/src/bundles/home/helpers/create-url-token.ts

@@ -0,0 +1,7 @@
+
+const createVideoUrl = (jwtToken: string): string => {
+    const baseUrl = 'http://localhost:3000';


Here how could I create the baseUrl dynamically for deployment?

anton-otroshchenko · 2024-09-26T12:26:37Z

backend/src/common/services/token/token.services.ts

+    public async createVideoIdToken(videoId: string): Promise<string> {
+        const jwt = await new SignJWT({ videoId })
+            .setProtectedHeader({ alg: 'HS256' })
+            .sign(this.secretKey);
+        return jwt.replaceAll('.', '~');
+    }
+


lets move it to video service

can we use createToken method and set expiration time optional?

anton-otroshchenko · 2024-09-26T12:27:34Z

backend/src/common/services/token/token.services.ts

+
+    public async getVideoIdFromToken(token: string): Promise<string | null> {
+        const payload = await this.verifyToken(token);
+        return (payload?.['videoId'] as string) || null;


Suggested change

return (payload?.['videoId'] as string) || null;

return (payload?.['videoId'] as string) ?? null;

anton-otroshchenko · 2024-09-26T12:29:08Z

frontend/src/bundles/preview/pages/preview.tsx

+const Preview: React.FC<Properties> = ({ jwt }) => {
+    const dispatch = useAppDispatch();
+    const [url, setUrl] = useState<string>('');
+    const [loading, setLoading] = useState<boolean>(true);


isLoading, setIsLoading

… and decoding tokens

anton-otroshchenko · 2024-09-26T13:49:04Z

frontend/src/bundles/home/helpers/create-url-token.ts

@@ -0,0 +1,10 @@
+const createVideoUrl = (jwtToken: string): string => {
+    const baseUrl =
+        import.meta.env['VITE_APP_NODE_ENV'] === 'production'


please use our class on frontend to handle .env

also use this

sofiia-trokhymchuk · 2024-09-26T14:29:09Z

frontend/src/bundles/home/helpers/create-url-token.ts

+        config.ENV.APP.ENVIRONMENT === AppEnvironment.PRODUCTION
+            ? 'http://bsa-2024-outreachvids-dev.eu-north-1.elasticbeanstalk.com'
+            : 'http://localhost:3000';
+


Add a new env variable and use it. What if the deployment URL changes?

Done but could you test it if it was done correctly before merging? I have no way of testing in production enviroment and I dont want to break something a day before the demo. Thank you

sofiia-trokhymchuk · 2024-09-26T14:30:31Z

backend/src/bundles/public-video/public-video.controller.ts

+        const videoTokenHeader = headers['video_token']?.toString() ?? '';
+
+        return {
+            status: HTTPCode.OK,
+            payload: await this.publicVideoService.findUrlByToken(
+                videoTokenHeader ?? '',


Why do you need this nullish coalescing here? You already check it on line 32

sofiia-trokhymchuk · 2024-09-26T14:33:48Z

backend/src/bundles/public-video/public-video.service.ts

+            this.throwVideoNotFoundError();
+        }
+
+        const url = video.toObject().url;


Suggested change

const url = video.toObject().url;

const { url } = video.toObject();

sofiia-trokhymchuk · 2024-09-26T14:34:57Z

backend/src/bundles/videos/video.controller.ts

@@ -109,6 +109,17 @@ class VideoController extends BaseController {
                    }>,
                ),
        });
+        this.addRoute({
+            path: `${VideosApiPath.ID}/share`,


Add this path to the enum

sofiia-trokhymchuk · 2024-09-26T14:36:14Z

frontend/src/bundles/common/api/video-api/videos-api.ts

+
+    public async getVideoIdJWT(id: string): Promise<string> {
+        const response = await this.load(
+            this.getFullEndpoint(`${VideosApiPath.ROOT}${id}/share`, {}),


sofiia-trokhymchuk · 2024-09-26T17:19:28Z

frontend/src/bundles/home/helpers/create-url-token.ts

-            ? 'http://bsa-2024-outreachvids-dev.eu-north-1.elasticbeanstalk.com'
+            ? config.ENV.DEPLOYMENT.URL


It is better to add something like PUBLIC_URL. And use it as it is without checks

Im having problems with this one. I changed .env, EnvironmentSchema, and base-config.package adding the new ENV PUBLIC_URL variable but when I try to access it in createVideoUrl I keep getting undefined.

sofiia-trokhymchuk · 2024-09-26T17:21:08Z

frontend/.env.example

+#
+# DEPLOYMENT
+#
+DEPLOYMENT_URL=http://bsa-2024-outreachvids-dev.eu-north-1.elasticbeanstalk.com


Suggested change

#

# DEPLOYMENT

#

DEPLOYMENT_URL=http://bsa-2024-outreachvids-dev.eu-north-1.elasticbeanstalk.com

#

# DEPLOYMENT

#

PUBLIC_URL=http://localhost:3000

stefano-lacorazza added 9 commits September 23, 2024 06:02

OV-377: + add preview page with video player

b868514

OV-377: + add copy url button to homepage

49af338

OV-377: + create JWT with video id and return it to frontend

06e0c10

OV-377: + copy url to clipboard

945fac9

OV-377: + create dynamic preview url

c19a3fa

OV-377: + create public-video controller and service

01bf93f

Merge branch 'next' into task/OV-377-create-preview-page

e7cc793

OV-377: + white route public-video

5e9044d

OV-377: + style preview page

ba2031e

stefano-lacorazza added the FE Fronted feature label Sep 25, 2024

stefano-lacorazza added this to the Final DEMO milestone Sep 25, 2024

stefano-lacorazza self-assigned this Sep 25, 2024

stefano-lacorazza requested review from nikita-remeslov, anton-otroshchenko and sofiia-trokhymchuk as code owners September 25, 2024 14:11

stefano-lacorazza linked an issue Sep 25, 2024 that may be closed by this pull request

FEAT: Create preview page #377

Closed

9 tasks

stefano-lacorazza commented Sep 25, 2024

View reviewed changes

OV-377: * prettier

423cabc

stefano-lacorazza added the BE Backend feature label Sep 25, 2024

anton-otroshchenko requested changes Sep 26, 2024

View reviewed changes

OV-377: * Refactor token service to use a unified method for creating…

5c7e932

… and decoding tokens

stefano-lacorazza requested a review from anton-otroshchenko September 26, 2024 13:22

OV-377: + added dynamically created sharing URL

480e38f

anton-otroshchenko requested changes Sep 26, 2024

View reviewed changes

OV-377: - use config to create video url

556ed1d

stefano-lacorazza requested a review from anton-otroshchenko September 26, 2024 14:06

stefano-lacorazza added 2 commits September 26, 2024 09:12

Merge branch 'next' into task/OV-377-create-preview-page

907bdaf

Merge branch 'next' into task/OV-377-create-preview-page

c2ebd64

sofiia-trokhymchuk requested changes Sep 26, 2024

View reviewed changes

OV-377: + create env variable for deployment URL andfix magic numbers

32b55b7

stefano-lacorazza requested a review from sofiia-trokhymchuk September 26, 2024 15:11

OV-377: * prettier

7d1c536

sofiia-trokhymchuk requested changes Sep 26, 2024

View reviewed changes

stefano-lacorazza added 6 commits September 26, 2024 14:01

OV-377: * changed baseurl to access env PUBLIC_URL

3ae5db1

OV-377: * changed baseurl to access env PUBLIC_URL

d932a5a

OV-377: * prettier

89fd45d

Merge branch 'next' into task/OV-377-create-preview-page

b012825

OV-377: - prettier

b8e9f78

OV-377: * change .env variable

34e1084

sofiia-trokhymchuk approved these changes Sep 27, 2024

View reviewed changes

nikita-remeslov approved these changes Sep 27, 2024

View reviewed changes

nikita-remeslov merged commit 264640c into next Sep 27, 2024
2 checks passed

nikita-remeslov deleted the task/OV-377-create-preview-page branch September 27, 2024 10:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

OV-377: Create preview page and flow #429

OV-377: Create preview page and flow #429

stefano-lacorazza commented Sep 25, 2024

stefano-lacorazza Sep 25, 2024

anton-otroshchenko Sep 26, 2024

anton-otroshchenko Sep 26, 2024

anton-otroshchenko Sep 26, 2024

anton-otroshchenko Sep 26, 2024

anton-otroshchenko Sep 26, 2024

anton-otroshchenko Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

stefano-lacorazza Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

stefano-lacorazza Sep 26, 2024

sofiia-trokhymchuk Sep 26, 2024

		@@ -0,0 +1,7 @@

		const createVideoUrl = (jwtToken: string): string => {
		const baseUrl = 'http://localhost:3000';

	return (payload?.['videoId'] as string) \|\| null;
	return (payload?.['videoId'] as string) ?? null;

	const url = video.toObject().url;
	const { url } = video.toObject();

		? 'http://bsa-2024-outreachvids-dev.eu-north-1.elasticbeanstalk.com'
		? config.ENV.DEPLOYMENT.URL

OV-377: Create preview page and flow #429

OV-377: Create preview page and flow #429

Conversation

stefano-lacorazza commented Sep 25, 2024

Summary:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment