Add a page to display a movie

Show the thumb on wide screens and the fanart on small screens.

.drone.yml

@@ -3,12 +3,12 @@ name: default
 
 steps:
 - name: prepare-workdir
-  image: alpine:3.13.1
+  image: alpine:3.14.1
   commands:
   - mkdir canapeapp
 
 - name: frontend
-  image: node:13.8.0
+  image: node:16.6.2
   commands:
   - cd frontend
   - npm install
@@ -16,7 +16,7 @@ steps:
   - npm run-script build
 
 - name: backend
-  image: golang:1.15.7-alpine3.13
+  image: golang:1.16.7-alpine3.14
   commands:
   - apk --no-cache add git
   - GO111MODULE=off go get -tags 'postgres' -u github.com/golang-migrate/migrate/cmd/migrate
@@ -24,7 +24,7 @@ steps:
   - CGO_ENABLED=0 go build -ldflags '-extldflags "-static"' -trimpath -v -o canapeapp/app backend/*.go
 
 - name: prepare-docker
-  image: alpine:3.13.1
+  image: alpine:3.14.1
   commands:
   - cp docker/run.sh canapeapp/run.sh
   - cp migrate canapeapp/migrate

backend/external_medias/handlers.go

@@ -141,7 +141,7 @@ func GetShows(env *web.Env, user *models.User, source string, category string, f
 	for _, id := range media.IDs {
 		pShow, _ := pShows.Has(id)
 		wShow, _ := wShows.IsShowInWishlist(id)
-		show := shows.NewWithClient(&polochon.Show{ImdbID: id}, client, pShow, wShow)
+		show := shows.NewWithClient(id, client, pShow, wShow)
 
 		// First check in the DB
 		before := []polochon.Detailer{env.Backend.Detailer}

backend/fresh.conf

@@ -1,6 +0,0 @@
-root: .
-valid_ext: .go
-colors: 1
-build_name: dev-build
-build_log: dev-build.log
-tmp_path: ../build

backend/models/episodes.go

@@ -84,7 +84,6 @@ func FillEpisodeFromDB(eDB *episodeDB, pEpisode *polochon.ShowEpisode) {
 	pEpisode.Title = eDB.Title
 	pEpisode.Rating = eDB.Rating
 	pEpisode.Plot = eDB.Plot
-	pEpisode.Thumb = eDB.Thumb
 	pEpisode.Runtime = eDB.Runtime
 	pEpisode.Aired = eDB.Aired
 	pEpisode.Thumb = imageURL(fmt.Sprintf(

backend/models/movies.go

@@ -90,6 +90,7 @@ func FillMovieFromDB(mDB *movieDB, pMovie *polochon.Movie) {
 	pMovie.SortTitle = mDB.SortTitle
 	pMovie.Tagline = mDB.Tagline
 	pMovie.Thumb = imageURL("movies/" + mDB.ImdbID + ".jpg")
+	pMovie.Fanart = imageURL("movies/" + mDB.ImdbID + "-fanart.jpg")
 }
 
 // updateFromMovie will update the movieDB from a Movie

backend/models/torrent_video.go

@@ -9,7 +9,8 @@ import (
 // TorrentVideo reprensents a torrent embeding the video inforamtions
 type TorrentVideo struct {
 	*polochon.Torrent
-	Img   string         `json:"img"`
+	Thumb  string         `json:"thumb"`
+	Fanart string         `json:"fanart"`
 	Video  polochon.Video `json:"video,omitempty"`
 }
 
@@ -47,11 +48,13 @@ func (t *TorrentVideo) Update(detailer polochon.Detailer, db *sqlx.DB, log *logr
 			if err := GetShow(db, v.Show); err != nil {
 				return
 			}
-			t.Img = v.Show.Poster
+			t.Fanart = v.Show.Fanart
+			t.Thumb = v.Show.Poster
 			v.Show = nil
 		}
 	case *polochon.Movie:
-		t.Img = v.Thumb
+		t.Thumb = v.Thumb
+		t.Fanart = v.Fanart
 	}
 }
 

backend/modules.go

@@ -2,20 +2,12 @@ package main
 
 import (
 	// Modules
-	_ "github.com/odwrtw/polochon/modules/addicted"
 	_ "github.com/odwrtw/polochon/modules/canape"
 	_ "github.com/odwrtw/polochon/modules/eztv"
-	_ "github.com/odwrtw/polochon/modules/fsnotify"
-	_ "github.com/odwrtw/polochon/modules/imdb"
 	_ "github.com/odwrtw/polochon/modules/mock"
-	_ "github.com/odwrtw/polochon/modules/openguessit"
-	_ "github.com/odwrtw/polochon/modules/opensubtitles"
-	_ "github.com/odwrtw/polochon/modules/pushover"
 	_ "github.com/odwrtw/polochon/modules/tmdb"
 	_ "github.com/odwrtw/polochon/modules/tpb"
 	_ "github.com/odwrtw/polochon/modules/trakttv"
-	_ "github.com/odwrtw/polochon/modules/transmission"
 	_ "github.com/odwrtw/polochon/modules/tvdb"
-	_ "github.com/odwrtw/polochon/modules/yifysubtitles"
 	_ "github.com/odwrtw/polochon/modules/yts"
 )

backend/movies/handlers.go

@@ -49,6 +49,51 @@ func PolochonMoviesHandler(env *web.Env, w http.ResponseWriter, r *http.Request)
 	return env.RenderJSON(w, movies)
 }
 
+// GetMovieHandler will return a single movie
+func GetMovieHandler(env *web.Env, w http.ResponseWriter, r *http.Request) error {
+	vars := mux.Vars(r)
+	id := vars["id"]
+
+	user := auth.GetCurrentUser(r, env.Log)
+
+	client, err := user.NewPapiClient(env.Database)
+	if err != nil {
+		return env.RenderError(w, err)
+	}
+
+	movies, err := client.GetMovies()
+	if err != nil {
+		return env.RenderError(w, err)
+	}
+
+	moviesWishlist, err := models.GetMovieWishlist(env.Database, user.ID)
+	if err != nil {
+		return env.RenderError(w, err)
+	}
+
+	pMovie, _ := movies.Has(id)
+	movie := New(
+		id,
+		client,
+		pMovie,
+		moviesWishlist.IsMovieInWishlist(id),
+	)
+
+	detailers := []polochon.Detailer{env.Backend.Detailer}
+	err = movie.GetDetails(env, detailers)
+	if err != nil {
+		return env.RenderError(w, err)
+	}
+
+	torrenters := []polochon.Torrenter{env.Backend.Torrenter}
+	err = movie.GetTorrents(env, torrenters)
+	if err != nil {
+		env.Log.Errorf("error while getting movie torrents : %s", err)
+	}
+
+	return env.RenderJSON(w, movie)
+}
+
 // RefreshMovieHandler refreshes details for a movie
 func RefreshMovieHandler(env *web.Env, w http.ResponseWriter, r *http.Request) error {
 	vars := mux.Vars(r)
@@ -283,6 +328,7 @@ func GetWishlistHandler(env *web.Env, w http.ResponseWriter, r *http.Request) er
 func RefreshMovieSubtitlesHandler(env *web.Env, w http.ResponseWriter, r *http.Request) error {
 	vars := mux.Vars(r)
 	id := vars["id"]
+	lang := polochon.Language(vars["lang"])
 
 	// Get the user
 	user := auth.GetCurrentUser(r, env.Log)
@@ -294,29 +340,35 @@ func RefreshMovieSubtitlesHandler(env *web.Env, w http.ResponseWriter, r *http.R
 	}
 
 	movie := &papi.Movie{Movie: &polochon.Movie{ImdbID: id}}
-	refreshSubs, err := client.UpdateSubtitles(movie)
+	sub, err := client.UpdateSubtitle(movie, lang)
 	if err != nil {
 		return env.RenderError(w, err)
 	}
 
-	subs := []subtitles.Subtitle{}
-	for _, lang := range refreshSubs {
-		subtitleURL, _ := client.SubtitleURL(movie, lang)
-		subs = append(subs, subtitles.Subtitle{
-			Language: lang,
-			URL:      subtitleURL,
-			VVTFile:  fmt.Sprintf("/movies/%s/subtitles/%s", id, lang),
-		})
+	// TODO: handle this with a better error
+	if sub == nil {
+		return env.RenderJSON(w, nil)
 	}
 
-	return env.RenderJSON(w, subs)
+	url, err := client.DownloadURLWithToken(sub)
+	if err != nil {
+		return env.RenderError(w, err)
+	}
+
+	s := &subtitles.Subtitle{
+		Subtitle: sub.Subtitle,
+		URL:      url,
+		VVTFile:  fmt.Sprintf("/movies/%s/subtitles/%s", id, sub.Lang),
+	}
+
+	return env.RenderJSON(w, s)
 }
 
 // DownloadVVTSubtitle returns a vvt subtitle for the movie
 func DownloadVVTSubtitle(env *web.Env, w http.ResponseWriter, r *http.Request) error {
 	vars := mux.Vars(r)
 	id := vars["id"]
-	lang := vars["lang"]
+	lang := polochon.Language(vars["lang"])
 
 	// Get the user
 	user := auth.GetCurrentUser(r, env.Log)
@@ -327,7 +379,14 @@ func DownloadVVTSubtitle(env *web.Env, w http.ResponseWriter, r *http.Request) e
 		return env.RenderError(w, err)
 	}
 
-	url, err := client.SubtitleURL(&papi.Movie{Movie: &polochon.Movie{ImdbID: id}}, lang)
+	s := &papi.Subtitle{
+		Subtitle: &polochon.Subtitle{
+			Video: &papi.Movie{Movie: &polochon.Movie{ImdbID: id}},
+			Lang:  lang,
+		},
+	}
+
+	url, err := client.DownloadURLWithToken(s)
 	if err != nil {
 		return env.RenderError(w, err)
 	}

backend/movies/movies.go

@@ -48,7 +48,7 @@ func (m *Movie) MarshalJSON() ([]byte, error) {
 
 	if m.pMovie != nil {
 		// Get the DownloadURL
-		movieToMarshal.PolochonURL, _ = m.client.DownloadURL(m.pMovie)
+		movieToMarshal.PolochonURL, _ = m.client.DownloadURLWithToken(m.pMovie)
 
 		// Get the metadata
 		movieToMarshal.DateAdded = m.pMovie.DateAdded
@@ -58,13 +58,14 @@ func (m *Movie) MarshalJSON() ([]byte, error) {
 		movieToMarshal.Container = m.pMovie.Container
 
 		// Append the Subtitles
-		for _, l := range m.pMovie.Subtitles {
-			subtitleURL, _ := m.client.SubtitleURL(m.pMovie, l)
-			movieToMarshal.Subtitles = append(movieToMarshal.Subtitles, subtitles.Subtitle{
-				Language: l,
-				URL:      subtitleURL,
-				VVTFile:  fmt.Sprintf("/movies/%s/subtitles/%s", m.ImdbID, l),
-			})
+		for _, s := range m.pMovie.Subtitles {
+			sub := subtitles.Subtitle{Subtitle: s.Subtitle}
+			if !sub.Embedded {
+				subtitleURL, _ := m.client.DownloadURLWithToken(s)
+				sub.URL = subtitleURL
+				sub.VVTFile = fmt.Sprintf("/movies/%s/subtitles/%s", m.ImdbID, s.Lang)
+			}
+			movieToMarshal.Subtitles = append(movieToMarshal.Subtitles, sub)
 		}
 	}
 
@@ -73,13 +74,18 @@ func (m *Movie) MarshalJSON() ([]byte, error) {
 
 // New returns a new Movie with all the needed infos
 func New(imdbID string, client *papi.Client, pMovie *papi.Movie, isWishlisted bool) *Movie {
+	var m *polochon.Movie
+	if pMovie != nil && pMovie.Movie != nil {
+		m = pMovie.Movie
+	} else {
+		m = &polochon.Movie{ImdbID: imdbID}
+	}
+
 	return &Movie{
 		client:     client,
 		pMovie:     pMovie,
 		Wishlisted: isWishlisted,
-		Movie: &polochon.Movie{
-			ImdbID: imdbID,
-		},
+		Movie:      m,
 	}
 }
 
@@ -144,7 +150,13 @@ func (m *Movie) Refresh(env *web.Env, detailers []polochon.Detailer) error {
 	}
 
 	// Download poster
-	err = web.Download(m.Thumb, m.imgFile(), true)
+	err = web.Download(m.Thumb, m.imgFile("thumb"), 300)
+	if err != nil {
+		log.Errorf("got error trying to download the poster %q", err)
+	}
+
+	// Download fanart
+	err = web.Download(m.Fanart, m.imgFile("fanart"), 960)
 	if err != nil {
 		log.Errorf("got error trying to download the poster %q", err)
 	}
@@ -231,13 +243,19 @@ func (m *Movie) RefreshTorrents(env *web.Env, torrenters []polochon.Torrenter) e
 }
 
 // imgURL returns the default image url
-func (m *Movie) imgURL() string {
-	return fmt.Sprintf("movies/%s.jpg", m.ImdbID)
+func (m *Movie) imgURL(imgType string) string {
+	var location string
+	if imgType == "thumb" {
+		location = m.ImdbID
+	} else {
+		location = m.ImdbID + "-" + imgType
+	}
+	return fmt.Sprintf("movies/%s.jpg", location)
 }
 
 // imgFile returns the image location on disk
-func (m *Movie) imgFile() string {
-	return filepath.Join(models.PublicDir, "img", m.imgURL())
+func (m *Movie) imgFile(imgType string) string {
+	return filepath.Join(models.PublicDir, "img", m.imgURL(imgType))
 }
 
 // getPolochonMovies returns an array of the user's polochon movies

backend/routes.go

@@ -41,9 +41,10 @@ func setupRoutes(env *web.Env) {
 	env.Handle("/movies/explore/options", extmedias.MovieExplorerOptions).WithRole(models.UserRole).Methods("GET")
 	env.Handle("/movies/search/{search}", movies.SearchMovie).WithRole(models.UserRole).Methods("GET")
 	env.Handle("/movies/{id:tt[0-9]+}", movies.PolochonDeleteHandler).WithRole(models.UserRole).Methods("DELETE")
+	env.Handle("/movies/{id:tt[0-9]+}", movies.GetMovieHandler).WithRole(models.UserRole).Methods("GET")
 	env.Handle("/movies/{id:tt[0-9]+}/refresh", movies.RefreshMovieHandler).WithRole(models.UserRole).Methods("POST")
 	env.Handle("/movies/{id:tt[0-9]+}/subtitles/{lang}", movies.DownloadVVTSubtitle).WithRole(models.UserRole).Methods("GET")
-	env.Handle("/movies/{id:tt[0-9]+}/subtitles/refresh", movies.RefreshMovieSubtitlesHandler).WithRole(models.UserRole).Methods("POST")
+	env.Handle("/movies/{id:tt[0-9]+}/subtitles/{lang}", movies.RefreshMovieSubtitlesHandler).WithRole(models.UserRole).Methods("POST")
 	env.Handle("/movies/refresh", extmedias.RefreshMoviesHandler).WithRole(models.AdminRole).Methods("POST")
 
 	// Shows routes
@@ -54,7 +55,7 @@ func setupRoutes(env *web.Env) {
 	env.Handle("/shows/{id:tt[0-9]+}", shows.GetDetailsHandler).WithRole(models.UserRole).Methods("GET")
 	env.Handle("/shows/{id:tt[0-9]+}/refresh", shows.RefreshShowHandler).WithRole(models.UserRole).Methods("POST")
 	env.Handle("/shows/{id:tt[0-9]+}/seasons/{season:[0-9]+}/episodes/{episode:[0-9]+}", shows.RefreshEpisodeHandler).WithRole(models.UserRole).Methods("POST")
-	env.Handle("/shows/{id:tt[0-9]+}/seasons/{season:[0-9]+}/episodes/{episode:[0-9]+}/subtitles/refresh", shows.RefreshEpisodeSubtitlesHandler).WithRole(models.UserRole).Methods("POST")
+	env.Handle("/shows/{id:tt[0-9]+}/seasons/{season:[0-9]+}/episodes/{episode:[0-9]+}/subtitles/{lang}", shows.RefreshEpisodeSubtitlesHandler).WithRole(models.UserRole).Methods("POST")
 	env.Handle("/shows/{id:tt[0-9]+}/seasons/{season:[0-9]+}/episodes/{episode:[0-9]+}/subtitles/{lang}", shows.DownloadVVTSubtitle).WithRole(models.UserRole).Methods("GET")
 	env.Handle("/shows/refresh", extmedias.RefreshShowsHandler).WithRole(models.AdminRole).Methods("POST")
 

backend/shows/episodes.go

@@ -3,7 +3,6 @@ package shows
 import (
 	"encoding/json"
 	"fmt"
-	"time"
 
 	"git.quimbo.fr/odwrtw/canape/backend/models"
 	"git.quimbo.fr/odwrtw/canape/backend/subtitles"
@@ -26,18 +25,13 @@ func (e *Episode) MarshalJSON() ([]byte, error) {
 
 	var downloadURL string
 	var subs []subtitles.Subtitle
-	var dateAdded time.Time
-	var quality string
-	var audioCodec string
-	var videoCodec string
-	var container string
 
 	// If the episode is present, fill the downloadURL
 	if e.show.pShow != nil {
 		pEpisode := e.show.pShow.GetEpisode(e.Season, e.Episode)
 		if pEpisode != nil {
 			// Get the DownloadURL
-			downloadURL, _ = e.show.client.DownloadURL(
+			downloadURL, _ = e.show.client.DownloadURLWithToken(
 				&papi.Episode{
 					ShowEpisode: &polochon.ShowEpisode{
 						ShowImdbID: e.ShowImdbID,
@@ -46,20 +40,21 @@ func (e *Episode) MarshalJSON() ([]byte, error) {
 					},
 				},
 			)
-			dateAdded = pEpisode.DateAdded
-			quality = string(pEpisode.Quality)
-			audioCodec = pEpisode.AudioCodec
-			videoCodec = pEpisode.VideoCodec
-			container = pEpisode.Container
+
+			e.ShowEpisode.VideoMetadata = pEpisode.ShowEpisode.VideoMetadata
+			e.ShowEpisode.File = pEpisode.ShowEpisode.File
 
 			// Append the Subtitles
-			for _, l := range pEpisode.Subtitles {
-				subtitleURL, _ := e.show.client.SubtitleURL(pEpisode, l)
-				subs = append(subs, subtitles.Subtitle{
-					Language: l,
-					URL:      subtitleURL,
-					VVTFile:  fmt.Sprintf("/shows/%s/seasons/%d/episodes/%d/subtitles/%s", e.ShowImdbID, e.Season, e.Episode, l),
-				})
+			for _, s := range pEpisode.Subtitles {
+				sub := subtitles.Subtitle{Subtitle: s.Subtitle}
+				if !sub.Embedded {
+					subtitleURL, _ := e.show.client.DownloadURLWithToken(s)
+					sub.URL = subtitleURL
+					sub.VVTFile = fmt.Sprintf(
+						"/shows/%s/seasons/%d/episodes/%d/subtitles/%s",
+						e.ShowImdbID, e.Season, e.Episode, s.Lang)
+				}
+				subs = append(subs, sub)
 			}
 		}
 	}
@@ -69,21 +64,11 @@ func (e *Episode) MarshalJSON() ([]byte, error) {
 		*alias
 		PolochonURL string               `json:"polochon_url"`
 		Subtitles   []subtitles.Subtitle `json:"subtitles"`
-		DateAdded   time.Time            `json:"date_added"`
-		Quality     string               `json:"quality"`
-		AudioCodec  string               `json:"audio_codec"`
-		VideoCodec  string               `json:"video_codec"`
-		Container   string               `json:"container"`
 		Thumb       string               `json:"thumb"`
 	}{
 		alias:       (*alias)(e),
 		PolochonURL: downloadURL,
 		Subtitles:   subs,
-		DateAdded:   dateAdded,
-		Quality:     quality,
-		AudioCodec:  audioCodec,
-		VideoCodec:  videoCodec,
-		Container:   container,
 		Thumb:       e.Thumb,
 	}
 

backend/shows/handlers.go

@@ -4,7 +4,6 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
-	"log"
 	"strconv"
 
 	"net/http"
@@ -35,15 +34,15 @@ func GetDetailsHandler(env *web.Env, w http.ResponseWriter, r *http.Request) err
 
 	pShow, err := client.GetShow(id)
 	if err != nil && err != papi.ErrResourceNotFound {
-		log.Println("Got error getting show ", err)
+		env.Log.Println("Got error getting show ", err)
 	}
 
 	wShow, err := models.IsShowWishlisted(env.Database, user.ID, id)
 	if err != nil && err != papi.ErrResourceNotFound {
-		log.Println("Got error getting wishlisted show ", err)
+		env.Log.Println("Got error getting wishlisted show ", err)
 	}
 
-	s := NewWithClient(&polochon.Show{ImdbID: id}, client, pShow, wShow)
+	s := NewWithClient(id, client, pShow, wShow)
 	// First try from the db
 	first := []polochon.Detailer{env.Backend.Detailer}
 	// Then try from the polochon detailers
@@ -81,15 +80,15 @@ func RefreshShowHandler(env *web.Env, w http.ResponseWriter, r *http.Request) er
 
 	pShow, err := client.GetShow(id)
 	if err != nil && err != papi.ErrResourceNotFound {
-		log.Println("Got error getting show ", err)
+		env.Log.Println("Got error getting show ", err)
 	}
 
 	wShow, err := models.IsShowWishlisted(env.Database, user.ID, id)
 	if err != nil && err != papi.ErrResourceNotFound {
-		log.Println("Got error getting wishlisted show ", err)
+		env.Log.Println("Got error getting wishlisted show ", err)
 	}
 
-	s := NewWithClient(&polochon.Show{ImdbID: id}, client, pShow, wShow)
+	s := NewWithClient(id, client, pShow, wShow)
 	// Refresh the polochon detailers
 	detailers := env.Config.Show.Detailers
 	err = s.Refresh(env, detailers)
@@ -163,7 +162,7 @@ func SearchShow(env *web.Env, w http.ResponseWriter, r *http.Request) error {
 	for _, s := range shows {
 		pShow, _ := pShows.Has(s.ImdbID)
 		wShow, _ := wShows.IsShowInWishlist(s.ImdbID)
-		show := NewWithClient(s, client, pShow, wShow)
+		show := NewWithClient(s.ImdbID, client, pShow, wShow)
 
 		// First try from the db
 		first := []polochon.Detailer{env.Backend.Detailer}
@@ -242,8 +241,7 @@ func GetWishlistHandler(env *web.Env, w http.ResponseWriter, r *http.Request) er
 	showList := []*Show{}
 	for _, wishedShow := range wShows.List() {
 		pShow, _ := pShows.Has(wishedShow.ImdbID)
-		poloShow := &polochon.Show{ImdbID: wishedShow.ImdbID}
-		show := NewWithClient(poloShow, client, pShow, wishedShow)
+		show := NewWithClient(wishedShow.ImdbID, client, pShow, wishedShow)
 
 		// First check in the DB
 		before := []polochon.Detailer{env.Backend.Detailer}
@@ -309,7 +307,7 @@ func RefreshEpisodeHandler(env *web.Env, w http.ResponseWriter, r *http.Request)
 	}
 
 	s := &Show{
-		Show:   &polochon.Show{ImdbID: id},
+		Show:   pShow.Show,
 		client: client,
 		pShow:  pShow,
 	}
@@ -343,6 +341,7 @@ func RefreshEpisodeHandler(env *web.Env, w http.ResponseWriter, r *http.Request)
 func RefreshEpisodeSubtitlesHandler(env *web.Env, w http.ResponseWriter, r *http.Request) error {
 	vars := mux.Vars(r)
 	id := vars["id"]
+	lang := polochon.Language(vars["lang"])
 
 	// No need to check errors here as the router is making sure that season
 	// and episode are numbers
@@ -366,29 +365,35 @@ func RefreshEpisodeSubtitlesHandler(env *web.Env, w http.ResponseWriter, r *http
 		},
 	}
 
-	refreshedSubs, err := client.UpdateSubtitles(e)
+	sub, err := client.UpdateSubtitle(e, lang)
 	if err != nil {
 		return env.RenderError(w, err)
 	}
 
-	subs := []subtitles.Subtitle{}
-	for _, lang := range refreshedSubs {
-		subtitleURL, _ := client.SubtitleURL(e, lang)
-		subs = append(subs, subtitles.Subtitle{
-			Language: lang,
-			URL:      subtitleURL,
-			VVTFile:  fmt.Sprintf("/shows/%s/seasons/%d/episodes/%d/subtitles/%s", e.ShowImdbID, e.Season, e.Episode, lang),
-		})
+	// TODO: handle this with a better error
+	if sub == nil {
+		return env.RenderJSON(w, nil)
 	}
 
-	return env.RenderJSON(w, subs)
+	url, err := client.DownloadURL(sub)
+	if err != nil {
+		return env.RenderError(w, err)
+	}
+
+	s := &subtitles.Subtitle{
+		Subtitle: sub.Subtitle,
+		URL:      url,
+		VVTFile:  fmt.Sprintf("/shows/%s/seasons/%d/episodes/%d/subtitles/%s", e.ShowImdbID, e.Season, e.Episode, lang),
+	}
+
+	return env.RenderJSON(w, s)
 }
 
 // DownloadVVTSubtitle returns a vvt subtitle for the movie
 func DownloadVVTSubtitle(env *web.Env, w http.ResponseWriter, r *http.Request) error {
 	vars := mux.Vars(r)
 	id := vars["id"]
-	lang := vars["lang"]
+	lang := polochon.Language(vars["lang"])
 	season, _ := strconv.Atoi(vars["season"])
 	episode, _ := strconv.Atoi(vars["episode"])
 
@@ -401,13 +406,20 @@ func DownloadVVTSubtitle(env *web.Env, w http.ResponseWriter, r *http.Request) e
 		return env.RenderError(w, err)
 	}
 
-	url, err := client.SubtitleURL(&papi.Episode{
+	s := &papi.Subtitle{
+		Subtitle: &polochon.Subtitle{
+			Video: &papi.Episode{
 				ShowEpisode: &polochon.ShowEpisode{
 					ShowImdbID: id,
 					Season:     season,
 					Episode:    episode,
 				},
-	}, lang)
+			},
+			Lang: lang,
+		},
+	}
+
+	url, err := client.DownloadURLWithToken(s)
 	if err != nil {
 		return env.RenderError(w, err)
 	}

backend/shows/shows.go

@@ -62,7 +62,14 @@ func New(imdbID string) *Show {
 }
 
 // NewWithClient returns a new Show with a polochon ShowConfig
-func NewWithClient(show *polochon.Show, client *papi.Client, pShow *papi.Show, wShow *models.WishedShow) *Show {
+func NewWithClient(imdbID string, client *papi.Client, pShow *papi.Show, wShow *models.WishedShow) *Show {
+	var show *polochon.Show
+	if pShow == nil || pShow.Show == nil {
+		show = &polochon.Show{ImdbID: imdbID}
+	} else {
+		show = pShow.Show
+	}
+
 	s := &Show{
 		Show:   show,
 		client: client,
@@ -165,22 +172,22 @@ func (s *Show) downloadImages(env *web.Env) {
 	for _, img := range []struct {
 		url      string
 		urlType  string
-		scale   bool
+		maxWidth uint
 	}{
 		{
 			url:      s.Show.Banner,
 			urlType:  "banner",
-			scale:   false,
+			maxWidth: 0,
 		},
 		{
 			url:      s.Show.Fanart,
 			urlType:  "fanart",
-			scale:   false,
+			maxWidth: 960,
 		},
 		{
 			url:      s.Show.Poster,
 			urlType:  "poster",
-			scale:   true,
+			maxWidth: 300,
 		},
 	} {
 		if img.url == "" {
@@ -190,7 +197,7 @@ func (s *Show) downloadImages(env *web.Env) {
 		if _, err := os.Stat(s.imgFile(img.urlType)); err == nil {
 			continue
 		}
-		if err := web.Download(img.url, s.imgFile(img.urlType), img.scale); err != nil {
+		if err := web.Download(img.url, s.imgFile(img.urlType), img.maxWidth); err != nil {
 			env.Log.Errorf("failed to dowload %s: %s", img.urlType, err)
 		}
 	}
@@ -207,7 +214,7 @@ func (s *Show) downloadImages(env *web.Env) {
 			continue
 		}
 
-		err := web.Download(e.Thumb, fileName, false)
+		err := web.Download(e.Thumb, fileName, 0)
 		if err != nil {
 			env.Log.Errorf("failed to dowload the thumb for season %d episode %d ( %s ) : %s", e.Season, e.Episode, e.Thumb, err)
 		}
@@ -252,7 +259,7 @@ func getPolochonShows(env *web.Env, user *models.User) ([]*Show, error) {
 	// Create Shows objects from the shows retrieved
 	for _, pShow := range pshows.List() {
 		wShow, _ := wShows.IsShowInWishlist(pShow.ImdbID)
-		show := NewWithClient(&polochon.Show{ImdbID: pShow.ImdbID}, client, pShow, wShow)
+		show := NewWithClient(pShow.ImdbID, client, pShow, wShow)
 		shows = append(shows, show)
 	}
 	return shows, nil

backend/subtitles/subtitles.go

@@ -1,8 +1,10 @@
 package subtitles
 
+import polochon "github.com/odwrtw/polochon/lib"
+
 // Subtitle represents a Subtitle
 type Subtitle struct {
-	Language string `json:"language"`
+	*polochon.Subtitle
 	URL     string `json:"url"`
 	VVTFile string `json:"vvt_file"`
 }

backend/web/download.go

@@ -13,7 +13,7 @@ import (
 )
 
 // Download used for downloading file
-var Download = func(srcURL, dest string, scale bool) error {
+var Download = func(srcURL, dest string, maxWidth uint) error {
 	if err := createDirectory(dest); err != nil {
 		return err
 	}
@@ -36,8 +36,8 @@ var Download = func(srcURL, dest string, scale bool) error {
 		return err
 	}
 
-	if scale {
-		image = resize.Resize(300, 0, image, resize.Lanczos3)
+	if maxWidth != 0 {
+		image = resize.Resize(maxWidth, 0, image, resize.Lanczos3)
 	}
 
 	// Create the file

dev.sh

@@ -135,7 +135,7 @@ case $1 in
 		# Apply the migrations
 		_migrate -path "$MIGRATION_SCHEMA" up
 
-		(cd backend && CONFIG_FILE="../config.yml" fresh -c fresh.conf)
+		(cd backend && CONFIG_FILE="../config.yml" go run ./*.go)
 		;;
 	docker-db)
 		_ensure_command docker

frontend/js/actions/admins.js

@@ -20,10 +20,14 @@ export function updateUser(data) {
   );
 }
 
-export function deleteUser(username) {
+export function deleteUser(username, userId) {
   return request(
     "ADMIN_DELETE_USER",
     configureAxios().delete("/admins/users/" + username),
-    [() => getUsers()]
+    null,
+    {
+      username,
+      id: userId,
+    }
   );
 }

frontend/js/actions/movies.js

@@ -48,6 +48,17 @@ export function getMovieDetails(imdbId) {
   );
 }
 
+export function fetchMovieDetails(imdbId) {
+  return request(
+    "MOVIE_FETCH_DETAILS",
+    configureAxios().get(`/movies/${imdbId}`),
+    null,
+    {
+      imdbId,
+    }
+  );
+}
+
 export function deleteMovie(imdbId, lastFetchUrl) {
   return request("MOVIE_DELETE", configureAxios().delete(`/movies/${imdbId}`), [
     fetchMovies(lastFetchUrl),

frontend/js/actions/subtitles.js

@@ -1,24 +1,25 @@
 import { configureAxios, request } from "../requests";
 
-export const searchMovieSubtitles = (imdbId) => {
+export const searchMovieSubtitle = (imdbId, lang) => {
   return request(
     "MOVIE_SUBTITLES_UPDATE",
-    configureAxios().post(`/movies/${imdbId}/subtitles/refresh`),
+    configureAxios().post(`/movies/${imdbId}/subtitles/${lang}`),
     null,
-    { imdbId: imdbId }
+    { imdbId, lang }
   );
 };
 
-export const searchEpisodeSubtitles = (imdbId, season, episode) => {
+export const searchEpisodeSubtitle = (imdbId, season, episode, lang) => {
   const url = `/shows/${imdbId}/seasons/${season}/episodes/${episode}`;
   return request(
     "EPISODE_SUBTITLES_UPDATE",
-    configureAxios().post(`${url}/subtitles/refresh`),
+    configureAxios().post(`${url}/subtitles/${lang}`),
     null,
     {
-      imdbId: imdbId,
-      season: season,
-      episode: episode,
+      imdbId,
+      season,
+      episode,
+      lang,
     }
   );
 };

frontend/js/app.js

@@ -14,7 +14,12 @@ import "../scss/app.scss";
 import React from "react";
 import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
-import { Router, Route, Switch, Redirect } from "react-router-dom";
+import {
+  HashRouter as Router,
+  Route,
+  Switch,
+  Redirect,
+} from "react-router-dom";
 import Container from "react-bootstrap/Container";
 
 // Auth
@@ -28,6 +33,7 @@ import { AdminPanel } from "./components/admins/panel";
 import { Notifications } from "./components/notifications/notifications";
 import { Alert } from "./components/alerts/alert";
 import MovieList from "./components/movies/list";
+import { MovieDetails } from "./components/movies/details";
 import { AppNavBar } from "./components/navbar";
 import { WsHandler } from "./components/websocket";
 import { ShowDetails } from "./components/shows/details";
@@ -61,6 +67,7 @@ const App = () => (
         />
         <Route path="/movies/polochon" exact component={MovieList} />
         <Route path="/movies/wishlist" exact component={MovieList} />
+        <Route path="/movies/details/:imdbId" exact component={MovieDetails} />
         <Route path="/movies/search/:search" exact component={MovieList} />
         <Route
           path="/movies/explore/:source/:category"
@@ -76,7 +83,9 @@ const App = () => (
           component={ShowList}
         />
         <Route path="/shows/details/:imdbId" exact component={ShowDetails} />
-        <Route render={() => <Redirect to="/movies/explore/yts/seeds" />} />
+        <Route
+          render={() => <Redirect to="/movies/explore/trakttv/trending" />}
+        />
       </Switch>
     </Container>
   </div>

frontend/js/components/admins/modules.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { getAdminModules } from "../../actions/admins";
 
@@ -10,9 +10,15 @@ export const AdminModules = () => {
   const loading = useSelector((state) => state.admin.fetchingModules);
   const modules = useSelector((state) => state.admin.modules);
 
-  useEffect(() => {
+  const fetchModules = () => {
     dispatch(getAdminModules());
-  }, [dispatch]);
+  };
 
-  return <Modules modules={modules} isLoading={loading} />;
+  return (
+    <Modules
+      modules={modules}
+      isLoading={loading}
+      fetchModules={fetchModules}
+    />
+  );
 };

frontend/js/components/admins/userEdit.js

@@ -51,7 +51,7 @@ export const UserEdit = ({ id }) => {
       e.preventDefault();
     }
     if (confirmDelete) {
-      dispatch(deleteUser(name));
+      dispatch(deleteUser(user.name, id));
       setModal(false);
     } else {
       setConfirmDelete(true);

frontend/js/components/buttons/download.js

@@ -18,7 +18,7 @@ export const DownloadAndStream = ({ url, name, subtitles }) => {
 DownloadAndStream.propTypes = {
   url: PropTypes.string,
   name: PropTypes.string,
-  subtitles: PropTypes.array,
+  subtitles: PropTypes.object,
 };
 
 const DownloadButton = ({ url }) => (
@@ -67,19 +67,18 @@ const StreamButton = ({ name, url, subtitles }) => {
 StreamButton.propTypes = {
   name: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
-  subtitles: PropTypes.array,
+  subtitles: PropTypes.object,
 };
 
 const Player = ({ url, subtitles }) => {
-  const subs = subtitles || [];
-
   return (
     <div className="embed-responsive embed-responsive-16by9">
       <video className="embed-responsive-item" controls>
         <source src={url} type="video/mp4" />
-        {subs.map((sub, index) => (
+        {subtitles &&
+          [...subtitles.entries()].map(([lang, sub]) => (
             <track
-            key={index}
+              key={lang}
               kind="subtitles"
               label={sub.language}
               src={sub.vvt_file}
@@ -91,6 +90,6 @@ const Player = ({ url, subtitles }) => {
   );
 };
 Player.propTypes = {
-  subtitles: PropTypes.array,
+  subtitles: PropTypes.object,
   url: PropTypes.string.isRequired,
 };

frontend/js/components/buttons/subtitles.js

@@ -3,25 +3,22 @@ import PropTypes from "prop-types";
 
 import Dropdown from "react-bootstrap/Dropdown";
 
+import { prettySize, upperCaseFirst } from "../../utils";
+
 export const SubtitlesButton = ({
   subtitles,
   inLibrary,
-  searching,
   search,
+  fetchingSubtitles,
 }) => {
   if (inLibrary === false) {
     return null;
   }
+
   /* eslint-disable */
   const [show, setShow] = useState(false);
   /* eslint-enable */
 
