refactor(ui): changed the layout (#10)

* immersive layout

* added gradient to backdrop image on hero's

* more hero adds

* light/dark mode support for favicon

* added rating to hero

* switched it all to immersive I love it

* rewrote season view

* added next episode banner

* download button placement and poster size

* docs favicon

* trailer and cast improvements

* better scroll and loading state

Author: kyleaupton

backend/internal/http/docs/docs.go

@@ -33,6 +33,8 @@ type MovieDetail struct {
 	ReleaseDate   string  `json:"releaseDate,omitempty"`
 	Runtime       int     `json:"runtime,omitempty"`
 	Certification string  `json:"certification,omitempty"`
+	VoteAverage   float64 `json:"voteAverage,omitempty"`
+	VoteCount     int64   `json:"voteCount,omitempty"`
 	Genres        []Genre `json:"genres,omitempty"`
 	PosterPath    string  `json:"posterPath,omitempty"`
 	BackdropPath  string  `json:"backdropPath,omitempty"`
@@ -63,22 +65,34 @@ type SeasonDetail struct {
 	Episodes     []EpisodeAvailability `json:"episodes"`
 }
 
+type NextEpisode struct {
+	SeasonNumber  int    `json:"seasonNumber"`
+	EpisodeNumber int    `json:"episodeNumber"`
+	Title         string `json:"title"`
+	AirDate       string `json:"airDate,omitempty"`
+	Overview      string `json:"overview,omitempty"`
+	StillPath     string `json:"stillPath,omitempty"`
+}
+
 type SeriesDetail struct {
 	TmdbID int64  `json:"tmdbId"`
 	Title  string `json:"title"`
 	Year   *int32 `json:"year,omitempty"`
 
-	Overview       string  `json:"overview"`
-	Tagline        string  `json:"tagline,omitempty"`
-	Status         string  `json:"status"`
-	FirstAirDate   string  `json:"firstAirDate,omitempty"`
-	LastAirDate    string  `json:"lastAirDate,omitempty"`
-	InProduction   bool    `json:"inProduction"`
-	Certification  string  `json:"certification,omitempty"`
-	EpisodeRuntime *int    `json:"episodeRuntime,omitempty"`
-	Genres         []Genre `json:"genres,omitempty"`
-	PosterPath     string  `json:"posterPath,omitempty"`
-	BackdropPath   string  `json:"backdropPath,omitempty"`
+	Overview         string       `json:"overview"`
+	Tagline          string       `json:"tagline,omitempty"`
+	Status           string       `json:"status"`
+	FirstAirDate     string       `json:"firstAirDate,omitempty"`
+	LastAirDate      string       `json:"lastAirDate,omitempty"`
+	InProduction     bool         `json:"inProduction"`
+	Certification    string       `json:"certification,omitempty"`
+	EpisodeRuntime   *int         `json:"episodeRuntime,omitempty"`
+	VoteAverage      float64      `json:"voteAverage,omitempty"`
+	VoteCount        int64        `json:"voteCount,omitempty"`
+	Genres           []Genre      `json:"genres,omitempty"`
+	PosterPath       string       `json:"posterPath,omitempty"`
+	BackdropPath     string       `json:"backdropPath,omitempty"`
+	NextEpisodeToAir *NextEpisode `json:"nextEpisodeToAir,omitempty"`
 
 	Availability   Availability    `json:"availability"`
 	Seasons        []SeasonDetail  `json:"seasons"`

backend/internal/http/docs/swagger.json

@@ -489,6 +489,8 @@ func (s *MediaService) GetMovieDetail(ctx context.Context, tmdbID int64) (model.
 		ReleaseDate:     tmdbDetails.ReleaseDate,
 		Runtime:         tmdbDetails.Runtime,
 		Certification:   certification,
+		VoteAverage:     float64(tmdbDetails.VoteAverage),
+		VoteCount:       int64(tmdbDetails.VoteCount),
 		Genres:          genres,
 		PosterPath:      tmdbDetails.PosterPath,
 		BackdropPath:    tmdbDetails.BackdropPath,
@@ -692,6 +694,19 @@ func (s *MediaService) GetSeriesDetail(ctx context.Context, tmdbID int64) (model
 		watchProviders = extractWatchProviders(tmdbDetails.WatchProviders, region)
 	}
 
+	// Map next episode to air (non-zero ID means data is present)
+	var nextEpisode *model.NextEpisode
+	if tmdbDetails.NextEpisodeToAir.ID != 0 {
+		nextEpisode = &model.NextEpisode{
+			SeasonNumber:  tmdbDetails.NextEpisodeToAir.SeasonNumber,
+			EpisodeNumber: tmdbDetails.NextEpisodeToAir.EpisodeNumber,
+			Title:         tmdbDetails.NextEpisodeToAir.Name,
+			AirDate:       tmdbDetails.NextEpisodeToAir.AirDate,
+			Overview:      tmdbDetails.NextEpisodeToAir.Overview,
+			StillPath:     tmdbDetails.NextEpisodeToAir.StillPath,
+		}
+	}
+
 	return model.SeriesDetail{
 		TmdbID:         tmdbDetails.ID,
 		Title:          tmdbDetails.Name,
@@ -704,10 +719,13 @@ func (s *MediaService) GetSeriesDetail(ctx context.Context, tmdbID int64) (model
 		InProduction:   tmdbDetails.InProduction,
 		Certification:  certification,
 		EpisodeRuntime: episodeRuntime,
+		VoteAverage:    float64(tmdbDetails.VoteAverage),
+		VoteCount:      int64(tmdbDetails.VoteCount),
 		Genres:         genres,
-		PosterPath:     tmdbDetails.PosterPath,
-		BackdropPath:   tmdbDetails.BackdropPath,
-		Availability:   availability,
+		PosterPath:       tmdbDetails.PosterPath,
+		BackdropPath:     tmdbDetails.BackdropPath,
+		NextEpisodeToAir: nextEpisode,
+		Availability:     availability,
 		Seasons:        seasons,
 		Credits:        credits,
 		Videos:         videos,

backend/internal/http/docs/swagger.yaml

@@ -2,6 +2,9 @@ import { defineConfig } from "vitepress";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  head: [
+    ['link', { rel: 'icon', href: '/arrflix/favicon.svg' }],
+  ],
   title: "Arrflix Docs",
   description: "Self-hosted media management platform",
   // https://vitepress.dev/guide/deploy#setting-a-public-base-path

backend/internal/model/media_detail.go

@@ -5,3 +5,13 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+export {}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    public?: boolean
+    layout?: 'immersive' | 'auth'
+    setup?: boolean
+  }
+}