diff options
author | Evan Steinkerchner <esteinkerchner@gmail.com> | 2022-04-29 14:18:59 -0400 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-04-29 14:18:59 -0400 |
commit | e6c106eb72412fc6ad2998e1ff662f9206595ae7 (patch) | |
tree | d85bee77527cea8dd0a026515c29696ccafe428f | |
parent | 6e4410d8f144e3ab2ff22444313f2a3c3a24c29c (diff) | |
download | homer-e6c106eb72412fc6ad2998e1ff662f9206595ae7.tar.gz homer-e6c106eb72412fc6ad2998e1ff662f9206595ae7.tar.zst homer-e6c106eb72412fc6ad2998e1ff662f9206595ae7.zip |
Added Tautulli service (#439)
-rw-r--r-- | docs/customservices.md | 27 | ||||
-rw-r--r-- | src/components/services/Tautulli.vue | 92 |
2 files changed, 119 insertions, 0 deletions
diff --git a/docs/customservices.md b/docs/customservices.md index be9d6cb..d19b560 100644 --- a/docs/customservices.md +++ b/docs/customservices.md | |||
@@ -195,3 +195,30 @@ The following configuration is available for the UptimeKuma service. Needs v1.13 | |||
195 | slug: "myCustomDashboard" # Defaults to "default" if not provided. | 195 | slug: "myCustomDashboard" # Defaults to "default" if not provided. |
196 | type: "UptimeKuma" | 196 | type: "UptimeKuma" |
197 | ``` | 197 | ``` |
198 | |||
199 | ## Tautulli | ||
200 | |||
201 | The Tautulli service can allow you to show the number of currently active | ||
202 | streams on you Plex instance. An API key is required, and can be obtained from | ||
203 | the "Web Interface" section of settings on the Tautulli web UI. | ||
204 | |||
205 | ```yaml | ||
206 | - name: "Tautulli" | ||
207 | logo: "assets/tools/sample.png" | ||
208 | url: "http://192.168.0.151:8181" | ||
209 | type: "Tautulli" | ||
210 | apikey: "MY-SUPER-SECRET-API-KEY" | ||
211 | ``` | ||
212 | |||
213 | Because the service type and link don't necessarily have to match, you could | ||
214 | even make the service type Tautulli on your Plex card and provide a separate | ||
215 | endpoint pointing to Tautulli! | ||
216 | |||
217 | ```yaml | ||
218 | - name: "Plex" | ||
219 | logo: "assets/tools/sample.png" | ||
220 | url: "http://192.168.0.151:32400/web" # Plex | ||
221 | endpoint: "http://192.168.0.151:8181" # Tautulli | ||
222 | type: "Tautulli" | ||
223 | apikey: "MY-SUPER-SECRET-API-KEY" | ||
224 | ``` | ||
diff --git a/src/components/services/Tautulli.vue b/src/components/services/Tautulli.vue new file mode 100644 index 0000000..2e8f8f5 --- /dev/null +++ b/src/components/services/Tautulli.vue | |||
@@ -0,0 +1,92 @@ | |||
1 | <template> | ||
2 | <Generic :item="item"> | ||
3 | <template #indicator> | ||
4 | <div class="notifs"> | ||
5 | <strong | ||
6 | v-if="streams > 0" | ||
7 | class="notif playing" | ||
8 | :title="`${streams} active stream${streams > 1 ? 's' : ''}`" | ||
9 | > | ||
10 | {{ streams }} | ||
11 | </strong> | ||
12 | <i | ||
13 | v-if="error" | ||
14 | class="notif error fa-solid fa-triangle-exclamation" | ||
15 | title="Unable to fetch current status" | ||
16 | ></i> | ||
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: "Tautulli", | ||
28 | mixins: [service], | ||
29 | props: { | ||
30 | item: Object, | ||
31 | }, | ||
32 | components: { | ||
33 | Generic, | ||
34 | }, | ||
35 | data: () => ({ | ||
36 | stats: null, | ||
37 | error: false, | ||
38 | }), | ||
39 | computed: { | ||
40 | streams: function () { | ||
41 | if (!this.stats) { | ||
42 | return ""; | ||
43 | } | ||
44 | return this.stats.stream_count; | ||
45 | }, | ||
46 | }, | ||
47 | created() { | ||
48 | this.fetchStatus(); | ||
49 | }, | ||
50 | methods: { | ||
51 | fetchStatus: async function () { | ||
52 | try { | ||
53 | const response = await this.fetch(`/api/v2?apikey=${this.item.apikey}&cmd=get_activity`); | ||
54 | this.error = false; | ||
55 | this.stats = response.response.data; | ||
56 | } catch (e) { | ||
57 | this.error = true; | ||
58 | console.error(e); | ||
59 | } | ||
60 | } | ||
61 | }, | ||
62 | }; | ||
63 | </script> | ||
64 | |||
65 | <style scoped lang="scss"> | ||
66 | .notifs { | ||
67 | position: absolute; | ||
68 | color: white; | ||
69 | font-family: sans-serif; | ||
70 | top: 0.3em; | ||
71 | right: 0.5em; | ||
72 | |||
73 | .notif { | ||
74 | display: inline-block; | ||
75 | padding: 0.2em 0.35em; | ||
76 | border-radius: 0.25em; | ||
77 | position: relative; | ||
78 | margin-left: 0.3em; | ||
79 | font-size: 0.8em; | ||
80 | |||
81 | &.playing { | ||
82 | background-color: #28a9a3; | ||
83 | } | ||
84 | |||
85 | &.error { | ||
86 | border-radius: 50%; | ||
87 | aspect-ratio: 1; | ||
88 | background-color: #e51111; | ||
89 | } | ||
90 | } | ||
91 | } | ||
92 | </style> | ||