slug: "myCustomDashboard" # Defaults to "default" if not provided.
type: "UptimeKuma"
```
+
+## Tautulli
+
+The Tautulli service can allow you to show the number of currently active
+streams on you Plex instance. An API key is required, and can be obtained from
+the "Web Interface" section of settings on the Tautulli web UI.
+
+```yaml
+- name: "Tautulli"
+ logo: "assets/tools/sample.png"
+ url: "http://192.168.0.151:8181"
+ type: "Tautulli"
+ apikey: "MY-SUPER-SECRET-API-KEY"
+```
+
+Because the service type and link don't necessarily have to match, you could
+even make the service type Tautulli on your Plex card and provide a separate
+endpoint pointing to Tautulli!
+
+```yaml
+- name: "Plex"
+ logo: "assets/tools/sample.png"
+ url: "http://192.168.0.151:32400/web" # Plex
+ endpoint: "http://192.168.0.151:8181" # Tautulli
+ type: "Tautulli"
+ apikey: "MY-SUPER-SECRET-API-KEY"
+```
--- /dev/null
+<template>
+ <Generic :item="item">
+ <template #indicator>
+ <div class="notifs">
+ <strong
+ v-if="streams > 0"
+ class="notif playing"
+ :title="`${streams} active stream${streams > 1 ? 's' : ''}`"
+ >
+ {{ streams }}
+ </strong>
+ <i
+ v-if="error"
+ class="notif error fa-solid fa-triangle-exclamation"
+ title="Unable to fetch current status"
+ ></i>
+ </div>
+ </template>
+ </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+ name: "Tautulli",
+ mixins: [service],
+ props: {
+ item: Object,
+ },
+ components: {
+ Generic,
+ },
+ data: () => ({
+ stats: null,
+ error: false,
+ }),
+ computed: {
+ streams: function () {
+ if (!this.stats) {
+ return "";
+ }
+ return this.stats.stream_count;
+ },
+ },
+ created() {
+ this.fetchStatus();
+ },
+ methods: {
+ fetchStatus: async function () {
+ try {
+ const response = await this.fetch(`/api/v2?apikey=${this.item.apikey}&cmd=get_activity`);
+ this.error = false;
+ this.stats = response.response.data;
+ } catch (e) {
+ this.error = true;
+ console.error(e);
+ }
+ }
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.notifs {
+ position: absolute;
+ color: white;
+ font-family: sans-serif;
+ top: 0.3em;
+ right: 0.5em;
+
+ .notif {
+ display: inline-block;
+ padding: 0.2em 0.35em;
+ border-radius: 0.25em;
+ position: relative;
+ margin-left: 0.3em;
+ font-size: 0.8em;
+
+ &.playing {
+ background-color: #28a9a3;
+ }
+
+ &.error {
+ border-radius: 50%;
+ aspect-ratio: 1;
+ background-color: #e51111;
+ }
+ }
+}
+</style>