Trailers

server/content.go

@@ -45,7 +45,7 @@ func searchContent(query string) (TMDBSearchMultiResponse, error) {
 
 func movieDetails(id string) (TMDBMovieDetails, error) {
 	resp := new(TMDBMovieDetails)
-	err := tmdbRequest("/movie/"+id, map[string]string{}, &resp)
+	err := tmdbRequest("/movie/"+id, map[string]string{"append_to_response": "videos"}, &resp)
 	if err != nil {
 		println("Failed to complete movie details request!", err.Error())
 		return TMDBMovieDetails{}, errors.New("failed to complete movie details request")
@@ -65,7 +65,7 @@ func movieCredits(id string) (TMDBContentCredits, error) {
 
 func tvDetails(id string) (TMDBShowDetails, error) {
 	resp := new(TMDBShowDetails)
-	err := tmdbRequest("/tv/"+id, map[string]string{}, &resp)
+	err := tmdbRequest("/tv/"+id, map[string]string{"append_to_response": "videos"}, &resp)
 	if err != nil {
 		println("Failed to complete tv details request!", err.Error())
 		return TMDBShowDetails{}, errors.New("failed to complete tv details request")

server/routes.go

@@ -47,7 +47,7 @@ func (b *BaseRouter) addContentRoutes() {
 		c.JSON(http.StatusOK, content)
 	})
 
-	// Get movie details
+	// Get movie details (for movie page)
 	content.GET("/movie/:id", func(c *gin.Context) {
 		if c.Param("id") == "" {
 			c.Status(400)
@@ -75,7 +75,7 @@ func (b *BaseRouter) addContentRoutes() {
 		c.JSON(http.StatusOK, content)
 	})
 
-	// Get tv details
+	// Get tv details (for tv page)
 	content.GET("/tv/:id", func(c *gin.Context) {
 		if c.Param("id") == "" {
 			c.Status(400)

server/tmdb.go

@@ -6,6 +6,7 @@ import (
 	"io"
 	"net/http"
 	"net/url"
+	"time"
 )
 
 type TMDBSearchMultiResponse struct {
@@ -83,6 +84,9 @@ type TMDBMovieDetails struct {
 	Runtime             uint32 `json:"runtime"`
 	Title               string `json:"title"`
 	Video               bool   `json:"video"`
+
+	// Extra items because we use `append_to_response` on the request
+	Videos TMDBContentVideos `json:"videos"`
 }
 
 type TMDBShowDetails struct {
@@ -133,6 +137,25 @@ type TMDBShowDetails struct {
 		SeasonNumber int    `json:"season_number"`
 	} `json:"seasons"`
 	Type string `json:"type"`
+
+	// Extra items because we use `append_to_response` on the request
+	Videos TMDBContentVideos `json:"videos"`
+}
+
+type TMDBContentVideos struct {
+	ID      int `json:"id"`
+	Results []struct {
+		Iso6391     string    `json:"iso_639_1"`
+		Iso31661    string    `json:"iso_3166_1"`
+		Name        string    `json:"name"`
+		Key         string    `json:"key"`
+		Site        string    `json:"site"`
+		Size        int       `json:"size"`
+		Type        string    `json:"type"`
+		Official    bool      `json:"official"`
+		PublishedAt time.Time `json:"published_at"`
+		ID          string    `json:"id"`
+	} `json:"results"`
 }
 
 type TMDBSeasonDetails struct {

src/lib/content/VideoEmbedModal.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  export let embed: string;
+  export let closed: () => void;
+</script>
+
+<div class="modal" on:click={closed} on:keydown={closed}>
+  {#if embed}
+    <div class="wrapper">
+      <iframe title="Video Embed" src={embed} frameborder="0" width="100%" height="100%" />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .modal {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100dvw;
+    height: 100dvh;
+    background-color: rgba($color: #000000, $alpha: 0.5);
+    z-index: 9999999;
+
+    .wrapper {
+      width: 100%;
+      max-width: 800px;
+      border-radius: 15px;
+      aspect-ratio: 16 / 9;
+      overflow: hidden;
+      margin: 20px;
+    }
+  }
+</style>

src/routes/(app)/movie/[id]/+page.svelte

@@ -18,13 +18,26 @@
   import { getTopCrew } from "@/lib/util/helpers.js";
   import Activity from "@/lib/Activity.svelte";
   import Title from "@/lib/content/Title.svelte";
+  import VideoEmbedModal from "@/lib/content/VideoEmbedModal.svelte";
 
   export let data;
 
+  let trailer: string | undefined;
+  let trailerShown = false;
+
   $: wListItem = $watchedList.find((w) => w.content.tmdbId === data.movieId);
 
   async function getMovie() {
-    return (await axios.get(`/content/movie/${data.movieId}`)).data as TMDBMovieDetails;
+    const movie = (await axios.get(`/content/movie/${data.movieId}`)).data as TMDBMovieDetails;
+    if (movie.videos?.results?.length > 0) {
+      const t = movie.videos.results.find((v) => v.type?.toLowerCase() === "trailer");
+      if (t?.key) {
+        if (t?.site?.toLowerCase() === "youtube") {
+          trailer = `https://www.youtube.com/embed/${t?.key}`;
+        }
+      }
+    }
+    return movie;
   }
 
   async function getMovieCredits() {
@@ -84,6 +97,15 @@
 
             <span style="font-weight: bold; font-size: 14px;">Overview</span>
             <p>{movie.overview}</p>
+
+            <div class="btns">
+              {#if trailer}
+                <button on:click={() => (trailerShown = !trailerShown)}>View Trailer</button>
+                {#if trailerShown}
+                  <VideoEmbedModal embed={trailer} closed={() => (trailerShown = false)} />
+                {/if}
+              {/if}
+            </div>
           </div>
         </div>
       </div>
@@ -210,6 +232,17 @@
         p {
           font-size: 14px;
         }
+
+        .btns {
+          display: flex;
+          flex-flow: row;
+          gap: 8px;
+          margin-top: 18px;
+
+          button {
+            width: fit-content;
+          }
+        }
       }
 
       @media screen and (max-width: 700px) {

src/routes/(app)/tv/[id]/+page.svelte

@@ -9,6 +9,7 @@
   import Spinner from "@/lib/Spinner.svelte";
   import Status from "@/lib/Status.svelte";
   import Title from "@/lib/content/Title.svelte";
+  import VideoEmbedModal from "@/lib/content/VideoEmbedModal.svelte";
   import { updateWatched } from "@/lib/util/api";
   import { getTopCrew } from "@/lib/util/helpers.js";
   import { watchedList } from "@/store";
@@ -22,10 +23,22 @@
 
   export let data;
 
+  let trailer: string | undefined;
+  let trailerShown = false;
+
   $: wListItem = $watchedList.find((w) => w.content.tmdbId === data.tvId);
 
   async function getShow() {
-    return (await axios.get(`/content/tv/${data.tvId}`)).data as TMDBShowDetails;
+    const show = (await axios.get(`/content/tv/${data.tvId}`)).data as TMDBShowDetails;
+    if (show.videos?.results?.length > 0) {
+      const t = show.videos.results.find((v) => v.type?.toLowerCase() === "trailer");
+      if (t?.key) {
+        if (t?.site?.toLowerCase() === "youtube") {
+          trailer = `https://www.youtube.com/embed/${t?.key}`;
+        }
+      }
+    }
+    return show;
   }
 
   async function getTvCredits() {
@@ -81,6 +94,15 @@
 
             <span style="font-weight: bold; font-size: 14px;">Overview</span>
             <p>{show.overview}</p>
+
+            <div class="btns">
+              {#if trailer}
+                <button on:click={() => (trailerShown = !trailerShown)}>View Trailer</button>
+                {#if trailerShown}
+                  <VideoEmbedModal embed={trailer} closed={() => (trailerShown = false)} />
+                {/if}
+              {/if}
+            </div>
           </div>
         </div>
       </div>
@@ -207,6 +229,17 @@
         p {
           font-size: 14px;
         }
+
+        .btns {
+          display: flex;
+          flex-flow: row;
+          gap: 8px;
+          margin-top: 18px;
+
+          button {
+            width: fit-content;
+          }
+        }
       }
 
       @media screen and (max-width: 700px) {

src/types.ts

@@ -112,6 +112,7 @@ export interface TMDBMovieDetails extends TMDBContentDetails {
   runtime: number;
   title: string;
   video: boolean;
+  videos: TMDBContentVideos;
 }
 
 export interface TMDBShowDetails extends TMDBContentDetails {
@@ -153,6 +154,23 @@ export interface TMDBShowDetails extends TMDBContentDetails {
   original_name: string;
   seasons: TMDBShowSeason[];
   type: string;
+  videos: TMDBContentVideos;
+}
+
+export interface TMDBContentVideos {
+  id: number;
+  results: {
+    iso_639_1: string;
+    iso_3166_1: string;
+    name: string;
+    key: string;
+    site: string;
+    size: number;
+    type: string;
+    official: boolean;
+    published_at: string;
+    id: string;
+  }[];
 }
 
 export interface TMDBShowSeason {