aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/services')
-rw-r--r--src/components/services/Tautulli.vue92
1 files changed, 92 insertions, 0 deletions
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>