mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-11 03:49:07 +00:00
Renamed/moved files around
This commit is contained in:
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<section class="not-found" :style="background">
|
||||
<h1 class="not-found__title">Page Not Found</h1>
|
||||
<seasoned-button class="button" @click="goBack">
|
||||
go back to previous page
|
||||
</seasoned-button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from "vuex";
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton";
|
||||
|
||||
export default {
|
||||
components: { SeasonedButton },
|
||||
data() {
|
||||
return {
|
||||
background: 'background-image: url("/assets/pulp-fiction.jpg")'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("popup", ["isOpen"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions("popup", ["close"]),
|
||||
goBack() {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.isOpen) this.close();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/scss/variables";
|
||||
@import "src/scss/media-queries";
|
||||
|
||||
.button {
|
||||
font-size: 1.2rem;
|
||||
z-index: 10;
|
||||
|
||||
@include mobile {
|
||||
font-size: 1rem;
|
||||
width: content;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--header-size));
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat no-repeat;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: calc(100vh - var(--header-size));
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
background: var(--background-40);
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 500;
|
||||
padding: 0 1rem;
|
||||
color: var(--text-color);
|
||||
position: relative;
|
||||
background-color: var(--background-90);
|
||||
|
||||
@include tablet-min {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,366 +0,0 @@
|
||||
<template>
|
||||
<div class="wrapper" v-if="plexId">
|
||||
<h1>Your watch activity</h1>
|
||||
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<label class="filter">
|
||||
<span>Days:</span>
|
||||
<input
|
||||
class="dayinput"
|
||||
v-model="days"
|
||||
placeholder="number of days"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
:style="{ maxWidth: `${3 + 0.5 * days.length}rem` }"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="filter">
|
||||
<span>Data sorted by:</span>
|
||||
<toggle-button
|
||||
class="filter-item"
|
||||
:options="chartTypes"
|
||||
:selected.sync="selectedChartDataType"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="chart-section">
|
||||
<h3 class="chart-header">Activity per day:</h3>
|
||||
<div class="chart">
|
||||
<canvas ref="activityCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<h3 class="chart-header">Activity per day of week:</h3>
|
||||
<div class="chart">
|
||||
<canvas ref="playsByDayOfWeekCanvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Must be authenticated</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import ToggleButton from "@/components/ui/ToggleButton";
|
||||
import { fetchChart } from "@/api";
|
||||
|
||||
var Chart = require("chart.js");
|
||||
Chart.defaults.global.elements.point.radius = 0;
|
||||
Chart.defaults.global.elements.point.hitRadius = 10;
|
||||
Chart.defaults.global.elements.point.pointHoverRadius = 10;
|
||||
Chart.defaults.global.elements.point.hoverBorderWidth = 4;
|
||||
|
||||
export default {
|
||||
components: { ToggleButton },
|
||||
data() {
|
||||
return {
|
||||
days: 30,
|
||||
selectedChartDataType: "plays",
|
||||
charts: [
|
||||
{
|
||||
name: "Watch activity",
|
||||
ref: "activityCanvas",
|
||||
data: null,
|
||||
urlPath: "/plays_by_day",
|
||||
graphType: "line"
|
||||
},
|
||||
{
|
||||
name: "Plays by day of week",
|
||||
ref: "playsByDayOfWeekCanvas",
|
||||
data: null,
|
||||
urlPath: "/plays_by_dayofweek",
|
||||
graphType: "bar"
|
||||
}
|
||||
],
|
||||
chartData: [
|
||||
{
|
||||
type: "plays",
|
||||
tooltipLabel: "Play count"
|
||||
},
|
||||
{
|
||||
type: "duration",
|
||||
tooltipLabel: "Watched duration",
|
||||
valueConvertFunction: this.convertSecondsToHumanReadable
|
||||
}
|
||||
],
|
||||
gridColor: getComputedStyle(document.documentElement).getPropertyValue(
|
||||
"--text-color-5"
|
||||
)
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", ["plexId"]),
|
||||
chartTypes() {
|
||||
return this.chartData.map(chart => chart.type);
|
||||
},
|
||||
selectedChartType() {
|
||||
return this.chartData.filter(
|
||||
data => data.type == this.selectedChartDataType
|
||||
)[0];
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
days(newValue) {
|
||||
if (newValue !== "") {
|
||||
this.fetchChartData(this.charts);
|
||||
}
|
||||
},
|
||||
selectedChartDataType(selectedChartDataType) {
|
||||
this.fetchChartData(this.charts);
|
||||
},
|
||||
plexId(newValue) {
|
||||
if (newValue) return this.fetchChartData(this.charts);
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
if (typeof this.days == "number") {
|
||||
this.days = this.days.toString();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchChartData(charts) {
|
||||
if (!this.plexId) {
|
||||
console.log("NF plexID:", this.plexId);
|
||||
return;
|
||||
}
|
||||
|
||||
for (let chart of charts) {
|
||||
fetchChart(chart.urlPath, this.days, this.selectedChartType.type).then(
|
||||
data => {
|
||||
this.series = data.data.series.filter(
|
||||
group => group.name === "TV"
|
||||
)[0].data; // plays pr date in groups (movie/tv/music)
|
||||
this.categories = data.data.categories; // dates
|
||||
|
||||
const x_labels = data.data.categories.map(date => {
|
||||
if (date.match(/[0-9]{4}-[0-9]{2}-[0-9]{2}/)) {
|
||||
const [year, month, day] = date.split("-");
|
||||
return `${day}.${month}`;
|
||||
}
|
||||
|
||||
return date;
|
||||
});
|
||||
let y_activityMovies = data.data.series.filter(
|
||||
group => group.name === "Movies"
|
||||
)[0].data;
|
||||
let y_activityTV = data.data.series.filter(
|
||||
group => group.name === "TV"
|
||||
)[0].data;
|
||||
|
||||
const datasets = [
|
||||
{
|
||||
label: `Movies watch last ${this.days} days`,
|
||||
data: y_activityMovies,
|
||||
backgroundColor: "rgba(54, 162, 235, 0.2)",
|
||||
borderColor: "rgba(54, 162, 235, 1)",
|
||||
borderWidth: 1
|
||||
},
|
||||
{
|
||||
label: `Shows watch last ${this.days} days`,
|
||||
data: y_activityTV,
|
||||
backgroundColor: "rgba(255, 159, 64, 0.2)",
|
||||
borderColor: "rgba(255, 159, 64, 1)",
|
||||
borderWidth: 1
|
||||
}
|
||||
];
|
||||
|
||||
if (chart.data == null) {
|
||||
this.generateChart(chart, x_labels, datasets);
|
||||
} else {
|
||||
chart.data.clear();
|
||||
chart.data.data.labels = x_labels;
|
||||
chart.data.data.datasets = datasets;
|
||||
chart.data.update();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
generateChart(chart, labels, datasets) {
|
||||
const chartInstance = new Chart(this.$refs[chart.ref], {
|
||||
type: chart.graphType,
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: datasets
|
||||
},
|
||||
options: {
|
||||
// hitRadius: 8,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
title: (tooltipItem, data) =>
|
||||
`Watch date: ${tooltipItem[0].label}`,
|
||||
label: (tooltipItem, data) => {
|
||||
let label = data.datasets[tooltipItem.datasetIndex].label;
|
||||
let value = tooltipItem.value;
|
||||
let text = "Duration watched";
|
||||
|
||||
const context = label.split(" ")[0];
|
||||
if (context) {
|
||||
text = `${context} ${this.selectedChartType.tooltipLabel.toLowerCase()}`;
|
||||
}
|
||||
|
||||
if (this.selectedChartType.valueConvertFunction) {
|
||||
value = this.selectedChartType.valueConvertFunction(
|
||||
tooltipItem.value
|
||||
);
|
||||
}
|
||||
|
||||
return ` ${text}: ${value}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
color: this.gridColor
|
||||
},
|
||||
stacked: chart.graphType === "bar",
|
||||
ticks: {
|
||||
// suggestedMax: 10000,
|
||||
callback: (value, index, values) => {
|
||||
if (this.selectedChartType.valueConvertFunction) {
|
||||
return this.selectedChartType.valueConvertFunction(
|
||||
value,
|
||||
values
|
||||
);
|
||||
}
|
||||
return value;
|
||||
},
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
stacked: chart.graphType === "bar",
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
chart.data = chartInstance;
|
||||
},
|
||||
convertSecondsToHumanReadable(value, values = null) {
|
||||
const highestValue = values ? values[0] : value;
|
||||
|
||||
// minutes
|
||||
if (highestValue < 3600) {
|
||||
const minutes = Math.floor(value / 60);
|
||||
|
||||
value = `${minutes} m`;
|
||||
}
|
||||
// hours and minutes
|
||||
else if (highestValue > 3600 && highestValue < 86400) {
|
||||
const hours = Math.floor(value / 3600);
|
||||
const minutes = Math.floor((value % 3600) / 60);
|
||||
|
||||
value = hours != 0 ? `${hours} h ${minutes} m` : `${minutes} m`;
|
||||
}
|
||||
// days and hours
|
||||
else if (highestValue > 86400 && highestValue < 31557600) {
|
||||
const days = Math.floor(value / 86400);
|
||||
const hours = Math.floor((value % 86400) / 3600);
|
||||
|
||||
value = days != 0 ? `${days} d ${hours} h` : `${hours} h`;
|
||||
}
|
||||
// years and days
|
||||
else if (highestValue > 31557600) {
|
||||
const years = Math.floor(value / 31557600);
|
||||
const days = Math.floor((value % 31557600) / 86400);
|
||||
|
||||
value = years != 0 ? `${years} y ${days} d` : `${days} d`;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/scss/variables";
|
||||
|
||||
.wrapper {
|
||||
padding: 2rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.filter {
|
||||
margin-top: 0.5rem;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.2rem;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
font-size: inherit;
|
||||
max-width: 3rem;
|
||||
background-color: $background-ui;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
margin: 0.5rem 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
// .filter {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// margin-bottom: 2rem;
|
||||
|
||||
// h2 {
|
||||
// margin-bottom: 0.5rem;
|
||||
// width: 100%;
|
||||
// font-weight: 400;
|
||||
// }
|
||||
|
||||
// &-item:not(:first-of-type) {
|
||||
// margin-left: 1rem;
|
||||
// }
|
||||
|
||||
// .dayinput {
|
||||
// font-size: 1.2rem;
|
||||
// max-width: 3rem;
|
||||
// background-color: $background-ui;
|
||||
// color: $text-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
.chart-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.chart {
|
||||
position: relative;
|
||||
height: 35vh;
|
||||
width: 90vw;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="cast">
|
||||
<ol class="persons">
|
||||
<CastPerson v-for="person in cast" :person="person" :key="person.id" />
|
||||
<CastListItem v-for="person in cast" :person="person" :key="person.id" />
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CastPerson from "src/components/CastPerson";
|
||||
import CastListItem from "src/components/CastListItem";
|
||||
|
||||
export default {
|
||||
name: "Cast",
|
||||
components: { CastPerson },
|
||||
name: "CastList",
|
||||
components: { CastListItem },
|
||||
props: {
|
||||
cast: {
|
||||
type: Array,
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<li class="card">
|
||||
<a @click="openPerson">
|
||||
<a @click="openCastItem">
|
||||
<img class="persons--image" :src="pictureUrl" />
|
||||
<p class="name">{{ person.name || person.title }}</p>
|
||||
<p class="meta">{{ person.character || person.year }}</p>
|
||||
@@ -12,7 +12,7 @@
|
||||
import { mapActions } from "vuex";
|
||||
|
||||
export default {
|
||||
name: "Person",
|
||||
name: "CastListItem",
|
||||
props: {
|
||||
person: {
|
||||
type: Object,
|
||||
@@ -21,7 +21,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions("popup", ["open"]),
|
||||
openPerson() {
|
||||
openCastItem() {
|
||||
let { id, type } = this.person;
|
||||
|
||||
if (type) {
|
||||
@@ -1,47 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<LandingBanner />
|
||||
|
||||
<div v-for="list in lists" :key="list.name">
|
||||
<ResultsSection
|
||||
:apiFunction="list.apiFunction"
|
||||
:title="list.title"
|
||||
:shortList="true"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LandingBanner from "@/components/LandingBanner";
|
||||
import ResultsSection from "@/components/ResultsSection";
|
||||
import { getRequests, getTmdbMovieListByName } from "@/api";
|
||||
|
||||
export default {
|
||||
name: "home",
|
||||
components: { LandingBanner, ResultsSection },
|
||||
data() {
|
||||
return {
|
||||
imageFile: "/pulp-fiction.jpg",
|
||||
lists: [
|
||||
{
|
||||
title: "Requests",
|
||||
apiFunction: getRequests
|
||||
},
|
||||
{
|
||||
title: "Now playing",
|
||||
apiFunction: () => getTmdbMovieListByName("now_playing")
|
||||
},
|
||||
{
|
||||
title: "Upcoming",
|
||||
apiFunction: () => getTmdbMovieListByName("upcoming")
|
||||
},
|
||||
{
|
||||
title: "Popular",
|
||||
apiFunction: () => getTmdbMovieListByName("popular")
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<ResultsSection :title="listName" :apiFunction="getTmdbMovieListByName" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultsSection from "./ResultsSection";
|
||||
import { getTmdbMovieListByName } from "@/api";
|
||||
|
||||
export default {
|
||||
components: { ResultsSection },
|
||||
computed: {
|
||||
listName() {
|
||||
return this.$route.params.name;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getTmdbMovieListByName(page) {
|
||||
return getTmdbMovieListByName(this.listName, page);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullwidth-button {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<section class="profile">
|
||||
<div class="profile__content" v-if="loggedIn">
|
||||
<header class="profile__header">
|
||||
<h2 class="profile__title">{{ emoji }} Welcome {{ username }}</h2>
|
||||
|
||||
<div class="button--group">
|
||||
<seasoned-button @click="toggleSettings">{{
|
||||
showSettings ? "hide settings" : "show settings"
|
||||
}}</seasoned-button>
|
||||
<seasoned-button @click="toggleActivity">{{
|
||||
showActivity ? "hide activity" : "show activity"
|
||||
}}</seasoned-button>
|
||||
|
||||
<seasoned-button @click="_logout">Log out</seasoned-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<settings v-if="showSettings" />
|
||||
|
||||
<activity v-if="showActivity" />
|
||||
|
||||
<list-header title="User requests" :info="resultCount" />
|
||||
<results-list v-if="results" :results="results" />
|
||||
</div>
|
||||
|
||||
<section class="not-found" v-if="!loggedIn">
|
||||
<div class="not-found__content">
|
||||
<h2 class="not-found__title">Authentication Request Failed</h2>
|
||||
<router-link :to="{ name: 'signin' }" exact title="Sign in here">
|
||||
<button class="not-found__button button">Sign In</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
import ListHeader from "@/components/ListHeader";
|
||||
import ResultsList from "@/components/ResultsList";
|
||||
import Settings from "@/components/Settings";
|
||||
import Activity from "@/components/ActivityPage";
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton";
|
||||
|
||||
import { getEmoji, getUserRequests, getSettings, logout } from "@/api";
|
||||
|
||||
export default {
|
||||
components: { ListHeader, ResultsList, Settings, Activity, SeasonedButton },
|
||||
data() {
|
||||
return {
|
||||
emoji: "",
|
||||
results: undefined,
|
||||
totalResults: undefined,
|
||||
showSettings: false,
|
||||
showActivity: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", ["loggedIn", "username", "settings"]),
|
||||
resultCount() {
|
||||
if (this.results === undefined) return;
|
||||
|
||||
const loadedResults = this.results.length;
|
||||
const totalResults = this.totalResults < 10000 ? this.totalResults : "∞";
|
||||
return `${loadedResults} of ${totalResults} results`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", ["logout", "setSettings"]),
|
||||
toggleSettings() {
|
||||
this.showSettings = this.showSettings ? false : true;
|
||||
|
||||
this.updateQueryParams("settings", this.showSettings);
|
||||
},
|
||||
updateQueryParams(key, value = false) {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
if (params.has(key)) {
|
||||
params.delete(key);
|
||||
}
|
||||
|
||||
if (value) {
|
||||
params.append(key, value);
|
||||
}
|
||||
|
||||
window.history.replaceState(
|
||||
{},
|
||||
"search",
|
||||
`${window.location.protocol}//${window.location.hostname}${
|
||||
window.location.port ? `:${window.location.port}` : ""
|
||||
}${window.location.pathname}${
|
||||
params.toString().length ? `?${params}` : ""
|
||||
}`
|
||||
);
|
||||
},
|
||||
toggleActivity() {
|
||||
this.showActivity = this.showActivity == true ? false : true;
|
||||
this.updateQueryParams("activity", this.showActivity);
|
||||
},
|
||||
_logout() {
|
||||
logout().then(() => {
|
||||
this.logout();
|
||||
this.$router.push("home");
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.settings) {
|
||||
getSettings().then(resp => {
|
||||
const { settings } = resp;
|
||||
if (settings) this.setSettings(settings);
|
||||
});
|
||||
}
|
||||
|
||||
if (this.loggedIn) {
|
||||
this.showSettings = window.location.toString().includes("settings=true");
|
||||
this.showActivity = window.location.toString().includes("activity=true");
|
||||
|
||||
getUserRequests().then(results => {
|
||||
this.results = results.results;
|
||||
this.totalResults = results.total_results;
|
||||
});
|
||||
|
||||
getEmoji().then(resp => {
|
||||
const { emoji } = resp;
|
||||
this.emoji = emoji;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/scss/variables";
|
||||
@import "src/scss/media-queries";
|
||||
|
||||
.button--group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// DUPLICATE CODE
|
||||
.profile {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid $text-color-5;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
.button--group {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet-min {
|
||||
padding: 29px 30px;
|
||||
}
|
||||
@include tablet-landscape-min {
|
||||
padding: 29px 50px;
|
||||
}
|
||||
@include desktop-min {
|
||||
padding: 29px 60px;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
@include tablet-min {
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Register new user</h1>
|
||||
|
||||
<div class="form">
|
||||
<seasoned-input
|
||||
ref="username"
|
||||
placeholder="username"
|
||||
icon="Email"
|
||||
type="email"
|
||||
:value.sync="username"
|
||||
@enter="submit"
|
||||
/>
|
||||
|
||||
<seasoned-input
|
||||
placeholder="password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
:value.sync="password"
|
||||
@enter="submit"
|
||||
/>
|
||||
<seasoned-input
|
||||
placeholder="repeat password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
:value.sync="passwordRepeat"
|
||||
@enter="submit"
|
||||
/>
|
||||
|
||||
<seasoned-button @click="submit">Register</seasoned-button>
|
||||
</div>
|
||||
|
||||
<router-link class="link" to="/signin"
|
||||
>Have a user? Sign in here</router-link
|
||||
>
|
||||
|
||||
<seasoned-messages :messages.sync="messages"></seasoned-messages>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
import { register } from "@/api";
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton";
|
||||
import SeasonedInput from "@/components/ui/SeasonedInput";
|
||||
import SeasonedMessages from "@/components/ui/SeasonedMessages";
|
||||
|
||||
export default {
|
||||
components: { SeasonedButton, SeasonedInput, SeasonedMessages },
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
username: null,
|
||||
password: null,
|
||||
passwordRepeat: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", ["login"]),
|
||||
submit() {
|
||||
this.messages = [];
|
||||
let { username, password, passwordRepeat } = this;
|
||||
|
||||
if (username == null || username.length == 0) {
|
||||
this.messages.push({ type: "error", title: "Missing username" });
|
||||
return;
|
||||
} else if (password == null || password.length == 0) {
|
||||
this.messages.push({ type: "error", title: "Missing password" });
|
||||
return;
|
||||
} else if (passwordRepeat == null || passwordRepeat.length == 0) {
|
||||
this.messages.push({ type: "error", title: "Missing repeat password" });
|
||||
return;
|
||||
} else if (passwordRepeat != password) {
|
||||
this.messages.push({ type: "error", title: "Passwords do not match" });
|
||||
return;
|
||||
}
|
||||
|
||||
this.registerUser(username, password);
|
||||
},
|
||||
registerUser(username, password) {
|
||||
register(username, password)
|
||||
.then(data => {
|
||||
if (data.success && this.login()) {
|
||||
eventHub.$emit("setUserStatus");
|
||||
this.$router.push({ name: "profile" });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.status === 401) {
|
||||
this.messages.push({
|
||||
type: "error",
|
||||
title: "Access denied",
|
||||
message: "Incorrect username or password"
|
||||
});
|
||||
} else {
|
||||
this.messages.push({
|
||||
type: "error",
|
||||
title: "Unexpected error",
|
||||
message: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
try {
|
||||
this.$refs.username.$el.getElementsByTagName("input")[0].focus();
|
||||
} catch {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/scss/variables";
|
||||
|
||||
section {
|
||||
padding: 1.3rem;
|
||||
|
||||
@include tablet-min {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.form > div,
|
||||
input,
|
||||
button {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
width: max-content;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<ResultsSection title="Requests" :apiFunction="getRequests" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ResultsSection from "./ResultsSection";
|
||||
import { getRequests } from "@/api";
|
||||
|
||||
export default {
|
||||
components: { ResultsSection },
|
||||
methods: {
|
||||
getRequests: getRequests
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fullwidth-button {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
padding-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex; flex-direction: row">
|
||||
<label class="filter">
|
||||
<span>Search filter:</span>
|
||||
|
||||
<toggle-button
|
||||
:options="['All', 'movie', 'show', 'person']"
|
||||
:selected="mediaType"
|
||||
@change="toggleChanged"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ResultsSection :title="title" :apiFunction="searchTmdb" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { searchTmdb } from "@/api";
|
||||
|
||||
import ResultsSection from "./ResultsSection";
|
||||
import ListHeader from "@/components/ListHeader";
|
||||
import ToggleButton from "@/components/ui/ToggleButton";
|
||||
|
||||
export default {
|
||||
components: { ResultsSection, ListHeader, ToggleButton },
|
||||
data() {
|
||||
return {
|
||||
query: "",
|
||||
page: 1,
|
||||
adult: false,
|
||||
mediaType: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return `Search results: ${this.query}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
searchTmdb(page = this.page) {
|
||||
if (this.query && this.query.length)
|
||||
return searchTmdb(this.query, page, this.adult, this.mediaType);
|
||||
},
|
||||
toggleChanged(value) {
|
||||
if (["movie", "show", "person"].includes(value.toLowerCase())) {
|
||||
this.mediaType = value.toLowerCase();
|
||||
} else {
|
||||
this.mediaType = null;
|
||||
}
|
||||
this.updateQueryParams();
|
||||
},
|
||||
updateQueryParams() {
|
||||
const { query, page, adult, media_type } = this.$route.query;
|
||||
|
||||
this.$router.push({
|
||||
path: "search",
|
||||
query: {
|
||||
...this.$route.query,
|
||||
media_type: this.mediaType
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const { query, page, adult, media_type } = this.$route.query;
|
||||
|
||||
if (!query) {
|
||||
// abort
|
||||
console.error("abort, no query");
|
||||
}
|
||||
this.query = decodeURIComponent(query);
|
||||
this.page = page || 1;
|
||||
this.adult = adult || this.adult;
|
||||
this.mediaType = media_type || this.mediaType;
|
||||
|
||||
// this.searchTmdb();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 1.25rem;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1;
|
||||
margin: 0.5rem 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,228 +0,0 @@
|
||||
<template>
|
||||
<section class="profile">
|
||||
<div class="profile__content" v-if="loggedIn">
|
||||
<section class="settings">
|
||||
<h3 class="settings__header">Plex account</h3>
|
||||
|
||||
<div v-if="!plexId">
|
||||
<span class="settings__info"
|
||||
>Sign in to your plex account to get information about recently
|
||||
added movies and to see your watch history</span
|
||||
>
|
||||
|
||||
<form class="form">
|
||||
<seasoned-input
|
||||
placeholder="plex username"
|
||||
type="email"
|
||||
:value.sync="plexUsername"
|
||||
/>
|
||||
<seasoned-input
|
||||
placeholder="plex password"
|
||||
type="password"
|
||||
:value.sync="plexPassword"
|
||||
@enter="authenticatePlex"
|
||||
>
|
||||
</seasoned-input>
|
||||
|
||||
<seasoned-button @click="authenticatePlex"
|
||||
>link plex account</seasoned-button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span class="settings__info"
|
||||
>Awesome, your account is already authenticated with plex! Enjoy
|
||||
viewing your seasoned search history, plex watch history and
|
||||
real-time torrent download progress.</span
|
||||
>
|
||||
<seasoned-button @click="unauthenticatePlex"
|
||||
>un-link plex account</seasoned-button
|
||||
>
|
||||
</div>
|
||||
<seasoned-messages :messages.sync="messages" />
|
||||
|
||||
<hr class="setting__divider" />
|
||||
|
||||
<h3 class="settings__header">Change password</h3>
|
||||
<form class="form">
|
||||
<seasoned-input
|
||||
placeholder="new password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
:value.sync="newPassword"
|
||||
/>
|
||||
|
||||
<seasoned-input
|
||||
placeholder="repeat new password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
:value.sync="newPasswordRepeat"
|
||||
/>
|
||||
|
||||
<seasoned-button @click="changePassword"
|
||||
>change password</seasoned-button
|
||||
>
|
||||
</form>
|
||||
|
||||
<hr class="setting__divider" />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="not-found" v-else>
|
||||
<div class="not-found__content">
|
||||
<h2 class="not-found__title">Authentication Request Failed</h2>
|
||||
<router-link :to="{ name: 'signin' }" exact title="Sign in here">
|
||||
<button class="not-found__button button">Sign In</button>
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from "vuex";
|
||||
import storage from "@/storage";
|
||||
import SeasonedInput from "@/components/ui/SeasonedInput";
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton";
|
||||
import SeasonedMessages from "@/components/ui/SeasonedMessages";
|
||||
|
||||
import { linkPlexAccount, unlinkPlexAccount, getSettings } from "@/api";
|
||||
|
||||
export default {
|
||||
components: { SeasonedInput, SeasonedButton, SeasonedMessages },
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
plexUsername: null,
|
||||
plexPassword: null,
|
||||
newPassword: null,
|
||||
newPasswordRepeat: null,
|
||||
emoji: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters("user", ["loggedIn", "plexId", "settings"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", ["setSettings"]),
|
||||
changePassword() {
|
||||
return;
|
||||
},
|
||||
created() {
|
||||
if (!this.settings) this.reloadSettings();
|
||||
},
|
||||
reloadSettings() {
|
||||
return getSettings().then(response => {
|
||||
const { settings } = response;
|
||||
if (settings) this.setSettings(settings);
|
||||
});
|
||||
},
|
||||
async authenticatePlex() {
|
||||
let username = this.plexUsername;
|
||||
let password = this.plexPassword;
|
||||
|
||||
const { success, message } = await linkPlexAccount(username, password);
|
||||
|
||||
if (success) {
|
||||
this.reloadSettings();
|
||||
this.plexUsername = "";
|
||||
this.plexPassword = "";
|
||||
}
|
||||
|
||||
this.messages.push({
|
||||
type: success ? "success" : "error",
|
||||
title: success ? "Authenticated with plex" : "Something went wrong",
|
||||
message: message
|
||||
});
|
||||
},
|
||||
async unauthenticatePlex() {
|
||||
const response = await unlinkPlexAccount();
|
||||
|
||||
if (response.success) this.reloadSettings();
|
||||
|
||||
this.messages.push({
|
||||
type: response.success ? "success" : "error",
|
||||
title: response.success
|
||||
? "Unlinked plex account "
|
||||
: "Something went wrong",
|
||||
message: response.message
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/scss/variables";
|
||||
@import "src/scss/media-queries";
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// DUPLICATE CODE
|
||||
.form {
|
||||
> div,
|
||||
input,
|
||||
button {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&__group {
|
||||
justify-content: unset;
|
||||
&__input-icon {
|
||||
margin-top: 8px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
}
|
||||
&-input {
|
||||
padding: 10px 5px 10px 45px;
|
||||
height: 40px;
|
||||
font-size: 17px;
|
||||
width: 75%;
|
||||
@include desktop-min {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.settings {
|
||||
padding: 3rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&__header {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&__info {
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid $text-color-50;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 70px;
|
||||
margin-left: 20px;
|
||||
width: 96%;
|
||||
text-align: left;
|
||||
}
|
||||
span {
|
||||
font-weight: 200;
|
||||
size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,138 +0,0 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Sign in</h1>
|
||||
|
||||
<div class="form">
|
||||
<seasoned-input
|
||||
ref="username"
|
||||
placeholder="username"
|
||||
icon="Email"
|
||||
type="email"
|
||||
@enter="submit"
|
||||
:value.sync="username"
|
||||
/>
|
||||
<seasoned-input
|
||||
placeholder="password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
:value.sync="password"
|
||||
@enter="submit"
|
||||
/>
|
||||
|
||||
<seasoned-button @click="submit">sign in</seasoned-button>
|
||||
</div>
|
||||
<router-link class="link" to="/register"
|
||||
>Don't have a user? Register here</router-link
|
||||
>
|
||||
|
||||
<seasoned-messages :messages.sync="messages"></seasoned-messages>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
import { login } from "@/api";
|
||||
import storage from "../storage";
|
||||
import SeasonedInput from "@/components/ui/SeasonedInput";
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton";
|
||||
import SeasonedMessages from "@/components/ui/SeasonedMessages";
|
||||
|
||||
export default {
|
||||
components: { SeasonedInput, SeasonedButton, SeasonedMessages },
|
||||
data() {
|
||||
return {
|
||||
messages: [],
|
||||
username: null,
|
||||
password: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapActions("user", ["login"]),
|
||||
submit() {
|
||||
this.messages = [];
|
||||
let { username, password } = this;
|
||||
|
||||
if (!username || username.length == 0) {
|
||||
this.messages.push({ type: "error", title: "Missing username" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password || password.length == 0) {
|
||||
this.messages.push({ type: "error", title: "Missing password" });
|
||||
return;
|
||||
}
|
||||
|
||||
this.signin(username, password);
|
||||
},
|
||||
signin(username, password) {
|
||||
login(username, password, true)
|
||||
.then(data => {
|
||||
if (data.success && this.login()) {
|
||||
this.$router.push({ name: "profile" });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.status === 401) {
|
||||
this.messages.push({
|
||||
type: "error",
|
||||
title: "Access denied",
|
||||
message: "Incorrect username or password"
|
||||
});
|
||||
} else {
|
||||
this.messages.push({
|
||||
type: "error",
|
||||
title: "Unexpected error",
|
||||
message: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
document.title = "Sign in" + storage.pageTitlePostfix;
|
||||
storage.backTitle = document.title;
|
||||
},
|
||||
mounted() {
|
||||
try {
|
||||
this.$refs.username.$el.getElementsByTagName("input")[0].focus();
|
||||
} catch {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "src/scss/variables";
|
||||
|
||||
section {
|
||||
padding: 1.3rem;
|
||||
|
||||
@include tablet-min {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
.form > div,
|
||||
input,
|
||||
button {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
width: max-content;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -142,7 +142,7 @@
|
||||
v-if="showCast && credits && credits.cast && credits.cast.length"
|
||||
>
|
||||
<MovieDetail title="cast">
|
||||
<Cast :cast="credits.cast" />
|
||||
<CastList :cast="credits.cast" />
|
||||
</MovieDetail>
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,21 +162,21 @@
|
||||
<script>
|
||||
import { mapGetters } from "vuex";
|
||||
import img from "@/directives/v-image";
|
||||
import IconProfile from "../icons/IconProfile";
|
||||
import IconThumbsUp from "../icons/IconThumbsUp";
|
||||
import IconThumbsDown from "../icons/IconThumbsDown";
|
||||
import IconInfo from "../icons/IconInfo";
|
||||
import IconRequest from "../icons/IconRequest";
|
||||
import IconRequested from "../icons/IconRequested";
|
||||
import IconBinoculars from "../icons/IconBinoculars";
|
||||
import IconPlay from "../icons/IconPlay";
|
||||
import TorrentList from "./TorrentList";
|
||||
import Cast from "./Cast";
|
||||
import MovieDetail from "./ui/MovieDetail";
|
||||
import SidebarListElement from "./ui/sidebarListElem";
|
||||
import MovieDescription from "./ui/MovieDescription";
|
||||
import IconProfile from "@/icons/IconProfile";
|
||||
import IconThumbsUp from "@/icons/IconThumbsUp";
|
||||
import IconThumbsDown from "@/icons/IconThumbsDown";
|
||||
import IconInfo from "@/icons/IconInfo";
|
||||
import IconRequest from "@/icons/IconRequest";
|
||||
import IconRequested from "@/icons/IconRequested";
|
||||
import IconBinoculars from "@/icons/IconBinoculars";
|
||||
import IconPlay from "@/icons/IconPlay";
|
||||
import TorrentList from "@/components/TorrentList";
|
||||
import CastList from "@/components/CastList";
|
||||
import MovieDetail from "@/components/movie/Detail";
|
||||
import MovieDescription from "@/components/movie/Description";
|
||||
import SidebarListElement from "@/components/ui/sidebarListElem";
|
||||
import store from "@/store";
|
||||
import LoadingPlaceholder from "./ui/LoadingPlaceholder";
|
||||
import LoadingPlaceholder from "@/components/ui/LoadingPlaceholder";
|
||||
|
||||
import {
|
||||
getMovie,
|
||||
@@ -212,7 +212,7 @@ export default {
|
||||
IconBinoculars,
|
||||
IconPlay,
|
||||
TorrentList,
|
||||
Cast,
|
||||
CastList,
|
||||
LoadingPlaceholder,
|
||||
SidebarListElement
|
||||
},
|
||||
Reference in New Issue
Block a user