-  const onSelect = (eventKey) => {
-    if (eventKey === null || eventKey != 1) {
-      setShow(false);
-    }
-  };
-
   const onToggle = (isOpen, event, metadata) => {
     // Don't close on select
     if (metadata && metadata.source !== "select") {
@@ -29,10 +26,20 @@ export const SubtitlesButton = ({
     }
   };
 
-  const count = subtitles && subtitles.length !== 0 ? subtitles.length : 0;
+  const searchAll = () => {
+    const langs = ["fr_FR", "en_US"];
+    for (const lang of langs) {
+      search(lang);
+    }
+  };
+
+  const count = subtitles && subtitles.size !== 0 ? subtitles.size : 0;
+
+  const searching = fetchingSubtitles.length > 0;
+
   return (
     <span className="mr-1 mb-1">
-      <Dropdown drop="up" show={show} onToggle={onToggle} onSelect={onSelect}>
+      <Dropdown drop="up" show={show} onToggle={onToggle}>
         <Dropdown.Toggle variant="secondary" bsPrefix="btn-sm w-md-100">
           <i className="fa fa-commenting mr-1" />
           Subtitles
@@ -40,9 +47,13 @@ export const SubtitlesButton = ({
         </Dropdown.Toggle>
 
         <Dropdown.Menu>
-          <Dropdown.Item eventKey={1} onClick={search}>
-            <i className={`fa ${searching ? "fa-spin" : ""} fa-refresh mr-1`} />
-            Automatic search
+          <Dropdown.Item eventKey={1} onClick={searchAll}>
+            <div className="d-flex justify-content-between align-items-center">
+              <span>Automatic search</span>
+              <div
+                className={`fa ${searching ? "fa-spin" : ""} fa-refresh ml-1`}
+              />
+            </div>
           </Dropdown.Item>
           {count > 0 && (
             <React.Fragment>
@@ -53,10 +64,13 @@ export const SubtitlesButton = ({
             </React.Fragment>
           )}
           {count > 0 &&
-            subtitles.map((subtitle, index) => (
-              <Dropdown.Item href={subtitle.url} key={index}>
-                {subtitle.language.split("_")[1]}
-              </Dropdown.Item>
+            [...subtitles.entries()].map(([lang, subtitle]) => (
+              <SubtitleEntry
+                key={lang}
+                subtitle={subtitle}
+                searching={searching}
+                search={search}
+              />
             ))}
         </Dropdown.Menu>
       </Dropdown>
@@ -64,8 +78,42 @@ export const SubtitlesButton = ({
   );
 };
 SubtitlesButton.propTypes = {
-  subtitles: PropTypes.array,
+  subtitles: PropTypes.object,
   inLibrary: PropTypes.bool.isRequired,
-  searching: PropTypes.bool.isRequired,
+  fetchingSubtitles: PropTypes.array.isRequired,
   search: PropTypes.func.isRequired,
 };
+
+export const SubtitleEntry = ({ subtitle, search }) => {
+  const lang = upperCaseFirst(subtitle.lang.split("_")[0]);
+  const size = subtitle.size ? subtitle.size : 0;
+  const embedded = subtitle.embedded ? subtitle.embedded : false;
+
+  const handleRefresh = () => {
+    search(subtitle.lang);
+  };
+
+  return (
+    <Dropdown.Item as="span" disabled={embedded}>
+      <div className="d-flex justify-content-between align-items-center">
+        <a href={subtitle.url ? subtitle.url : ""} className="link-unstyled">
+          {lang}
+          {embedded && <small className="ml-2">(Inside the video)</small>}
+          {size !== 0 && <span> ({prettySize(size)})</span>}
+        </a>
+        {!embedded && (
+          <div
+            onClick={handleRefresh}
+            className={`clickable fa ${
+              subtitle.searching ? "fa-spin" : ""
+            } fa-refresh`}
+          />
+        )}
+      </div>
+    </Dropdown.Item>
+  );
+};
+SubtitleEntry.propTypes = {
+  search: PropTypes.func.isRequired,
+  subtitle: PropTypes.object,
+};

frontend/js/components/details/fanart.js

@@ -1,8 +1,10 @@
 import React from "react";
-import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
 
-export const Fanart = () => {
-  const url = useSelector((state) => state.show.show.fanart_url);
+export const Fanart = ({ url }) => {
+  if (url == "") {
+    return null;
+  }
   return (
     <div className="show-fanart mx-n3 mt-n1">
       <img
@@ -12,3 +14,9 @@ export const Fanart = () => {
     </div>
   );
 };
+Fanart.propTypes = {
+  url: PropTypes.string.isRequired,
+};
+Fanart.defaultProps = {
+  url: "",
+};

frontend/js/components/details/polochon.js

@@ -1,18 +1,23 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+import { prettySize } from "../../utils";
+
 export const PolochonMetadata = ({
   quality,
   container,
   videoCodec,
   audioCodec,
   releaseGroup,
+  size,
 }) => {
   if (!quality || quality === "") {
     return null;
   }
 
-  const metadata = [quality, container, videoCodec, audioCodec, releaseGroup]
+  const s = size === 0 ? "" : prettySize(size);
+
+  const metadata = [quality, container, videoCodec, audioCodec, releaseGroup, s]
     .filter((m) => m && m !== "")
     .join(", ");
 
@@ -29,4 +34,5 @@ PolochonMetadata.propTypes = {
   videoCodec: PropTypes.string,
   audioCodec: PropTypes.string,
   releaseGroup: PropTypes.string,
+  size: PropTypes.number,
 };

frontend/js/components/list/details.js

@@ -53,6 +53,7 @@ const ListDetails = (props) => {
         container={props.data.container}
         audioCodec={props.data.audio_codec}
         videoCodec={props.data.video_codec}
+        size={props.data.size}
       />
       <Plot plot={props.data.plot} />
       {props.children}

frontend/js/components/modules/modules.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Loader from "../loader/loader";
 import PropTypes from "prop-types";
 
@@ -7,11 +7,29 @@ import { upperCaseFirst } from "../../utils";
 // TODO: udpate this
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
-const Modules = ({ isLoading, modules }) => {
+const Modules = ({ isLoading, modules, fetchModules }) => {
+  const [show, setShow] = useState(false);
   if (isLoading) {
     return <Loader />;
   }
 
+  const handleClick = () => {
+    fetchModules();
+    setShow(true);
+  };
+
+  if (!show) {
+    return (
+      <div className="row">
+        <div className="col-12 col-md-8 offset-md-2 mb-3">
+          <div className="btn btn-secondary w-100" onClick={handleClick}>
+            Show modules status
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="row">
       {Object.keys(modules).map((type) => (
@@ -23,6 +41,7 @@ const Modules = ({ isLoading, modules }) => {
 Modules.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   modules: PropTypes.object.isRequired,
+  fetchModules: PropTypes.func.isRequired,
 };
 export default Modules;
 

frontend/js/components/movies/details.js

@@ -0,0 +1,162 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import { useSelector, useDispatch } from "react-redux";
+
+import {
+  fetchMovieDetails,
+  getMovieDetails,
+  movieWishlistToggle,
+} from "../../actions/movies";
+import { searchMovieSubtitle } from "../../actions/subtitles";
+
+import Loader from "../loader/loader";
+
+import { Fanart } from "../details/fanart";
+import { Plot } from "../details/plot";
+import { Rating } from "../details/rating";
+import { ReleaseDate } from "../details/releaseDate";
+import { Title } from "../details/title";
+import { PolochonMetadata } from "../details/polochon";
+import { TrackingLabel } from "../details/tracking";
+import { Genres } from "../details/genres";
+import { Runtime } from "../details/runtime";
+
+import { DownloadAndStream } from "../buttons/download";
+import { ImdbBadge } from "../buttons/imdb";
+import { TorrentsButton } from "../buttons/torrents";
+import { SubtitlesButton } from "../buttons/subtitles";
+import { ShowMore } from "../buttons/showMore";
+
+export const MovieDetails = ({ match }) => {
+  const dispatch = useDispatch();
+  const loading = useSelector((state) => state.movie.loading);
+  const fanartUrl = useSelector((state) => state.movie.movie.fanart);
+
+  useEffect(() => {
+    dispatch(fetchMovieDetails(match.params.imdbId));
+  }, [dispatch, match]);
+
+  if (loading) {
+    return <Loader />;
+  }
+
+  return (
+    <React.Fragment>
+      <Fanart url={fanartUrl} />
+      <Header />
+    </React.Fragment>
+  );
+};
+
+MovieDetails.propTypes = {
+  match: PropTypes.object.isRequired,
+};
+
+export const Header = () => {
+  const dispatch = useDispatch();
+  const {
+    audioCodec,
+    container,
+    fetchingDetails,
+    fetchingSubtitles,
+    genres,
+    imdb_id: imdbId,
+    plot,
+    polochon_url: polochonUrl,
+    poster_url: posterUrl,
+    quality,
+    rating,
+    runtime,
+    size,
+    subtitles,
+    title,
+    torrents,
+    videoCodec,
+    votes,
+    wishlisted,
+    year,
+    release_group: releaseGroup,
+  } = useSelector((state) => state.movie.movie);
+
+  const inLibrary = polochonUrl !== "";
+
+  if (!imdbId || imdbId === "") {
+    return null;
+  }
+
+  return (
+    <div className="col-12 col-lg-10 offset-lg-1 mb-3">
+      <div className="d-flex flex-column flex-md-row">
+        <div className="d-flex justify-content-center">
+          <img className="overflow-hidden object-fit-cover" src={posterUrl} />
+        </div>
+
+        <div className="ml-sm-1">
+          <div className="card-body">
+            <p className="card-title">
+              <Title
+                title={title}
+                wishlisted={wishlisted}
+                wishlist={() =>
+                  dispatch(movieWishlistToggle(imdbId, wishlisted))
+                }
+              />
+            </p>
+            <p className="card-text">
+              <ReleaseDate date={year} />
+            </p>
+            <p className="card-text">
+              <Runtime runtime={runtime} />
+            </p>
+            <p className="card-text">
+              <Genres genres={genres} />
+            </p>
+            <p className="card-text">
+              <Rating rating={rating} votes={votes} />
+            </p>
+            <div className="card-text">
+              <ImdbBadge imdbId={imdbId} />
+              <DownloadAndStream
+                url={polochonUrl}
+                name={title}
+                subtitles={subtitles}
+              />
+            </div>
+            <p className="card-text">
+              <TrackingLabel inLibrary={inLibrary} wishlisted={wishlisted} />
+            </p>
+            <p className="card-text">
+              <PolochonMetadata
+                quality={quality}
+                releaseGroup={releaseGroup}
+                container={container}
+                audioCodec={audioCodec}
+                videoCodec={videoCodec}
+                size={size}
+              />
+            </p>
+            <p className="card-text">
+              <Plot plot={plot} />
+            </p>
+            <div className="card-text">
+              <ShowMore id={imdbId} inLibrary={inLibrary}>
+                <TorrentsButton
+                  torrents={torrents}
+                  searching={fetchingDetails}
+                  search={() => dispatch(getMovieDetails(imdbId))}
+                  url={`#/torrents/search/movies/${encodeURI(title)}`}
+                />
+                <SubtitlesButton
+                  inLibrary={inLibrary}
+                  fetchingSubtitles={fetchingSubtitles}
+                  subtitles={subtitles}
+                  search={(lang) => dispatch(searchMovieSubtitle(imdbId, lang))}
+                />
+              </ShowMore>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

frontend/js/components/movies/list.js

@@ -37,7 +37,7 @@ const fetchUrl = (match) => {
   }
 };
 
-const MovieList = ({ match }) => {
+const MovieList = ({ match, history }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -63,6 +63,10 @@ const MovieList = ({ match }) => {
     [dispatch]
   );
 
+  const movieDetails = (imdbId) => {
+    history.push("/movies/details/" + imdbId);
+  };
+
   return (
     <div className="row">
       <ListPosters
@@ -73,8 +77,8 @@ const MovieList = ({ match }) => {
         exploreOptions={exploreOptions}
         selectedImdbId={selectedImdbId}
         onClick={selectFunc}
-        onDoubleClick={() => {}}
-        onKeyEnter={() => {}}
+        onDoubleClick={movieDetails}
+        onKeyEnter={movieDetails}
         params={match.params}
         loading={loading}
       />
@@ -105,6 +109,7 @@ MovieList.propTypes = {
   updateFilter: PropTypes.func,
   movieWishlistToggle: PropTypes.func,
   selectMovie: PropTypes.func,
+  history: PropTypes.object,
   match: PropTypes.object,
 };
 

frontend/js/components/movies/subtitlesButton.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
-import { searchMovieSubtitles } from "../../actions/subtitles";
+import { searchMovieSubtitle } from "../../actions/subtitles";
 
 import { SubtitlesButton } from "../buttons/subtitles";
 
@@ -15,16 +15,16 @@ export const MovieSubtitlesButton = () => {
   const subtitles = useSelector(
     (state) => state.movies.movies.get(imdbId).subtitles
   );
-  const searching = useSelector(
+  const fetchingSubtitles = useSelector(
     (state) => state.movies.movies.get(imdbId).fetchingSubtitles
   );
 
   return (
     <SubtitlesButton
       inLibrary={inLibrary}
-      searching={searching}
+      fetchingSubtitles={fetchingSubtitles}
       subtitles={subtitles}
-      search={() => dispatch(searchMovieSubtitles(imdbId))}
+      search={(lang) => dispatch(searchMovieSubtitle(imdbId, lang))}
     />
   );
 };

frontend/js/components/navbar.js

@@ -99,7 +99,7 @@ Search.propTypes = {
 
 const MoviesDropdown = () => (
   <NavDropdown title="Movies" id="navbar-movies-dropdown">
-    <LinkContainer to="/movies/explore/yts/seeds">
+    <LinkContainer to="/movies/explore/trakttv/trending">
       <NavDropdown.Item>Discover</NavDropdown.Item>
     </LinkContainer>
     <LinkContainer to="/movies/polochon">

frontend/js/components/shows/details.js

@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from "react-redux";
 
 import Loader from "../loader/loader";
 
-import { Fanart } from "./details/fanart";
+import { Fanart } from "../details/fanart";
 import { Header } from "./details/header";
 import { SeasonsList } from "./details/seasons";
 
@@ -13,6 +13,7 @@ import { fetchShowDetails } from "../../actions/shows";
 export const ShowDetails = ({ match }) => {
   const dispatch = useDispatch();
   const loading = useSelector((state) => state.show.loading);
+  const fanartUrl = useSelector((state) => state.show.show.fanart_url);
 
   useEffect(() => {
     dispatch(fetchShowDetails(match.params.imdbId));
@@ -24,7 +25,7 @@ export const ShowDetails = ({ match }) => {
 
   return (
     <React.Fragment>
-      <Fanart />
+      <Fanart url={fanartUrl} />
       <div className="row no-gutters">
         <Header />
         <SeasonsList />

frontend/js/components/shows/details/episode.js

@@ -74,6 +74,7 @@ export const Episode = ({ season, episode }) => {
           container={data.container}
           audioCodec={data.audio_codec}
           videoCodec={data.video_codec}
+          size={data.size}
           light
         />
         <ShowMore

frontend/js/components/shows/details/subtitlesButton.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { useDispatch, useSelector } from "react-redux";
 
-import { searchEpisodeSubtitles } from "../../../actions/subtitles";
+import { searchEpisodeSubtitle } from "../../../actions/subtitles";
 
 import { SubtitlesButton } from "../../buttons/subtitles";
 
@@ -10,30 +10,27 @@ export const EpisodeSubtitlesButton = ({ season, episode }) => {
   const dispatch = useDispatch();
 
   const imdbId = useSelector((state) => state.show.show.imdb_id);
-  const searching = useSelector((state) =>
+  const fetchingSubtitles = useSelector(
+    (state) =>
       state.show.show.seasons.get(season).get(episode).fetchingSubtitles
-      ? state.show.show.seasons.get(season).get(episode).fetchingSubtitles
-      : false
   );
   const inLibrary = useSelector(
     (state) =>
       state.show.show.seasons.get(season).get(episode).polochon_url !== ""
   );
-  const subtitles = useSelector((state) =>
-    state.show.show.seasons.get(season).get(episode).subtitles
-      ? state.show.show.seasons.get(season).get(episode).subtitles
-      : []
+  const subtitles = useSelector(
+    (state) => state.show.show.seasons.get(season).get(episode).subtitles
   );
 
-  const search = () => {
-    dispatch(searchEpisodeSubtitles(imdbId, season, episode));
+  const search = (lang) => {
+    dispatch(searchEpisodeSubtitle(imdbId, season, episode, lang));
   };
 
   return (
     <SubtitlesButton
       subtitles={subtitles}
       inLibrary={inLibrary}
-      searching={searching}
+      fetchingSubtitles={fetchingSubtitles}
       search={search}
     />
   );

frontend/js/components/torrents/list/poster.js

@@ -1,17 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const Poster = ({ url }) => {
-  if (!url || url === "") {
+export const Poster = ({ thumb, fanart }) => {
+  if (thumb === "" && fanart === "") {
     return null;
   }
 
   return (
-    <div className="col-md-2 d-none d-md-block">
-      <img className="card-img" src={url} />
+    <div className="col-md-2">
+      {thumb !== "" && (
+        <img className="card-img d-none d-sm-block" src={thumb} />
+      )}
+      {fanart !== "" && (
+        <img className="card-img d-block d-sm-none" src={fanart} />
+      )}
     </div>
   );
 };
 Poster.propTypes = {
-  url: PropTypes.string,
+  thumb: PropTypes.string,
+  fanart: PropTypes.string,
+};
+Poster.defaultProps = {
+  thumb: "",
+  fanart: "",
 };

frontend/js/components/torrents/list/torrentGroup.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
 
 import { Torrent } from "./torrent";
 import { Poster } from "./poster";
@@ -17,18 +18,32 @@ export const TorrentGroup = ({ torrentKey }) => {
   const title = (torrent) => {
     switch (torrent.type) {
       case "movie":
-        return torrent.video.title;
+        return (
+          <Link
+            className="link-unstyled"
+            to={`/movies/details/${torrent.video.imdb_id}`}
+          >
+            {torrent.video.title}
+          </Link>
+        );
       case "episode":
-        return torrent.video.show_title;
+        return (
+          <Link
+            className="link-unstyled"
+            to={`/shows/details/${torrent.video.show_imdb_id}`}
+          >
+            {torrent.video.show_title}
+          </Link>
+        );
       default:
-        return "Files";
+        return <span>Files</span>;
     }
   };
 
   return (
     <div className="w-100 mb-3 card">
       <div className="row no-gutters">
-        <Poster url={torrents[0].img} />
+        <Poster thumb={torrents[0].thumb} fanart={torrents[0].fanart} />
         <div className="col-sm">
           <div className="card-body">
             <h4 className="card-title">{title(torrents[0])}</h4>

frontend/js/components/users/profile.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { PolochonList } from "../polochons/list";
@@ -12,15 +12,19 @@ export const UserProfile = () => {
   const modules = useSelector((state) => state.user.modules);
   const modulesLoading = useSelector((state) => state.user.modulesLoading);
 
-  useEffect(() => {
+  const fetchModules = () => {
     dispatch(getUserModules());
-  }, [dispatch]);
+  };
 
   return (
     <div>
       <UserEdit />
       <PolochonList />
-      <Modules modules={modules} isLoading={modulesLoading} />
+      <Modules
+        modules={modules}
+        isLoading={modulesLoading}
+        fetchModules={fetchModules}
+      />
     </div>
   );
 };

frontend/js/reducers/admins.js

@@ -17,6 +17,11 @@ export default (state = defaultState, action) =>
         break;
       }
 
+      case "ADMIN_DELETE_USER_FULFILLED": {
+        draft.users.delete(action.payload.main.id);
+        break;
+      }
+
       case "ADMIN_GET_STATS_FULFILLED": {
         draft.stats = action.payload.response.data;
         break;

frontend/js/reducers/index.js

@@ -5,6 +5,7 @@ import { enableMapSet } from "immer";
 enableMapSet();
 
 import movies from "./movies";
+import movie from "./movie";
 import shows from "./shows";
 import show from "./show";
 import user from "./users";
@@ -16,6 +17,7 @@ import notifications from "./notifications";
 
 export default combineReducers({
   movies,
+  movie,
   shows,
   show,
   user,

frontend/js/reducers/movie.js

@@ -0,0 +1,77 @@
+import { produce } from "immer";
+
+import { formatSubtitle, formatMovie } from "./utils";
+
+const defaultState = {
+  loading: false,
+  movie: {},
+};
+
+export default (state = defaultState, action) =>
+  produce(state, (draft) => {
+    switch (action.type) {
+      case "MOVIE_FETCH_DETAILS_PENDING":
+        draft.loading = true;
+        break;
+
+      case "MOVIE_FETCH_DETAILS_FULFILLED": {
+        draft.movie = formatMovie(action.payload.response.data);
+        draft.loading = false;
+        break;
+      }
+
+      case "MOVIE_GET_DETAILS_PENDING": {
+        let imdbId = action.payload.main.imdbId;
+        if (draft.movie.imdb_id !== imdbId) {
+          break;
+        }
+
+        draft.movie.fetchingDetails = true;
+        break;
+      }
+
+      case "MOVIE_GET_DETAILS_FULFILLED": {
+        let imdbId = action.payload.main.imdbId;
+        if (draft.movie.imdb_id !== imdbId) {
+          break;
+        }
+
+        draft.movie = formatMovie(action.payload.response.data);
+        break;
+      }
+
+      case "MOVIE_SUBTITLES_UPDATE_PENDING": {
+        let imdbId = action.payload.main.imdbId;
+        if (draft.movie.imdb_id !== imdbId) {
+          break;
+        }
+
+        let lang = action.payload.main.lang;
+        draft.movie.fetchingSubtitles.push(lang);
+        if (draft.movie.subtitles.get(lang)) {
+          draft.movie.subtitles.get(lang).searching = true;
+        }
+        break;
+      }
+
+      case "MOVIE_SUBTITLES_UPDATE_FULFILLED": {
+        let imdbId = action.payload.main.imdbId;
+        if (draft.movie.imdb_id !== imdbId) {
+          break;
+        }
+
+        let lang = action.payload.main.lang;
+        let data = action.payload.response.data;
+        draft.movie.fetchingSubtitles = draft.movie.fetchingSubtitles.filter(
+          (l) => l != lang
+        );
+        if (data) {
+          draft.movie.subtitles.set(lang, formatSubtitle(data));
+        }
+        break;
+      }
+
+      default:
+        return draft;
+    }
+  });

frontend/js/reducers/movies.js

@@ -1,6 +1,6 @@
 import { produce } from "immer";
 
-import { formatTorrents } from "../utils";
+import { formatSubtitle, formatMovie } from "./utils";
 
 const defaultState = {
   loading: false,
@@ -10,13 +10,6 @@ const defaultState = {
   exploreOptions: {},
 };
 
-const formatMovie = (movie) => {
-  movie.fetchingDetails = false;
-  movie.fetchingSubtitles = false;
-  movie.torrents = formatTorrents(movie);
-  return movie;
-};
-
 const formatMovies = (movies = []) => {
   let allMoviesInPolochon = true;
   movies.map((movie) => {
@@ -64,10 +57,17 @@ export default (state = defaultState, action) =>
         break;
 
       case "MOVIE_GET_DETAILS_PENDING":
+        if (!draft.movies.get(action.payload.main.imdbId)) {
+          break;
+        }
         draft.movies.get(action.payload.main.imdbId).fetchingDetails = true;
         break;
 
       case "MOVIE_GET_DETAILS_FULFILLED":
+        if (!draft.movies.get(action.payload.main.imdbId)) {
+          break;
+        }
+
         draft.movies.set(
           action.payload.response.data.imdb_id,
           formatMovie(action.payload.response.data)
@@ -87,15 +87,36 @@ export default (state = defaultState, action) =>
         draft.lastFetchUrl = action.payload.url;
         break;
 
-      case "MOVIE_SUBTITLES_UPDATE_PENDING":
-        draft.movies.get(action.payload.main.imdbId).fetchingSubtitles = true;
+      case "MOVIE_SUBTITLES_UPDATE_PENDING": {
+        let imdbId = action.payload.main.imdbId;
+        let lang = action.payload.main.lang;
+        if (!draft.movies.get(imdbId)) {
           break;
+        }
 
-      case "MOVIE_SUBTITLES_UPDATE_FULFILLED":
-        draft.movies.get(action.payload.main.imdbId).fetchingSubtitles = false;
-        draft.movies.get(action.payload.main.imdbId).subtitles =
-          action.payload.response.data;
+        draft.movies.get(imdbId).fetchingSubtitles.push(lang);
+        if (draft.movies.get(imdbId).subtitles.get(lang)) {
+          draft.movies.get(imdbId).subtitles.get(lang).searching = true;
+        }
         break;
+      }
+
+      case "MOVIE_SUBTITLES_UPDATE_FULFILLED": {
+        let imdbId = action.payload.main.imdbId;
+        let lang = action.payload.main.lang;
+        let data = action.payload.response.data;
+        if (!draft.movies.get(imdbId)) {
+          break;
+        }
+
+        draft.movies.get(imdbId).fetchingSubtitles = draft.movies
+          .get(imdbId)
+          .fetchingSubtitles.filter((l) => l != lang);
+        if (data) {
+          draft.movies.get(imdbId).subtitles.set(lang, formatSubtitle(data));
+        }
+        break;
+      }
 
       case "SELECT_MOVIE":
         draft.selectedImdbId = action.payload.imdbId;

frontend/js/reducers/show.js

@@ -1,6 +1,6 @@
 import { produce } from "immer";
 
-import { formatTorrents } from "../utils";
+import { formatTorrents, formatSubtitle, formatSubtitles } from "./utils";
 
 const defaultState = {
   loading: false,
@@ -10,10 +10,12 @@ const defaultState = {
 const formatEpisode = (episode) => {
   // Format the episode's torrents
   episode.torrents = formatTorrents(episode);
+  episode.subtitles = formatSubtitles(episode.subtitles);
 
   // Set the default fetching data
   episode.fetching = false;
-  episode.fetchingSubtitles = false;
+  // Holds the languages of the subtitles currently fetching
+  episode.fetchingSubtitles = [];
 };
 
 export default (state = defaultState, action) =>
@@ -98,22 +100,42 @@ export default (state = defaultState, action) =>
         break;
       }
 
-      case "EPISODE_SUBTITLES_UPDATE_PENDING":
+      case "EPISODE_SUBTITLES_UPDATE_PENDING": {
+        let season = action.payload.main.season;
+        let episode = action.payload.main.episode;
+        let lang = action.payload.main.lang;
         draft.show.seasons
-          .get(action.payload.main.season)
-          .get(action.payload.main.episode).fetchingSubtitles = true;
-        break;
-
-      case "EPISODE_SUBTITLES_UPDATE_FULFILLED": {
+          .get(season)
+          .get(episode)
+          .fetchingSubtitles.push(lang);
+        if (draft.show.seasons.get(season).get(episode).subtitles.get(lang)) {
           draft.show.seasons
-          .get(action.payload.main.season)
-          .get(action.payload.main.episode).subtitles =
-          action.payload.response.data;
-        draft.show.seasons
-          .get(action.payload.main.season)
-          .get(action.payload.main.episode).fetchingSubtitles = false;
+            .get(season)
+            .get(episode)
+            .subtitles.get(lang).searching = true;
+        }
         break;
       }
+
+      case "EPISODE_SUBTITLES_UPDATE_FULFILLED": {
+        let season = action.payload.main.season;
+        let episode = action.payload.main.episode;
+        let lang = action.payload.main.lang;
+        let data = action.payload.response.data;
+        draft.show.seasons.get(season).get(episode).fetchingSubtitles =
+          draft.show.seasons
+            .get(season)
+            .get(episode)
+            .fetchingSubtitles.filter((l) => l != lang);
+        if (data) {
+          draft.show.seasons
+            .get(season)
+            .get(episode)
+            .subtitles.set(lang, formatSubtitle(data));
+        }
+        break;
+      }
+
       default:
         return draft;
     }

frontend/js/reducers/utils.js

@@ -0,0 +1,51 @@
+export const formatSubtitles = (subtitles) => {
+  if (!subtitles || subtitles.length == 0) {
+    return new Map();
+  }
+
+  let map = new Map();
+  subtitles.forEach((subtitle) => {
+    subtitle = formatSubtitle(subtitle);
+    map.set(subtitle.lang, subtitle);
+  });
+
+  return map;
+};
+
+export const formatSubtitle = (subtitle) => {
+  if (!subtitle) {
+    return undefined;
+  }
+
+  subtitle.searching = false;
+  return subtitle;
+};
+
+export const formatTorrents = (input) => {
+  if (!input.torrents || input.torrents.length == 0) {
+    return undefined;
+  }
+
+  let torrentMap = new Map();
+  input.torrents.forEach((torrent) => {
+    if (!torrent.result || !torrent.result.source) {
+      return;
+    }
+
+    if (!torrentMap.has(torrent.result.source)) {
+      torrentMap.set(torrent.result.source, new Map());
+    }
+
+    torrentMap.get(torrent.result.source).set(torrent.quality, torrent);
+  });
+
+  return torrentMap;
+};
+
+export const formatMovie = (movie) => {
+  movie.fetchingDetails = false;
+  movie.fetchingSubtitles = [];
+  movie.torrents = formatTorrents(movie);
+  movie.subtitles = formatSubtitles(movie.subtitles);
+  return movie;
+};

frontend/js/utils.js

@@ -35,26 +35,5 @@ export const prettySize = (fileSizeInBytes) => {
   return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
 };
 
-export const formatTorrents = (input) => {
-  if (!input.torrents || input.torrents.length == 0) {
-    return undefined;
-  }
-
-  let torrentMap = new Map();
-  input.torrents.forEach((torrent) => {
-    if (!torrent.result || !torrent.result.source) {
-      return;
-    }
-
-    if (!torrentMap.has(torrent.result.source)) {
-      torrentMap.set(torrent.result.source, new Map());
-    }
-
-    torrentMap.get(torrent.result.source).set(torrent.quality, torrent);
-  });
-
-  return torrentMap;
-};
-
 export const upperCaseFirst = (string) =>
   string.charAt(0).toUpperCase() + string.slice(1);

frontend/package.json

@@ -1,64 +1,62 @@
 {
     "name": "canape",
     "scripts": {
-        "start": "NODE_ENV=development ./node_modules/webpack/bin/webpack.js -d --progress --colors --watch",
-        "build": "NODE_ENV=production  ./node_modules/webpack/bin/webpack.js -p --progress --colors",
-        "lint": "./node_modules/eslint/bin/eslint.js js"
+        "start": "NODE_ENV=development npx webpack --progress --color --watch",
+        "build": "NODE_ENV=production  npx webpack --progress --color",
+        "lint": "npx eslint js"
     },
     "dependencies": {
         "bootstrap": "^4.4.1",
         "bootswatch": "^4.4.1",
         "font-awesome": "^4.7.0",
         "fuzzy": "^0.1.3",
-        "history": "^4.9.0",
-        "immer": "^6.0.3",
-        "jquery": "^3.4.1",
-        "jwt-decode": "^2.1.0",
-        "moment": "^2.20.1",
+        "history": "^5.0.0",
+        "immer": "^9.0.5",
+        "jquery": "^3.6.0",
+        "jwt-decode": "^3.1.2",
+        "moment": "^2.29.1",
         "popper.js": "^1.15.0",
-        "prop-types": "^15.6.0",
-        "react": "^16.13.1",
-        "react-bootstrap": "^1.0.0",
-        "react-bootstrap-sweetalert": "^5.1.9",
-        "react-bootstrap-toggle": "^2.2.6",
-        "react-dom": "^16.13.1",
-        "react-infinite-scroll-component": "^5.0.4",
+        "prop-types": "^15.7.2",
+        "react": "^17.0.2",
+        "react-bootstrap": "^1.6.1",
+        "react-bootstrap-sweetalert": "^5.2.0",
+        "react-bootstrap-toggle": "^2.3.2",
+        "react-dom": "^17.0.2",
+        "react-infinite-scroll-component": "^6.1.0",
         "react-loading": "2.0.3",
-        "react-redux": "^7.2.0",
+        "react-redux": "^7.2.4",
         "react-router-bootstrap": "^0.25.0",
-        "react-router-dom": "^5.1.2",
-        "redux": "^4.0.5",
+        "react-router-dom": "^5.2.0",
+        "redux": "^4.1.1",
         "redux-logger": "^3.0.6",
         "redux-thunk": "^2.3.0",
-        "ua-parser-js": "^0.7.17"
+        "ua-parser-js": "^0.7.28"
     },
     "devDependencies": {
-        "@babel/core": "^7.9.0",
-        "@babel/preset-env": "^7.9.0",
-        "@babel/preset-react": "^7.9.4",
-        "autoprefixer": "^9.7.5",
-        "axios": "^0.19.2",
+        "@babel/core": "^7.15.0",
+        "@babel/preset-env": "^7.15.0",
+        "@babel/preset-react": "^7.14.5",
+        "autoprefixer": "^10.3.1",
+        "axios": "^0.21.1",
         "babel-eslint": "^10.1.0",
-        "babel-loader": "^8.1.0",
+        "babel-loader": "^8.2.2",
         "clean-webpack-plugin": "^3.0.0",
-        "css-loader": "^3.4.2",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.10.1",
-        "eslint-plugin-import": "^2.20.2",
-        "eslint-plugin-prettier": "^3.1.2",
-        "eslint-plugin-react": "^7.19.0",
-        "eslint-plugin-react-hooks": "^2.5.1",
-        "file-loader": "^5.1.0",
-        "html-webpack-plugin": "^3.2.0",
-        "node-sass": "^4.12.0",
-        "postcss-loader": "^3.0.0",
-        "prettier": "^2.0.2",
-        "sass-loader": "^8.0.2",
-        "style-loader": "^1.1.3",
-        "universal-cookie": "^4.0.3",
-        "url-loader": "^3.0.0",
-        "webpack": "^4.42.1",
-        "webpack-cli": "^3.3.11",
-        "webpack-pwa-manifest": "^4.0.0"
+        "css-loader": "^6.2.0",
+        "eslint": "^7.32.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-import": "^2.24.0",
+        "eslint-plugin-prettier": "^3.4.0",
+        "eslint-plugin-react": "^7.24.0",
+        "eslint-plugin-react-hooks": "^4.2.0",
+        "html-webpack-plugin": "^5.3.2",
+        "postcss-loader": "^6.1.1",
+        "prettier": "^2.3.2",
+        "sass": "^1.37.5",
+        "sass-loader": "^12.1.0",
+        "style-loader": "^3.2.1",
+        "universal-cookie": "^4.0.4",
+        "webpack": "^5.50.0",
+        "webpack-cli": "^4.7.2",
+        "webpack-pwa-manifest": "^4.3.0"
     }
 }

frontend/scss/app.scss

@@ -146,3 +146,8 @@ div.sweet-alert > h2 {
 .toast {
     background-color: $card-bg;
 }
+
+.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
+  color: inherit;
+  text-decoration: inherit;
+}

frontend/webpack.config.js

@@ -20,19 +20,9 @@ const config = {
   output: {
     path: BUILD_DIR,
     filename: "[contenthash]-app.js",
+    assetModuleFilename: "[hash]-[name][ext][query]",
   },
-  optimization: {
-    runtimeChunk: "single",
-    splitChunks: {
-      cacheGroups: {
-        vendor: {
-          test: /[\\/]node_modules[\\/]/,
-          name: "vendors",
-          chunks: "all",
-        },
-      },
-    },
-  },
+  optimization: {},
   module: {
     rules: [
       {
@@ -51,15 +41,15 @@ const config = {
       },
       {
         test: /\.(png|jpg|svg|ico)$/,
-        use: ["file-loader?name=[hash]-[name].[ext]"],
+        type: "asset/resource",
       },
       {
         test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: ["url-loader?limit=10000&mimetype=application/font-woff"],
+        type: "asset",
       },
       {
         test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-        use: ["file-loader"],
+        type: "asset",
       },
     ],
   },
@@ -67,7 +57,6 @@ const config = {
     new webpack.DefinePlugin({
       "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
     }),
-    new webpack.HashedModuleIdsPlugin(),
     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: ["**/*", "!img/**/*", "!img"],
     }),
@@ -87,6 +76,7 @@ const config = {
       theme_color: "#4e5d6c", // eslint-disable-line camelcase
       display: "standalone",
       orientation: "omit",
+      publicPath: "/",
       scope: "/",
       start_url: "/", // eslint-disable-line camelcase
       icons: [
@@ -105,7 +95,7 @@ const config = {
   resolve: {
     extensions: [".js"],
   },
-  devtool: mode === "production" ? "source-map" : "inline-source-map",
+  devtool: mode === "production" ? false : "source-map",
 };
 
 module.exports = config;