]>
Commit | Line | Data |
---|---|---|
58584439 | 1 | <template> |
2 | <Generic :item="item"> | |
3 | <template #content> | |
4 | <p class="title is-4">{{ item.name }}</p> | |
5 | <p class="subtitle is-6"> | |
6 | <template v-if="item.subtitle"> | |
7 | {{ item.subtitle }} | |
8 | </template> | |
9 | <template v-else> | |
abfe72b9 | 10 | {{ embyCount }} |
58584439 | 11 | </template> |
12 | </p> | |
13 | </template> | |
14 | <template #indicator> | |
15 | <div v-if="status" class="status" :class="status"> | |
16 | {{ status }} | |
17 | </div> | |
18 | </template> | |
19 | </Generic> | |
20 | </template> | |
21 | ||
22 | <script> | |
23 | import service from "@/mixins/service.js"; | |
24 | import Generic from "./Generic.vue"; | |
25 | ||
26 | export default { | |
27 | name: "Emby", | |
28 | mixins: [service], | |
29 | props: { | |
30 | item: Object, | |
31 | }, | |
32 | components: { | |
33 | Generic, | |
34 | }, | |
35 | data: () => ({ | |
36 | status: "", | |
37 | albumCount: 0, | |
38 | songCount: 0, | |
39 | movieCount: 0, | |
40 | seriesCount: 0, | |
41 | episodeCount: 0, | |
42 | }), | |
43 | computed: { | |
44 | embyCount: function () { | |
abfe72b9 | 45 | if (this.item.libraryType === "music") |
46 | return `${this.songCount} songs, ${this.albumCount} albums`; | |
47 | else if (this.item.libraryType === "movies") | |
48 | return `${this.movieCount} movies`; | |
49 | else if (this.item.libraryType === "series") | |
50 | return `${this.episodeCount} eps, ${this.seriesCount} series`; | |
51 | else return `wrong library type 💀`; | |
58584439 | 52 | }, |
53 | }, | |
54 | created() { | |
55 | this.fetchServerStatus(); | |
56 | ||
abfe72b9 | 57 | if (!this.item.subtitle && this.status !== "dead") |
58584439 | 58 | this.fetchServerMediaStats(); |
59 | }, | |
60 | methods: { | |
61 | fetchServerStatus: async function () { | |
62 | const headers = { | |
63 | "X-Emby-Token": this.item.apikey, | |
64 | }; | |
abfe72b9 | 65 | |
66 | await this.fetch("/System/info/public", { headers }) | |
67 | .then((response) => { | |
68 | if (response.Id) this.status = "running"; | |
69 | else this.status = "dead"; | |
70 | }) | |
71 | .catch((e) => { | |
72 | console.log(e); | |
73 | this.status = "dead"; | |
74 | }); | |
58584439 | 75 | }, |
76 | fetchServerMediaStats: async function () { | |
77 | const headers = { | |
78 | "X-Emby-Token": this.item.apikey, | |
79 | }; | |
80 | ||
abfe72b9 | 81 | var data = await this.fetch("/items/counts", { headers }).catch((e) => { |
82 | console.log(e); | |
83 | }); | |
58584439 | 84 | |
85 | this.albumCount = data.AlbumCount; | |
86 | this.songCount = data.SongCount; | |
87 | this.movieCount = data.MovieCount; | |
88 | this.seriesCount = data.SeriesCount; | |
89 | this.episodeCount = data.EpisodeCount; | |
90 | }, | |
91 | }, | |
92 | }; | |
93 | </script> | |
94 | ||
95 | <style scoped lang="scss"> | |
96 | .status { | |
97 | font-size: 0.8rem; | |
98 | color: var(--text-title); | |
99 | ||
100 | &.running:before { | |
101 | background-color: #94e185; | |
102 | border-color: #78d965; | |
103 | box-shadow: 0 0 5px 1px #94e185; | |
104 | } | |
105 | ||
106 | &.dead:before { | |
107 | background-color: #c9404d; | |
108 | border-color: #c42c3b; | |
109 | box-shadow: 0 0 5px 1px #c9404d; | |
110 | } | |
111 | ||
112 | &:before { | |
113 | content: " "; | |
114 | display: inline-block; | |
115 | width: 7px; | |
116 | height: 7px; | |
117 | margin-right: 10px; | |
118 | border: 1px solid #000; | |
119 | border-radius: 7px; | |
120 | } | |
121 | } | |
122 | </style> |