diff options
author | Evan Steinkerchner <esteinkerchner@gmail.com> | 2022-04-19 20:18:39 -0400 |
---|---|---|
committer | Evan Steinkerchner <esteinkerchner@gmail.com> | 2022-04-19 20:18:39 -0400 |
commit | 33f75a798a204e2e7fbecb42571ed007092718c2 (patch) | |
tree | af016abba286ca1a0b3fb90aaaf349df0a04c24b /src/components/services/Emby.vue | |
parent | a2dfffab6892c6976fc8b880f75c314506259675 (diff) | |
parent | 9c370d3c5e25d1a5e3e04f6e146e35883e4ac2e3 (diff) | |
download | homer-33f75a798a204e2e7fbecb42571ed007092718c2.tar.gz homer-33f75a798a204e2e7fbecb42571ed007092718c2.tar.zst homer-33f75a798a204e2e7fbecb42571ed007092718c2.zip |
Merge branch 'main' into proxy-api
Diffstat (limited to 'src/components/services/Emby.vue')
-rw-r--r-- | src/components/services/Emby.vue | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue new file mode 100644 index 0000000..25a2612 --- /dev/null +++ b/src/components/services/Emby.vue | |||
@@ -0,0 +1,118 @@ | |||
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> | ||
10 | {{ embyCount }} | ||
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 () { | ||
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 💀`; | ||
52 | }, | ||
53 | }, | ||
54 | created() { | ||
55 | this.fetchServerStatus(); | ||
56 | |||
57 | if (!this.item.subtitle && this.status !== "dead") | ||
58 | this.fetchServerMediaStats(); | ||
59 | }, | ||
60 | methods: { | ||
61 | fetchServerStatus: async function () { | ||
62 | this.fetch("/System/info/public") | ||
63 | .then((response) => { | ||
64 | if (response.Id) this.status = "running"; | ||
65 | else throw new Error(); | ||
66 | }) | ||
67 | .catch((e) => { | ||
68 | console.log(e); | ||
69 | this.status = "dead"; | ||
70 | }); | ||
71 | }, | ||
72 | fetchServerMediaStats: async function () { | ||
73 | const headers = { | ||
74 | "X-Emby-Token": this.item.apikey, | ||
75 | }; | ||
76 | |||
77 | var data = await this.fetch("/items/counts", { headers }).catch((e) => { | ||
78 | console.log(e); | ||
79 | }); | ||
80 | |||
81 | this.albumCount = data.AlbumCount; | ||
82 | this.songCount = data.SongCount; | ||
83 | this.movieCount = data.MovieCount; | ||
84 | this.seriesCount = data.SeriesCount; | ||
85 | this.episodeCount = data.EpisodeCount; | ||
86 | }, | ||
87 | }, | ||
88 | }; | ||
89 | </script> | ||
90 | |||
91 | <style scoped lang="scss"> | ||
92 | .status { | ||
93 | font-size: 0.8rem; | ||
94 | color: var(--text-title); | ||
95 | |||
96 | &.running:before { | ||
97 | background-color: #94e185; | ||
98 | border-color: #78d965; | ||
99 | box-shadow: 0 0 5px 1px #94e185; | ||
100 | } | ||
101 | |||
102 | &.dead:before { | ||
103 | background-color: #c9404d; | ||
104 | border-color: #c42c3b; | ||
105 | box-shadow: 0 0 5px 1px #c9404d; | ||
106 | } | ||
107 | |||
108 | &:before { | ||
109 | content: " "; | ||
110 | display: inline-block; | ||
111 | width: 7px; | ||
112 | height: 7px; | ||
113 | margin-right: 10px; | ||
114 | border: 1px solid #000; | ||
115 | border-radius: 7px; | ||
116 | } | ||
117 | } | ||
118 | </style> | ||