aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--docs/customservices.md27
-rw-r--r--src/components/services/Tautulli.vue92
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
201The Tautulli service can allow you to show the number of currently active
202streams on you Plex instance. An API key is required, and can be obtained from
203the "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
213Because the service type and link don't necessarily have to match, you could
214even make the service type Tautulli on your Plex card and provide a separate
215endpoint 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>
23import service from "@/mixins/service.js";
24import Generic from "./Generic.vue";
25
26export 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>