h1 動画詳細

.card
  .card-img-top
    #video
  .card-body
    .card-title = "Video##{@video.id}"
  ul.list-group.list-group-flush
    li.list-group-item
      | 進捗
      .progress
        .progress-bar.progress-bar-striped.progress-bar-animated role='progressbar' style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" 25%
    li.list-group-item
      dl.row
        dt.col-2 AVC
        dd.col-10
          a.card-link.avc-url.data-copy-url href='#'
            | Copy URL
        dt.col-2 HEVC
        dd.col-10
          a.card-link.hevc-url.data-copy-url href='#'
            | Copy URL
    li.list-group-item
      h4 コピー用のタグ
      h5 スタイルシートとJavaScriptの読み込み（共通）
      | app/views/layouts/application.html.slim へ以下を追加
      pre.bg-light
        textarea class='form-control' rows='3'
          | = stylesheet_link_tag 'resizing/rails', media: 'all'
            = javascript_include_tag "resizing/rails"

      h5 HTML & JavaScriptの場合:
      textarea class='form-control' rows='10'
        |
          <div data-video-url="video-#{@video.id}"></div>
          <script>
          window.addEventListner('DOMContentLoaded', function () {
            video = new Resizing.Rails.Video("#{@video.data_self_url}", document.querySelector('video-#{@video.id}'))
            video.fetch()
          })
          </script>
      h5 ERBの場合:
      textarea class='form-control' rows='5'
        | # Controller内で該当のレコードを取得する
          @video_record = Resizing::Rails::Video.find(#{@video.id})
          &nbsp;
          # View内でHelperを使ってタグ出力する
          <%= Resizing::Rails::VideosHelper.resizing_video_tag(@video_record) %>

javascript:
  document.addEventListener('DOMContentLoaded', function() {
    progress = new Resizing.Rails.ProgressBar(document.querySelector('.progress-bar'), 0, 100)

    let setDataCopyURLOrRemoveElement = (elem, value) => {
      if(!elem) {
        return
      }

      if(value) {
        elem.setAttribute('data-copy-url', value)
        elem.textContent = 'Copy URL'
      } else {
        elem.textContent = ''
      }
    }

    video_root = document.querySelector('#video')
    video = new Resizing.Rails.Video("#{@video.data_self_url}", video_root)
    video.fetch()
    video.addEventListener((state, data) => {
      console.log('eventListener')
      console.log(data)
      switch(state) {
      case 'video_fetched':
        if(data.job_state?.job_percent_complete !== undefined) {
          progress.setCurrent(data.job_state?.job_percent_complete)
        }
        setDataCopyURLOrRemoveElement(document.querySelector('.avc-url'), data.avc_url)
        setDataCopyURLOrRemoveElement(document.querySelector('.hevc-url'), data.hevc_url)
        break
      default:
        break
      }
    })

  })