{"size": 1554, "ext": "js", "max_stars_repo_path": "web-ui-vue3/src/components/chimeWeb/LocalVideo/localVideo.js", "max_stars_repo_name": "jobscale/amazon-ivs-chime-web-demo", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "web-ui-vue3/src/components/chimeWeb/LocalVideo/localVideo.js", "max_issues_repo_name": "jobscale/amazon-ivs-chime-web-demo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "web-ui-vue3/src/components/chimeWeb/LocalVideo/localVideo.js", "max_forks_repo_name": "jobscale/amazon-ivs-chime-web-demo", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.7931034483, "max_line_length": 83, "alphanum_fraction": 0.5804375804}
import { logger } from '../../../tools';
import { chime } from '../../../chime/ChimeSdkWrapper';

export default {
  name: 'LocalVideo',
  props: ['joinInfo'],
  data() {
    return {
      enabled: false,
      muted: false,
      showMeta: true,
    };
  },
  mounted() {
    setTimeout(() => this.showMeta = false, 2500);

    chime.audioVideo.addObserver({
      videoTileDidUpdate: tileState => {
        if (!tileState.boundAttendeeId
          || !tileState.localTile
          || !tileState.tileId
          || !this.$refs.videoElement) {
          logger.warn({ tileState });
          return;
        }
        chime.audioVideo.bindVideoElement(
          tileState.tileId,
          this.$refs.videoElement,
        );
        this.enabled = tileState.active;
      },
    });

    this.onRoster = this.onRoster || (newRoster => this.rosterCallback(newRoster));
    chime.unsubscribeFromRosterUpdate(this.onRoster);
    chime.subscribeToRosterUpdate(this.onRoster);
  },
  methods: {
    rosterCallback(newRoster) {
      let attendeeId;
      for (attendeeId in newRoster) {
        // Exclude others
        if (attendeeId === this.joinInfo.Attendee.AttendeeId) {
          this.muted = newRoster[attendeeId].muted;
        }
      }
    },
    micMuteCls() {
      return this.muted ? 'controls__btn--mic_on' : 'controls__btn--mic_off';
    },
    metaCls() {
      // always show metadata when muted
      const isMetaShown = this.showMeta || this.muted || !this.enabled;
      return isMetaShown ? '' : ' cam__meta--hide';
    },
  },
};
