Make it basically navigatable

src/routes/main/MainPage.tsx

@@ -36,9 +36,12 @@ export function MainPage(props: Props) {
                     return (
                         <div key={item.ids.uuid} className={classes.movie}>
                             <h1>{title?.name}</h1>
+                            <p><strong>{rating?.certification}</strong></p>
                             <p><strong>{description?.tagline}</strong></p>
                             <p>{description?.overview}</p>
-                            <p><strong>{rating?.certification}</strong></p>
+                            <p>
+                                <Link to={"/player/" + item.ids.uuid}>Play</Link>
+                            </p>
                             {poster && (
                                 <img
                                     className={classes.poster}
@@ -53,10 +56,6 @@ export function MainPage(props: Props) {
                                     src={backdrop.src}
                                 />
                             )}
-                            {item.preview && (
-                                <p><a href={item.preview}>{item.preview}</a></p>
-                            )}
-                            <Link to={"/player/" + item.ids.uuid}>Play</Link>
                         </div>
                     )
                 })}

src/routes/player/Player.tsx

 import React, {useMemo, useState} from "react";
 import {createUseStyles} from "react-jss";
+import {Link} from "react-router-dom";
 import {TitleMeta} from "../../api/models/dto/TitleMeta";
 import {Media} from "../../api/models/Media";
 import {getLocalizedDescription, getLocalizedName, getLocalizedRating} from "../../api/models/Title";
@@ -41,6 +42,7 @@ export function Player(props: Props) {
 
     return (
         <div>
+            <Link to="/">Back</Link>
             <p>{name?.name}</p>
             {video}
             <p style={{fontVariant: "tabular-nums"}}>{formatDuration(position)} / {formatDuration(duration)}</p>