Ember Performance Issue

basic-video.js

import Component from '@ember/component';
import { computed } from '@ember/object';
import {
  noop,
} from 'lodash';

export default Component.extend({
  tagName: 'video',

  classNameBindings: ['isPlaying'],

  attributeBindings: ['poster', 'preload', 'src', 'muted', 'loop', 'autoplay'],

  poster: null,

  // Meant to be controlled from the parent component if there is play-specific
  // CSS. This is optional.
  isPlaying: false,

  shouldPreload: false,

  autoplay: false,

  muted: true,

  loop: false,

  volume: 0,

  onReady: noop,

  onEnded: noop,

  onPlaying: noop,

  preload: computed('shouldPreload', function() {
    if (this.get('shouldPreload')) {
      return 'auto';
    } else {
      return 'none';
    }
  }),

  sendOnReady() {
    this.get('onReady')(this.element);
  },

  sendOnEnded() {
    this.get('onEnded')(this.element);
  },

  sendOnPlaying() {
    this.get('onPlaying')(this.element);
  },

  init() {
    this._super(...arguments);

    this.sendOnReady = this.sendOnReady.bind(this);
    this.sendOnEnded = this.sendOnEnded.bind(this);
    this.sendOnPlaying = this.sendOnPlaying.bind(this);
  },

  didInsertElement() {
    this._super(...arguments);

    this.element.volume = this.get('volume');

    this.element.addEventListener('ended', this.sendOnEnded, false);
    this.element.addEventListener('playing', this.sendOnPlaying, false);

    if (this.element.readyState >= this.element.HAVE_FUTURE_DATA) {
      this.sendOnReady();
      this.sendOnPlaying();
    } else {
      this.element.addEventListener('canplay', this.sendOnReady, false);
    }
  },

  willDestroyElement() {
    this._super(...arguments);

    this.element.removeEventListener('canplay', this.sendOnReady);
    this.element.removeEventListener('playing', this.sendOnPlaying);
    this.element.removeEventListener('ended', this.sendOnEnded);
  },

  mouseEnter() {
    this.get('onMouseEnter')(this.element);
  },

  mouseLeave() {
    this.get('onMouseLeave')(this.element);
  },
});

show.hbs

<div class="stores-show-page">
  {{player-banner
    videos=model.user.processedVideos
  }}
  <div class="sub-nav">
    <div class="sub-nav-inner main-content-child">
      {{#if isEditing}}
        <button
          data-test-id="done-editing-store"
          {{action 'finishEditingStore' model}}
        >
          Done Editing
        </button>
      {{else if isOwnStore}}
        {{link-to
          'Edit Store'
          'stores.show'
          model
          (query-params edit=true)
          class='button'
          data-test-id='edit-store'
        }}
      {{/if}}
    </div>
  </div>
  <div class="store-content main-content-child">
    {{user-summary
      profile=model
      isEditing=isEditing
      onFinishEditingUserSummary=(action 'finishEditingStore')
    }}

    <div class="main-area">
      {{#if isEditing}}
        {{#file-dropzone name='videos' class='file-dropzone' as |dropzone queue|}}
          {{#if dropzone.active}}
            {{#if dropzone.valid}}
              Drop to upload
            {{else}}
              Invalid
            {{/if}}
          {{else if queue.files.length}}
            Uploading {{queue.files.length}} files. ({{queue.progress}}%)
          {{else}}
            {{#if dropzone.supported}}
              Drag and drop videos here to upload or&nbsp;
            {{/if}}
            {{#file-upload
              name='videos'
              accept='video/x-flv,video/*'
              multiple=true
              onfileadd=(action 'uploadVideo')
              data-test-id='video-upload'
            }}
              <a tabindex=0>click to upload</a>.
            {{/file-upload}}
          {{/if}}
        {{/file-dropzone}}

        {{video-edit-list
          videos=model.user.loadedVideos
          context='stores.show'
        }}
      {{else}}
        {{video-list
          videos=model.user.processedVideos
          context='stores.show'
        }}
      {{/if}}
    </div>
  </div>
</div>

show.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

import RouteStoresShowMixin from 'app/mixins/route-stores-show';

export default Route.extend(RouteStoresShowMixin, {
  session: service(),
  currentUser: service(),

  model(params) {
    return this.get('store').findRecord('profile', params.profile_id);
  },

  setupController() {
    const params = this.paramsFor(this.routeName);
    const controller = this.controllerFor(this.routeName);

    if (!this.isOwnStore(params.profile_id) && params.isEditing) {
      controller.set('isEditing', false);
    }

    this._super(...arguments);
  },

  resetController(controller, isExiting) {
    if (isExiting) {
      controller.set('isEditing', false);
    }
  },

  isOwnStore(profileId) {
    return this.get('session.isAuthenticated') &&
           this.get('currentUser.profile.id') === profileId;
  },
});

video-item.hbs

{{video-thumbnail
  ''
  'videos.show'
  video
  autoplay=autoplay
  onPlaying=(action 'playVideo')
  onMouseEnter=(action 'playVideo')
  onMouseLeave=(action 'stopVideo')
}}
{{video-info
  video=video
  profile=video.profile
  context=context
}}

video-list.hbs

{{#each videos as |video index|}}
  {{video-item
    video=video
    autoplay=(eq index 0)
    context=context
    onPlayVideo=(action 'playVideo')
    onStopVideo=(action 'stopVideo')
    data-test-id=(concat 'video-' video.id)
  }}
{{else if (has-block)}}
  {{yield}}
{{/each}}

video-thumbnail.hbs

{{basic-video
  poster=video.thumbnailSrc
  sources=video.thumbnailPreviewSources
  volume=0
  autoplay=autoplay
  onPlaying=onPlaying
  onMouseEnter=onMouseEnter
  onMouseLeave=onMouseLeave
}}