h1 動画アップロード

= render 'resizing/rails/videos/upload_form'

h1 動画一覧

= paginate(@videos)

.row.row-cols-1.row-cols-md-4.g-3
  - @videos.each do |video|
    .col
      .card.h-100 data-video-url=video.data_self_url
        img.js-video-thumbnail.card-img-top
        .card-body
          h5.card-title = "#{video.id}"
        ul.list-group.list-group-flush
          li.list-group-item
            dl
              dt State
              dd.video-state
          li.list-group-item
            dl
              dt AVC
              dd
                a.card-link.avc-url.data-copy-url href='#'
                  | Copy URL
          li.list-group-item
            dl
              dt HEVC
              dd
                a.card-link.hevc-url.data-copy-url href='#'
                  | Copy URL
        .card-body
          = link_to 'Show video details', video, class: 'btn btn-primary'

= paginate(@videos)

javascript:
  document.addEventListener('DOMContentLoaded', ()=> {
    let setDataCopyURLOrRemoveElement = (elem, value) => {
      if(value) {
        elem.setAttribute('data-copy-url', value)
      } else {
        elem.remove()
      }
    }
    elements = document.querySelectorAll('[data-video-url]')
    elements.forEach(elem => {
      url = elem.getAttribute('data-video-url')
      fetcher = new Resizing.Rails.VideoFetcher(url)
      fetcher.fetch().then(data => {
        elem.querySelector('.js-video-thumbnail').setAttribute('src', data.thumbnail_url)
        elem.querySelector('.video-state').textContent = data.state
        setDataCopyURLOrRemoveElement(elem.querySelector('.avc-url'), data.avc_url)
        setDataCopyURLOrRemoveElement(elem.querySelector('.hevc-url'), data.hevc_url)
      })
    })
  })