Merge pull request #410 from espilioto/main

Emby integration

diff --git a/docs/customservices.md b/docs/customservices.md
index cb68e1de961c283e090eb2771ed770c62b5ad8b3..49798a8c5603640e3f6324bdb586f9cd901f4ce2 100644 (file)
--- a/docs/customservices.md
+++ b/docs/customservices.md
@@ -6,7 +6,16 @@ apikey included in the configuration file is exposed to anyone who can access th
 if your homer instance is secured behind some form of authentication or access restriction.
 
 Available services are in `src/components/`. Here is an overview of all custom services that are available
-within Homer.
+within Homer:
++ [PiHole](#pihole)
++ [OpenWeatherMap](#openweathermap)
++ [Medusa](#medusa)
++ [Lidarr, Prowlarr, Sonarr and Radarr](#lidarr-prowlarr-sonarr-and-radarr)
++ [PaperlessNG](#paperlessng)
++ [Ping](#ping)
++ [Prometheus](#prometheus)
++ [Portainer](#portainer)
++ [Emby](#emby)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
 
@@ -141,3 +150,16 @@ See https://docs.portainer.io/v/ce-2.11/user/account-settings#access-tokens
   type: "Portainer"
   apikey: "MY-SUPER-SECRET-API-KEY"
 ```
+
+## Emby
+
+You need to set the type to Emby, provide an api key and choose which stats to show if the subtitle is disabled.
+
+```yaml
+- name: "Emby"
+  logo: "assets/tools/sample.png"
+  url: "http://192.168.0.151/"
+  type: "Emby"
+  apikey: "MY-SUPER-SECRET-API-KEY"
+  libraryType: "music" #Choose which stats to show. Can be one of: music, series or movies.
+```

diff --git a/src/components/services/Emby.vue b/src/components/services/Emby.vue
new file mode 100644 (file)
index 0000000..25a2612
--- /dev/null
+++ b/src/components/services/Emby.vue
@@ -0,0 +1,118 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else>
+          {{ embyCount }}
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Emby",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    status: "",
+    albumCount: 0,
+    songCount: 0,
+    movieCount: 0,
+    seriesCount: 0,
+    episodeCount: 0,
+  }),
+  computed: {
+    embyCount: function () {
+      if (this.item.libraryType === "music")
+        return `${this.songCount} songs, ${this.albumCount} albums`;
+      else if (this.item.libraryType === "movies")
+        return `${this.movieCount} movies`;
+      else if (this.item.libraryType === "series")
+        return `${this.episodeCount} eps, ${this.seriesCount} series`;
+      else return `wrong library type 💀`;
+    },
+  },
+  created() {
+    this.fetchServerStatus();
+
+    if (!this.item.subtitle && this.status !== "dead")
+      this.fetchServerMediaStats();
+  },
+  methods: {
+    fetchServerStatus: async function () {
+      this.fetch("/System/info/public")
+        .then((response) => {
+          if (response.Id) this.status = "running";
+          else  throw new Error();
+        })
+        .catch((e) => {
+          console.log(e);
+          this.status = "dead";
+        });
+    },
+    fetchServerMediaStats: async function () {
+      const headers = {
+        "X-Emby-Token": this.item.apikey,
+      };
+
+      var data = await this.fetch("/items/counts", { headers }).catch((e) => {
+        console.log(e);
+      });
+
+      this.albumCount = data.AlbumCount;
+      this.songCount = data.SongCount;
+      this.movieCount = data.MovieCount;
+      this.seriesCount = data.SeriesCount;
+      this.episodeCount = data.EpisodeCount;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+
+  &.running:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.dead:before {
+    background-color: #c9404d;
+    border-color: #c42c3b;
+    box-shadow: 0 0 5px 1px #c9404d;
+  }
+
+  &:before {
+    content: " ";
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-right: 10px;
+    border: 1px solid #000;
+    border-radius: 7px;
+  }
+}
+</style>