KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Removed /dist prefix from all image paths

Browse Source
This commit is contained in:
Kevin
2022-01-03 20:29:03 +01:00
parent d43c12b103
commit d640f7f882
4 changed files with 278 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/Home.vue
View File

@@ -12,74 +12,76 @@
</template> </template>
<script> <script>
import LandingBanner from '@/components/LandingBanner' import LandingBanner from "@/components/LandingBanner";
import ListHeader from '@/components/ListHeader' import ListHeader from "@/components/ListHeader";
import ResultsList from '@/components/ResultsList' import ResultsList from "@/components/ResultsList";
import Loader from '@/components/ui/Loader' import Loader from "@/components/ui/Loader";
import { getTmdbMovieListByName, getRequests } from '@/api' import { getTmdbMovieListByName, getRequests } from "@/api";
export default { export default {
name: 'home', name: "home",
components: { LandingBanner, ResultsList, ListHeader, Loader }, components: { LandingBanner, ResultsList, ListHeader, Loader },
data(){ data() {
return { return {
imageFile: 'dist/pulp-fiction.jpg', imageFile: "/pulp-fiction.jpg",
requests: [], requests: [],
nowplaying: [], nowplaying: [],
upcoming: [], upcoming: [],
popular: [] popular: []
} };
}, },
computed: { computed: {
lists() { lists() {
return [ return [
{ {
title: 'Requests', title: "Requests",
route: 'request', route: "request",
data: this.requests data: this.requests
}, },
{ {
title: 'Now playing', title: "Now playing",
route: 'now_playing', route: "now_playing",
data: this.nowplaying data: this.nowplaying
}, },
{ {
title: 'Upcoming', title: "Upcoming",
route: 'upcoming', route: "upcoming",
data: this.upcoming data: this.upcoming
}, },
{ {
title: 'Popular', title: "Popular",
route: 'popular', route: "popular",
data: this.popular data: this.popular
} }
] ];
} }
}, },
methods: { methods: {
fetchRequests() { fetchRequests() {
getRequests() getRequests().then(results => (this.requests = results.results));
.then(results => this.requests = results.results)
}, },
fetchNowPlaying() { fetchNowPlaying() {
getTmdbMovieListByName('now_playing') getTmdbMovieListByName("now_playing").then(
.then(results => this.nowplaying = results.results) results => (this.nowplaying = results.results)
);
}, },
fetchUpcoming() { fetchUpcoming() {
getTmdbMovieListByName('upcoming') getTmdbMovieListByName("upcoming").then(
.then(results => this.upcoming = results.results) results => (this.upcoming = results.results)
);
}, },
fetchPopular() { fetchPopular() {
getTmdbMovieListByName('popular') getTmdbMovieListByName("popular").then(
.then(results => this.popular = results.results) results => (this.popular = results.results)
);
} }
}, },
created(){ created() {
this.fetchRequests() this.fetchRequests();
this.fetchNowPlaying() this.fetchNowPlaying();
this.fetchUpcoming() this.fetchUpcoming();
this.fetchPopular() this.fetchPopular();
} }
} };
</script> </script>

22
src/components/LandingBanner.vue
View File

@@ -17,15 +17,15 @@ export default {
}, },
data() { data() {
return { return {
imageFile: 'dist/pulp-fiction.jpg' imageFile: "/pulp-fiction.jpg"
} };
}, },
beforeMount() { beforeMount() {
if (this.image && this.image.length > 0) { if (this.image && this.image.length > 0) {
this.imageFile = this.image this.imageFile = this.image;
} }
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -55,15 +55,15 @@ header {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $background-70; background-color: $background-70;
transition: background-color .5s ease; transition: background-color 0.5s ease;
} }
.container { .container {
text-align: center; text-align: center;
position: relative; position: relative;
transition: color .5s ease; transition: color 0.5s ease;
} }
.title { .title {
font-weight: 500; font-weight: 500;
font-size: 22px; font-size: 22px;
@@ -72,7 +72,7 @@ header {
color: $text-color; color: $text-color;
margin: 0; margin: 0;
@include tablet-min{ @include tablet-min {
font-size: 28px; font-size: 28px;
} }
} }
@@ -84,9 +84,9 @@ header {
color: $text-color-70; color: $text-color-70;
margin: 5px 0; margin: 5px 0;
@include tablet-min{ @include tablet-min {
font-size: 16px; font-size: 16px;
} }
} }
} }
</style> </style>

432
src/components/Movie.vue
View File

