ZomeTV Broadcast live stats

MuxLiveViewers.vue

<script lang="ts">
export default {
  props: {
    jwtToken: String,
  },

  data() {
    return {
      intervalId: undefined,

      liveViewers: 0,
      stopsCount: 0,
    };
  },

  render() {
    return this.$scopedSlots.default({
      liveViewers: this.liveViewers,
      stopsCount: this.stopsCount,
      fetch: this.fetch,
    });
  },

  mounted() {
    this.intervalId = setInterval(() => {
      if (!this.jwtToken) {
        this.$emit("refetch");
        return;
      }

      this.fetch();
    }, 1000);
  },

  beforeDestroy() {
    clearInterval(this.intervalId);
  },

  methods: {
    async fetch() {
      const response = await fetch(`https://stats.mux.com/counts?token=${this.jwtToken}`);

      const data: {
        data: Array<{ views: number; viewers: number; updated_at: Date }>;
      } = await response.json();

      const viewers = data.data[0].viewers;
      const stops = Math.abs(this.liveViewers - viewers);

      this.liveViewers = viewers;
      this.stopsCount = stops;
    },
  },
};
</script>