Similarity is key

Description

The movie page now shows movies that are similar to that one as well as BTS or other videos related to the movie

Changes

The following changes and implementations have been made in that version of the project:

• Change themoviedb API request to include recommended movies
• Style the movies using the movie card component

Features

✅ Similar movie recommended on movie page 🎬

Code

This change is using similar techniques as the “Version 0.0.3” change. Therefore there will just be a really quick rundown of the changed code.

movie/[id]/+page.server.ts

// append 'recommended' to the fetch url to include 'recommended'
const response = await fetch(
		`https://api.themoviedb.org/3/movie/${params.id}?api_key=${process.env.TMDB_API_KEY}&append_to_response=videos,keywords,recommendations`
)

movie/[id]/+page.svelte

<script>
    // assign the recommended movies to a new variable
    // limit the recommendedMovies to 10 to reduce loading times
    let recommendedMovies = data.props.movieDetail.recommendations.result.slice(0,10)
</script>

<!--Loop over all recommendedMovies and create iframes to show the videos-->
{#if recommendedMovies.length > 0}
    <div class="related-movies">
	    <h4 class="title-text">Related Movies:</h4>
        <div class="movies">
            {#each recommendedMovies as movie}
            <div class="movie-cards m-3">
                <div class="movie-card">
                    <a data-sveltekit-noscroll href={'/movie/' + movie.id} target="_self">
                    {#if typeof movie.poster_path == 'string'}
                        <img class="movie-card-image" src={'https://image.tmdb.org/t/p/w500' + movie.poster_path} alt={movie.title} />
                    {:else}
                        <div class="no-img">
                            <p class="no-img-available">no image available</p>
                        </div>
                    {/if}
                    </a>
                </div>
            </div>
            {/each}
	    </div>
    </div>
{/if}

---

Commit: Version 0.1.4

Published: 2023-04-03