@@ -1,12 +1,17 @@
<template> <template>
<section class="movie"> <section class="movie">
<!-- HEADER w/ POSTER --> <!-- HEADER w/ POSTER -->
<header ref="header" :class="compact ? 'compact' : ''" @click="compact=!compact"> <header
ref="header"
:class="compact ? 'compact' : ''"
@click="compact = !compact"
>
<figure class="movie__poster"> <figure class="movie__poster">
<img class="movie-item__img is-loaded" <img
ref="poster-image" class="movie-item__img is-loaded"
src="~assets/placeholder.png"> ref="poster-image"
src="~assets/placeholder.png"
/>
</figure> </figure>
<h1 class="movie__title" v-if="movie">{{ movie.title }}</h1> <h1 class="movie__title" v-if="movie">{{ movie.title }}</h1>
@@ -16,29 +21,40 @@
<!-- Siderbar and movie info --> <!-- Siderbar and movie info -->
<div class="movie__main"> <div class="movie__main">
<div class="movie__wrap movie__wrap--main"> <div class="movie__wrap movie__wrap--main">
<!-- SIDEBAR ACTIONS --> <!-- SIDEBAR ACTIONS -->
<div class="movie__actions" v-if="movie"> <div class="movie__actions" v-if="movie">
<sidebar-list-element
<sidebar-list-element :iconRef="'#iconNot_exsits'" :active="matched" :iconRef="'#iconNot_exsits'"
:iconRefActive="'#iconExists'" :textActive="'Already in plex 🎉'"> :active="matched"
:iconRefActive="'#iconExists'"
:textActive="'Already in plex 🎉'"
>
Not yet in plex Not yet in plex
</sidebar-list-element> </sidebar-list-element>
<sidebar-list-element @click="sendRequest" :iconRef="'#iconSent'" <sidebar-list-element
:active="requested" :textActive="'Requested to be downloaded'"> @click="sendRequest"
:iconRef="'#iconSent'"
:active="requested"
:textActive="'Requested to be downloaded'"
>
Request to be downloaded? Request to be downloaded?
</sidebar-list-element> </sidebar-list-element>
<sidebar-list-element v-if="isPlexAuthenticated && matched" @click="openInPlex" :iconString="'⏯ '"> <sidebar-list-element
v-if="isPlexAuthenticated && matched"
@click="openInPlex"
:iconString="'⏯ '"
>
Watch in plex now! Watch in plex now!
</sidebar-list-element> </sidebar-list-element>
<sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents" <sidebar-list-element
:iconRef="'#icon_torrents'" :active="showTorrents" v-if="admin"
:supplementaryText="numberOfTorrentResults"> @click="showTorrents = !showTorrents"
:iconRef="'#icon_torrents'"
:active="showTorrents"
:supplementaryText="numberOfTorrentResults"
>
Search for torrents Search for torrents
</sidebar-list-element> </sidebar-list-element>
<sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'"> <sidebar-list-element @click="openTmdb" :iconRef="'#icon_info'">
@@ -48,20 +64,28 @@
<!-- Loading placeholder --> <!-- Loading placeholder -->
<div class="movie__actions text-input__loading" v-else> <div class="movie__actions text-input__loading" v-else>
<div class="movie__actions-link" v-for="_ in admin ? Array(4) : Array(3)"> <div
<div class="movie__actions-text text-input__loading--line" style="margin:9px; margin-left: -3px;"></div> class="movie__actions-link"
v-for="_ in admin ? Array(4) : Array(3)"
>
<div
class="movie__actions-text text-input__loading--line"
style="margin: 9px; margin-left: -3px"
></div>
</div> </div>
</div> </div>
<!-- MOVIE INFO --> <!-- MOVIE INFO -->
<div class="movie__info"> <div class="movie__info">
<!-- Loading placeholder --> <!-- Loading placeholder -->
<div class="movie__description noselect" <div
@click="truncatedDescription=!truncatedDescription" class="movie__description noselect"
v-if="!loading"> @click="truncatedDescription = !truncatedDescription"
<span :class="truncatedDescription ? 'truncated':null">{{ movie.overview }}</span> v-if="!loading"
>
<span :class="truncatedDescription ? 'truncated' : null">{{
movie.overview
}}</span>
<button class="truncate-toggle"><i>⬆</i></button> <button class="truncate-toggle"><i>⬆</i></button>
</div> </div>
<div v-else class="movie__description"> <div v-else class="movie__description">
@@ -74,7 +98,7 @@
<div class="text">{{ movie.year }}</div> <div class="text">{{ movie.year }}</div>
</div> </div>
<div v-if="movie.rating"> <div v-if="movie.rating">
<h2 class="title">Rating</h2> <h2 class="title">Rating</h2>
<div class="text">{{ movie.rating }}</div> <div class="text">{{ movie.rating }}</div>
</div> </div>
@@ -86,7 +110,7 @@
<div v-if="movie.genres"> <div v-if="movie.genres">
<h2 class="title">Genres</h2> <h2 class="title">Genres</h2>
<div class="text">{{ movie.genres.join(', ') }}</div> <div class="text">{{ movie.genres.join(", ") }}</div>
</div> </div>
<div v-if="movie.type == 'show'"> <div v-if="movie.type == 'show'">
@@ -94,49 +118,56 @@
<div class="text">{{ movie.production_status }}</div> <div class="text">{{ movie.production_status }}</div>
</div> </div>
<div v-if="movie.type == 'show'"> <div v-if="movie.type == 'show'">
<h2 class="title">Runtime</h2> <h2 class="title">Runtime</h2>
<div class="text">{{ movie.runtime[0] }} minutes</div> <div class="text">{{ movie.runtime[0] }} minutes</div>
</div> </div>
</div> </div>
</div> </div>
<!-- TODO: change this classname, this is general --> <!-- TODO: change this classname, this is general -->
<div class="movie__admin" v-if="movie && movie.credits"> <div class="movie__admin" v-if="movie && movie.credits">
<h2 class="movie__details-title">Cast</h2> <h2 class="movie__details-title">Cast</h2>
<div style="display: flex; flex-wrap: wrap;"> <div style="display: flex; flex-wrap: wrap">
<person v-for="cast in movie.credits.cast" :info="cast" <person
style="flex-basis: 0;"></person> v-for="cast in movie.credits.cast"
</div> :info="cast"
style="flex-basis: 0"
></person>
</div>
</div> </div>
</div> </div>
<!-- TORRENT LIST --> <!-- TORRENT LIST -->
<TorrentList v-if="movie" :show="showTorrents" :query="title" :tmdb_id="id" <TorrentList
:admin="admin"></TorrentList> v-if="movie"
:show="showTorrents"
:query="title"
:tmdb_id="id"
:admin="admin"
></TorrentList>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import storage from '@/storage' import storage from "@/storage";
import img from '@/directives/v-image' import img from "@/directives/v-image";
import TorrentList from './TorrentList' import TorrentList from "./TorrentList";
import Person from './Person' import Person from "./Person";
import SidebarListElement from './ui/sidebarListElem' import SidebarListElement from "./ui/sidebarListElem";
import store from '@/store' import store from "@/store";
import LoadingPlaceholder from './ui/LoadingPlaceholder' import LoadingPlaceholder from "./ui/LoadingPlaceholder";
import { getMovie, import {
getPerson, getMovie,
getShow, getPerson,
request, getShow,
getRequestStatus, request,
watchLink } from '@/api' getRequestStatus,
watchLink
} from "@/api";
export default { export default {
// props: ['id', 'type'], // props: ['id', 'type'],
@@ -145,17 +176,17 @@ export default {
required: true, required: true,
type: Number type: Number
}, },
type: { type: {
required: false, required: false,
type: String type: String
} }
}, },
components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement }, components: { TorrentList, Person, LoadingPlaceholder, SidebarListElement },
directives: { img: img }, // TODO decide to remove or use directives: { img: img }, // TODO decide to remove or use
data(){ data() {
return{ return {
ASSET_URL: 'https://image.tmdb.org/t/p/', ASSET_URL: "https://image.tmdb.org/t/p/",
ASSET_SIZES: ['w500', 'w780', 'original'], ASSET_SIZES: ["w500", "w780", "original"],
movie: undefined, movie: undefined,
title: undefined, title: undefined,
poster: undefined, poster: undefined,
@@ -163,111 +194,111 @@ export default {
matched: false, matched: false,
userLoggedIn: storage.sessionId ? true : false, userLoggedIn: storage.sessionId ? true : false,
requested: false, requested: false,
admin: localStorage.getItem('admin') == "true" ? true : false, admin: localStorage.getItem("admin") == "true" ? true : false,
showTorrents: false, showTorrents: false,
compact: false, compact: false,
loading: true, loading: true,
truncatedDescription: true truncatedDescription: true
} };
}, },
watch: { watch: {
id: function(val){ id: function (val) {
if (this.type === 'movie') { if (this.type === "movie") {
this.fetchMovie(val); this.fetchMovie(val);
} else { } else {
this.fetchShow(val) this.fetchShow(val);
} }
}, },
backdrop: function(backdrop) { backdrop: function (backdrop) {
if (backdrop != null) { if (backdrop != null) {
const style = { const style = {
backgroundImage: 'url(' + this.ASSET_URL + this.ASSET_SIZES[1] + backdrop + ')' backgroundImage:
} "url(" + this.ASSET_URL + this.ASSET_SIZES[1] + backdrop + ")"
};
Object.assign(this.$refs.header.style, style) Object.assign(this.$refs.header.style, style);
} }
} }
}, },
computed: { computed: {
numberOfTorrentResults: () => { numberOfTorrentResults: () => {
let numTorrents = store.getters['torrentModule/resultCount'] let numTorrents = store.getters["torrentModule/resultCount"];
return numTorrents !== null ? numTorrents + ' results' : null return numTorrents !== null ? numTorrents + " results" : null;
}, },
isPlexAuthenticated: () => { isPlexAuthenticated: () => {
return store.getters['userModule/isPlexAuthenticated'] return store.getters["userModule/isPlexAuthenticated"];
} }
}, },
methods: { methods: {
parseResponse(movie) { parseResponse(movie) {
this.loading = false this.loading = false;
this.movie = { ...movie } this.movie = { ...movie };
this.title = movie.title this.title = movie.title;
this.poster = movie.poster this.poster = movie.poster;
this.backdrop = movie.backdrop this.backdrop = movie.backdrop;
this.matched = movie.exists_in_plex || false this.matched = movie.exists_in_plex || false;
this.checkIfRequested(movie) this.checkIfRequested(movie).then(status => (this.requested = status));
.then(status => this.requested = status)
store.dispatch("documentTitle/updateTitle", movie.title);
store.dispatch('documentTitle/updateTitle', movie.title) this.setPosterSrc();
this.setPosterSrc()
}, },
async checkIfRequested(movie) { async checkIfRequested(movie) {
return await getRequestStatus(movie.id, movie.type) return await getRequestStatus(movie.id, movie.type);
}, },
setPosterSrc() { setPosterSrc() {
const poster = this.$refs['poster-image'] const poster = this.$refs["poster-image"];
if (this.poster == null) { if (this.poster == null) {
poster.src = '/dist/no-image.png' poster.src = "/no-image.png";
return return;
} }
poster.src = `${this.ASSET_URL}${this.ASSET_SIZES[0]}${this.poster}` poster.src = `${this.ASSET_URL}${this.ASSET_SIZES[0]}${this.poster}`;
}, },
sendRequest(){ sendRequest() {
request(this.id, this.type, storage.token) request(this.id, this.type, storage.token).then(resp => {
.then(resp => { if (resp.success) {
if (resp.success) { this.requested = true;
this.requested = true }
} });
})
}, },
openInPlex() { openInPlex() {
watchLink(this.title, this.movie.year, storage.token) watchLink(this.title, this.movie.year, storage.token).then(
.then(watchLink => window.location = watchLink) watchLink => (window.location = watchLink)
}, );
openTmdb(){
const tmdbType = this.type === 'show' ? 'tv' : this.type
window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id
}, },
openTmdb() {
const tmdbType = this.type === "show" ? "tv" : this.type;
window.location.href =
"https://www.themoviedb.org/" + tmdbType + "/" + this.id;
}
}, },
created() { created() {
this.prevDocumentTitle = store.getters['documentTitle/title'] this.prevDocumentTitle = store.getters["documentTitle/title"];
if (this.type === 'movie') { if (this.type === "movie") {
getMovie(this.id, true) getMovie(this.id, true)
.then(this.parseResponse) .then(this.parseResponse)
.catch(error => { .catch(error => {
this.$router.push({ name: '404' }); this.$router.push({ name: "404" });
}) });
} else if (this.type == 'person') { } else if (this.type == "person") {
getPerson(this.id, true) getPerson(this.id, true)
.then(this.parseResponse) .then(this.parseResponse)
.catch(error => { .catch(error => {
this.$router.push({ name: '404' }); this.$router.push({ name: "404" });
}) });
} else { } else {
getShow(this.id, true) getShow(this.id, true)
.then(this.parseResponse) .then(this.parseResponse)
.catch(error => { .catch(error => {
this.$router.push({ name: '404' }); this.$router.push({ name: "404" });
}) });
} }
}, },
beforeDestroy() { beforeDestroy() {
store.dispatch('documentTitle/updateTitle', this.prevDocumentTitle) store.dispatch("documentTitle/updateTitle", this.prevDocumentTitle);
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -342,19 +373,20 @@ header {
font-style: unset; font-style: unset;
font-size: 0.7rem; font-size: 0.7rem;
transition: 0.3s ease all; transition: 0.3s ease all;
transform: rotateY(180deg) transform: rotateY(180deg);
} }
&::before, &::after { &::before,
content: ''; &::after {
content: "";
flex: 1; flex: 1;
border-bottom: 1px solid $text-color-50; border-bottom: 1px solid $text-color-50;
} }
&::before { &::before {
margin-right: 1rem; margin-right: 1rem;
} }
&::after { &::after {
margin-left: 1rem; margin-left: 1rem;
} }
} }
@@ -369,7 +401,7 @@ header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
@include tablet-min{ @include tablet-min {
flex-direction: row; flex-direction: row;
} }
@@ -420,105 +452,105 @@ header {
height: 100%; height: 100%;
} }
&__actions { &__actions {
text-align: center; text-align: center;
width: 100%; width: 100%;
order: 2; order: 2;
padding: 20px; padding: 20px;
border-top: 1px solid $text-color-5; border-top: 1px solid $text-color-5;
@include tablet-min { @include tablet-min {
order: 1;
width: 45%;
padding: 185px 0 40px 40px;
border-top: 0;
}
}
&__info {
width: 100%;
padding: 20px;
order: 1; order: 1;
@include tablet-min { width: 45%;
order: 2; padding: 185px 0 40px 40px;
padding: 40px; border-top: 0;
width: 55%; }
margin-left: 45%; }
&__info {
width: 100%;
padding: 20px;
order: 1;
@include tablet-min {
order: 2;
padding: 40px;
width: 55%;
margin-left: 45%;
}
}
&__info {
margin-left: 0;
}
&__description {
font-weight: 300;
font-size: 13px;
line-height: 1.8;
margin-bottom: 20px;
& .truncated {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
& + .truncate-toggle > i {
transform: rotateY(0deg) rotateZ(180deg);
} }
} }
&__info {
margin-left: 0; @include tablet-min {
margin-bottom: 30px;
font-size: 14px;
} }
&__description { }
font-weight: 300; &__details {
font-size: 13px; display: flex;
line-height: 1.8; flex-wrap: wrap;
> div {
margin-bottom: 20px; margin-bottom: 20px;
margin-right: 20px;
& .truncated {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
& + .truncate-toggle > i {
transform: rotateY(0deg) rotateZ(180deg);
}
}
@include tablet-min { @include tablet-min {
margin-bottom: 30px; margin-bottom: 30px;
margin-right: 30px;
}
& .title {
margin: 0;
font-weight: 400;
text-transform: uppercase;
font-size: 14px; font-size: 14px;
} color: $green;
}
&__details {
display: flex;
flex-wrap: wrap;
> div {
margin-bottom: 20px;
margin-right: 20px;
@include tablet-min { @include tablet-min {
margin-bottom: 30px; font-size: 16px;
margin-right: 30px;
}
& .title {
margin: 0;
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
color: $green;
@include tablet-min {
font-size: 16px;
}
}
& .text {
font-weight: 300;
font-size: 14px;
margin-top: 5px;
} }
} }
& .text {
font-weight: 300;
font-size: 14px;
margin-top: 5px;
}
} }
&__admin { }
&__admin {
width: 100%;
padding: 20px;
order: 2;
@include tablet-min {
order: 3;
padding: 40px;
padding-top: 0px;
width: 100%; width: 100%;
padding: 20px;
order: 2;
@include tablet-min {
order: 3;
padding: 40px;
padding-top: 0px;
width: 100%;
}
&-title {
margin: 0;
font-weight: 400;
text-transform: uppercase;
text-align: center;
font-size: 14px;
color: $green;
padding-bottom: 20px;
@include tablet-min {
font-size: 16px;
}
}
} }
&-title {
margin: 0;
font-weight: 400;
text-transform: uppercase;
text-align: center;
font-size: 14px;
color: $green;
padding-bottom: 20px;
@include tablet-min {
font-size: 16px;
}
}
}
} }
</style> </style>

2
src/components/MoviesListItem.vue
View File

@@ -80,7 +80,7 @@ export default {
if (this.movie.poster != null) { if (this.movie.poster != null) {
this.poster = "https://image.tmdb.org/t/p/w500" + this.movie.poster; this.poster = "https://image.tmdb.org/t/p/w500" + this.movie.poster;
} else { } else {
this.poster = "/dist/no-image.png"; this.poster = "/no-image.png";
} }
}, },
mounted() { mounted() {