src/components/services/Emby.vue

   1 <template>
   2   <Generic :item="item">
   3     <template #content>
   4       <p class="title is-4">{{ item.name }}</p>
   5       <p class="subtitle is-6">
   6         <template v-if="item.subtitle">
   7           {{ item.subtitle }}
   8         </template>
   9         <template v-else>
  10           {{ embyCount }}
  11         </template>
  12       </p>
  13     </template>
  14     <template #indicator>
  15       <div v-if="status" class="status" :class="status">
  16         {{ status }}
  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: "Emby",
  28   mixins: [service],
  29   props: {
  30     item: Object,
  31   },
  32   components: {
  33     Generic,
  34   },
  35   data: () => ({
  36     status: "",
  37     albumCount: 0,
  38     songCount: 0,
  39     movieCount: 0,
  40     seriesCount: 0,
  41     episodeCount: 0,
  42   }),
  43   computed: {
  44     embyCount: function () {
  45       if (this.item.libraryType === "music")
  46         return `${this.songCount} songs, ${this.albumCount} albums`;
  47       else if (this.item.libraryType === "movies")
  48         return `${this.movieCount} movies`;
  49       else if (this.item.libraryType === "series")
  50         return `${this.episodeCount} eps, ${this.seriesCount} series`;
  51       else return `wrong library type 💀`;
  52     },
  53   },
  54   created() {
  55     this.fetchServerStatus();
  56
  57     if (!this.item.subtitle && this.status !== "dead")
  58       this.fetchServerMediaStats();
  59   },
  60   methods: {
  61     fetchServerStatus: async function () {
  62       this.fetch("/System/info/public")
  63         .then((response) => {
  64           if (response.Id) this.status = "running";
  65           else  throw new Error();
  66         })
  67         .catch((e) => {
  68           console.log(e);
  69           this.status = "dead";
  70         });
  71     },
  72     fetchServerMediaStats: async function () {
  73       const headers = {
  74         "X-Emby-Token": this.item.apikey,
  75       };
  76
  77       var data = await this.fetch("/items/counts", { headers }).catch((e) => {
  78         console.log(e);
  79       });
  80
  81       this.albumCount = data.AlbumCount;
  82       this.songCount = data.SongCount;
  83       this.movieCount = data.MovieCount;
  84       this.seriesCount = data.SeriesCount;
  85       this.episodeCount = data.EpisodeCount;
  86     },
  87   },
  88 };
  89 </script>
  90
  91 <style scoped lang="scss">
  92 .status {
  93   font-size: 0.8rem;
  94   color: var(--text-title);
  95
  96   &.running:before {
  97     background-color: #94e185;
  98     border-color: #78d965;
  99     box-shadow: 0 0 5px 1px #94e185;
 100   }
 101
 102   &.dead:before {
 103     background-color: #c9404d;
 104     border-color: #c42c3b;
 105     box-shadow: 0 0 5px 1px #c9404d;
 106   }
 107
 108   &:before {
 109     content: " ";
 110     display: inline-block;
 111     width: 7px;
 112     height: 7px;
 113     margin-right: 10px;
 114     border: 1px solid #000;
 115     border-radius: 7px;
 116   }
 117 }
 118 </style>