resizing-rails 0.1.0.pre

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 8e0b8f97f32819b39ebb857fea3e47d87a24dde886efeafa5b27311a91f2fc83
+  data.tar.gz: 2bc13646968446e0903d4f7e29af1c7aa7a4b441a161ddbed11f10a83f721004
+SHA512:
+  metadata.gz: 7a05f15665f5d6dea1451c95e0c78090bda0bffdfc89fbc80b3ec2e60a9bd8e3c13f25aed7e7b8906a01acc26e5eb3297259da219d93d4428d80a9fd3d8c3392
+  data.tar.gz: ca25a67ff560dad4aa4b48b6f5ab36abfbc97045b7719e86075307185ef1d8f5e98d461924a73eaba02f52c67eabed364861170baeaac6ffe057acd5b7e90e32

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2021 Junichiro Kasuya
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,28 @@
+# Resizing::Rails
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'resizing-rails'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install resizing-rails
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,41 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+require 'github_changelog_generator/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Resizing::Rails'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+task default: :test
+
+
+GitHubChangelogGenerator::RakeTask.new :changelog do |config|
+  config.user = 'jksy'
+  config.project = 'resizing-rails'
+  # config.since_tag = '0.0.1'
+  config.future_release = 'add-changelog'
+end

data/app/assets/config/resizing_rails_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/resizing/rails .js
+//= link_directory ../stylesheets/resizing/rails .css

data/app/assets/javascripts/resizing/rails/application.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require rails-ujs
+//= require bootstrap
+//= require_tree .

data/app/assets/javascripts/resizing/rails/clipboard.js

@@ -0,0 +1,15 @@
+window.addEventListener('click', (e) => {
+  src = e.srcElement
+  if(src.hasAttribute('data-copy-url')) {
+    url = src.getAttribute('data-copy-url')
+    if(url !== null) {
+      elem = document.getElementById('clipboard')
+      elem.value = url
+      elem.select()
+      document.execCommand("copy")
+      toast = new Resizing.Rails.Toast()
+      index = url.lastIndexOf('/')
+      toast.show("コピーしました", '...' + url.substr(index, url.length))
+    }
+  }
+})

data/app/assets/javascripts/resizing/rails/progressbar.js

@@ -0,0 +1,33 @@
+window.Resizing ||= {}
+window.Resizing.Rails ||= {}
+
+// Usage
+// min = 0
+// max = 100
+// bar = new Resizing.Rails.ProgressBar(document.querySelector('...'), min, max)
+// bar.setCurrent(20)
+//
+
+class ProgressBar {
+  constructor(element, min, max) {
+    this.element = element
+    this.current = this.min = min
+    this.max = max
+  }
+
+  setCurrent(value) {
+    this.current = value
+    this.applyStyle()
+  }
+
+  applyStyle() {
+    let percentage = Math.floor(this.current / (this.max - this.min) * 100)
+    this.element.style = `width: ${percentage}%;`
+    this.element.setAttribute('aria-valuenow', this.current)
+    this.element.setAttribute('aria-valuemin', this.min)
+    this.element.setAttribute('aria-valuemax', this.max)
+    this.element.textContent = `${percentage}%`
+  }
+}
+
+window.Resizing.Rails.ProgressBar = ProgressBar

data/app/assets/javascripts/resizing/rails/toast.js

@@ -0,0 +1,35 @@
+window.Resizing ||= {}
+window.Resizing.Rails ||= {}
+
+// Usage
+// toast = new Resizing.Rails.Toast()
+// toast.show('title', 'body-text')
+//
+class Toast {
+  constructor() {
+    this.container = document.getElementById('toast-container')
+    this.template = document.getElementById('toast-template').content
+  }
+
+  show(title, text) {
+    let $node = document.importNode(this.template, true)
+    let $toast = $node.querySelector('.toast')
+    let id = $toast.id = `toast-${this.generateUniqueId()}`
+    $node.querySelector('.toast-title').textContent = title
+    $node.querySelector('.toast-body').textContent = text
+    this.container.appendChild($node)
+
+    let $elem = document.getElementById(id)
+    let t = new bootstrap.Toast($elem)
+    t.show()
+    $elem.addEventListener('hidden.bs.toast',() => {
+      $elem.remove()
+    })
+  }
+
+  generateUniqueId() {
+    return (new Date).getTime().toString(16)
+  }
+}
+
+window.Resizing.Rails.Toast = Toast

data/app/assets/javascripts/resizing/rails/video.js

@@ -0,0 +1,69 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+
+window.Resizing ||= {}
+window.Resizing.Rails ||= {}
+
+class Video {
+  constructor(self_url, parentElement) {
+    this.self_url = self_url
+    this.parentElement = parentElement
+    this.listener = null
+    let video = this.buildVideoTag()
+    this.video = videojs(video.id, {fluid: true})
+    this.record = null
+  }
+
+  fetch() {
+    let fetcher = new Resizing.Rails.VideoFetcher(this.self_url)
+    fetcher.fetch().then(record => {
+      this.record = record
+      this.call('video_fetched', record)
+      if(record.thumbnail_url) {
+        this.renderVideo(record)
+      }
+      if(record.state != 'ready') {
+        setTimeout(this.fetch.bind(this), 5_000)
+      }
+    })
+  }
+
+  renderVideo(record) {
+    this.video.poster(record.thumbnail_url)
+    if(record.m3u8_url) {
+      this.video.src({type: 'application/x-mpegURL', src: record.m3u8_url})
+    }
+    if(record.avc_url) {
+      this.video.src({type: 'video/mp4', src: record.avc_url})
+    }
+  }
+
+  buildVideoTag() {
+    let video = document.createElement('video')
+    video.setAttribute('class', 'video-js')
+    video.setAttribute('muted', 'true')
+    video.setAttribute('controls', '')
+    video.setAttribute('preload', 'metadata')
+    video.setAttribute('data-setup', '{}')
+    video.setAttribute('poster', '')
+    video.id = `video-${this.generateUniqueId()}`
+    this.parentElement.appendChild(video)
+    return video
+  }
+
+  generateUniqueId() {
+    return (new Date).getTime().toString(16)
+  }
+
+  addEventListener(listener) {
+    this.listener = listener
+  }
+
+  call(...args) {
+    if(this.listener !== null) {
+      this.listener(...args)
+    }
+  }
+}
+
+window.Resizing.Rails.Video = Video

data/app/assets/javascripts/resizing/rails/video_fetcher.js

@@ -0,0 +1,15 @@
+window.Resizing ||= {}
+window.Resizing.Rails ||= {}
+
+class VideoFetcher {
+  constructor(self_url) {
+    this.self_url = self_url
+  }
+
+  fetch() {
+    return fetch(this.self_url, {method: 'GET', credentials: 'same-origin', headers: {'Content-Type': 'application/json'}})
+    .then(response => response.json())
+  }
+}
+
+window.Resizing.Rails.VideoFetcher = VideoFetcher

data/app/assets/javascripts/resizing/rails/video_uploader.js

@@ -0,0 +1,77 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+
+window.Resizing ||= {}
+window.Resizing.Rails ||= {}
+
+class VideoUploader {
+  constructor(file_field, prepare_url) {
+    this.file_field = file_field
+    this.prepare_url = prepare_url
+    this.callback = null
+  }
+
+  upload() {
+    let file = this.file_field.files[0]
+    if(file === undefined) {
+      this.call('no_file_found')
+      return
+    }
+    this.prepare(file.name)
+    .catch(error => {
+      this.call('upload_failed')
+    })
+  }
+
+  prepare(filename) {
+    let body = JSON.stringify({filename: filename})
+    return fetch(this.prepare_url, {method: 'POST', credentials: 'same-origin', headers: {'Content-Type': 'application/json'}, body: body})
+      .then(response => {
+        if(!response.ok) {
+          return Promise.reject(response)
+        }
+        return response.json()
+      }).then(record => {
+        return this.uploadFile(record)
+      })
+  }
+
+  uploadFile(record) {
+    let file = this.file_field.files[0]
+    let data = record.data
+    return fetch(data.s3_presigned_url, {method: 'PUT', credentials: 'same-origin', headers: {'Content-Type': file.type}, body: file})
+      .then(response => {
+        if(!response.ok) {
+          return Promise.reject(response)
+        }
+        // ignore response body
+      }).then(data => {
+        return this.uploadDone(record)
+      })
+  }
+
+  uploadDone(record) {
+    let data = record.data
+    return fetch(data.upload_completed_url, {method: 'PUT', credentials: 'same-origin', headers:{'Content-Type': 'application/json'}})
+      .then(response => {
+        if(!response.ok) {
+          return Promise.reject(response)
+        }
+        return response.json()
+      }).then(data => {
+        window.location.pathname = record.self_path
+      })
+  }
+
+  addEventListener(callback) {
+    this.callback = callback
+  }
+
+  call(state) {
+    if(this.callback !== undefined) {
+      this.callback(state)
+    }
+  }
+}
+
+window.Resizing.Rails.VideoUploader = VideoUploader

data/app/assets/stylesheets/resizing/rails/application.scss

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ */
+@import 'bootstrap';
+@import 'videos';

data/app/assets/stylesheets/resizing/rails/videos.scss

@@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/

data/app/controllers/resizing/rails/application_controller.rb

@@ -0,0 +1,7 @@
+module Resizing
+  module Rails
+    class ApplicationController < ActionController::Base
+      protect_from_forgery with: :exception
+    end
+  end
+end

data/app/controllers/resizing/rails/videos_controller.rb

@@ -0,0 +1,26 @@
+require_dependency "resizing/rails/application_controller"
+
+module Resizing::Rails
+  class VideosController < ApplicationController
+    skip_before_action :verify_authenticity_token, only: [:prepare]
+
+    def index
+      @videos = Resizing::Rails::Video.order('created_at desc').page(params[:page]).per(20)
+      render text: 'index'
+    end
+
+    def prepare
+      response = client.prepare
+      video = Resizing::Rails::Video.create!(data: response)
+      render json: video
+    end
+
+    def client
+      @client ||= Resizing::Video::Client.new
+    end
+
+    def show
+      @video = Resizing::Rails::Video.find(params[:id])
+    end
+  end
+end

data/app/helpers/resizing/rails/application_helper.rb

@@ -0,0 +1,6 @@
+module Resizing
+  module Rails
+    module ApplicationHelper
+    end
+  end
+end

data/app/helpers/resizing/rails/videos_helper.rb

@@ -0,0 +1,4 @@
+module Resizing::Rails
+  module VideosHelper
+  end
+end

data/app/helpers/resizing/rails/webpack_bundle_helper.rb

@@ -0,0 +1,21 @@
+# ref. https://qiita.com/Tak-Iwamoto/items/efce14f67eb572d8742e
+module Resizing::Rails::WebpackBundleHelper
+  class BundleNotFound < StandardError; end
+
+  def asset_bundle_path(file)
+    valid_file?(file)
+    return "/assets" + manifest.fetch(file)
+  end
+
+  private
+
+  def manifest
+    return @manifest ||= JSON.parse(File.read("app/javascript/dist/manifest.json"))
+  end
+
+  def valid_file?(entry)
+    return true if manifest.key?(entry)
+    raise BundleNotFound, "Could not find bundle with name #{entry}"
+  end
+
+end

data/app/javascript/packs/resizing.js

@@ -0,0 +1 @@
+import { Video } from '../src/video'

data/app/javascript/src/video.js

@@ -0,0 +1,42 @@
+class Video {
+  constructor(element) {
+    this.element = element
+    this.element
+  }
+
+  upload() {
+    file = this.element.files[0]
+    prepare(file.name)
+  }
+
+  prepare(filename) {
+    body = JSON.stringify({filename: filename})
+    fetch(prepare_url, {method: 'POST', credentials: 'same-origin', headers: {'Content-Type': 'application/json'}, body: body})
+      .then(response => response.json())
+      .then(data => console.log(data))
+  }
+
+  file_upload(record) {
+    file = this.element.files[0]
+    fetch(record.s3_presigned_url, {method: 'PUT', credentials: 'same-origin', headers: {'Content-Type': file.type}, body: file})
+      .then(response => console.log(response))
+      .then(data => done_upload(record))
+  }
+
+  done_upload(record) {
+    fetch(record.upload_completed_url, {method: 'PUT', credentials: 'same-origin', headers:{'Content-Type': 'application/json'}})
+      .then(response => response.json())
+      .then(data => monitor_state(data))
+  }
+
+  monitor_state(record) {
+    alert('uploaded')
+  }
+
+  // monitor_state(record) {
+  //   _record = record
+  //   intervalID = setInternal(() => fetch(_record.self_url, method: 'GET', credentials: 'same-origin', headers:{'Content-Type': 'application/json'})
+  // }
+}
+
+export { Video }

data/app/jobs/resizing/rails/application_job.rb

@@ -0,0 +1,6 @@
+module Resizing
+  module Rails
+    class ApplicationJob < ActiveJob::Base
+    end
+  end
+end

data/app/mailers/resizing/rails/application_mailer.rb

@@ -0,0 +1,8 @@
+module Resizing
+  module Rails
+    class ApplicationMailer < ActionMailer::Base
+      default from: 'from@example.com'
+      layout 'mailer'
+    end
+  end
+end

data/app/models/resizing/rails/application_record.rb

@@ -0,0 +1,7 @@
+module Resizing
+  module Rails
+    class ApplicationRecord < ActiveRecord::Base
+      self.abstract_class = true
+    end
+  end
+end

data/app/models/resizing/rails/video.rb

@@ -0,0 +1,37 @@
+module Resizing::Rails
+  class Video < ApplicationRecord
+    serialize :data, JSON
+
+    %w(
+      id
+      project_id
+      state
+      source_uri
+      deleted_at
+      s3_presigned_url
+      converted_uri
+      created_at
+      updated_at
+      upload_completed_url
+      self_url
+      m3u8_url
+      hevc_url
+      avc_url
+      thumbnail_url
+      job_state
+    ).each do |name|
+      define_method "data_#{name}" do
+        self.data[name]
+      end
+    end
+
+    def self_path
+      Resizing::Rails.railtie_routes_url_helpers.video_path(self)
+    end
+
+    def as_json *args
+      hash = super(*args)
+      hash.merge(self_path: self_path)
+    end
+  end
+end

data/app/views/kaminari/_first_page.html.slim

@@ -0,0 +1,2 @@
+li.page-item
+  = link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link'

data/app/views/kaminari/_gap.html.slim

@@ -0,0 +1,2 @@
+li.page-item.disabled
+  = link_to raw(t 'views.pagination.truncate'), '#', class: 'page-link'

data/app/views/kaminari/_last_page.html.slim

@@ -0,0 +1,2 @@
+li.page-item
+  = link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, remote: remote, class: 'page-link'

data/app/views/kaminari/_next_page.html.slim

@@ -0,0 +1,2 @@
+li.page-item
+  = link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote, class: 'page-link'

data/app/views/kaminari/_page.html.slim

@@ -0,0 +1,6 @@
+- if page.current?
+  li.page-item.active
+    = content_tag :a, page, data: { remote: remote }, rel: page.rel, class: 'page-link'
+- else
+  li.page-item
+    = link_to page, url, remote: remote, rel: page.rel, class: 'page-link'

data/app/views/kaminari/_paginator.html.slim

@@ -0,0 +1,12 @@
+= paginator.render do
+  nav
+    ul.pagination.justify-content-center
+      == first_page_tag unless current_page.first?
+      == prev_page_tag unless current_page.first?
+      - each_page do |page|
+        - if page.left_outer? || page.right_outer? || page.inside_window?
+          == page_tag page
+        - elsif !page.was_truncated?
+          == gap_tag
+      == next_page_tag unless current_page.last?
+      == last_page_tag unless current_page.last?

data/app/views/kaminari/_prev_page.html.slim

@@ -0,0 +1,2 @@
+li.page-item
+  = link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote, class: 'page-link'

data/app/views/layouts/resizing/rails/application.html.slim

@@ -0,0 +1,20 @@
+doctype html
+html
+  head
+    meta charset='utf-8'
+    title Resizing rails
+    = csrf_meta_tags
+    = csp_meta_tag
+
+    link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet"
+    script src="//vjs.zencdn.net/7.8.2/video.min.js"
+
+    = stylesheet_link_tag    "resizing/rails/application", media: "all"
+    = javascript_include_tag "resizing/rails/application"
+
+  body
+    .container
+      = yield
+
+    = render 'resizing/rails/common/toast'
+    = render 'resizing/rails/common/clipboard'

data/app/views/resizing/rails/common/_clipboard.html.slim

@@ -0,0 +1 @@
+input#clipboard type='hidden' value=''

data/app/views/resizing/rails/common/_toast.html.slim

@@ -0,0 +1,10 @@
+#toast-container.toast-container.position-fixed.top-0.end-0.p-3 style=("z-index: 5")
+  template#toast-template
+    .toast aria-atomic="true" aria-live="assertive" id="" role="alert"
+      .toast-header
+        /! img src="..." class="rounded me-2" alt="..."
+        strong.me-auto.toast-title Bootstrap
+        small.text-muted 2 seconds ago
+        button.btn-close aria-label="Close" data-bs-dismiss="toast" type="button"
+      .toast-body
+        | Heads up, toasts will stack automatically

data/app/views/resizing/rails/videos/_upload_form.html.slim

@@ -0,0 +1,35 @@
+form
+  .mb-3.row
+    label.form-label.col-sm-3.col-form-label for='video' File(MP4/MOV/AVI/WMV/ASF/WebM)
+    .col-sm-10
+      input.form-control#video type='file'
+  button.btn.btn-primary.mb-3#submit type='submit' upload
+
+javascript:
+  document.addEventListener('DOMContentLoaded', (event)=> {
+    video = new Resizing.Rails.VideoUploader(
+      document.getElementById('video'),
+      #{raw Resizing::Rails.railtie_routes_url_helpers.prepare_videos_url(only_path: true).to_json}
+    );
+
+    document.getElementById('submit').addEventListener(
+      'click',
+      (e) => {
+        e.preventDefault()
+        e.target.setAttribute('disabled', 'true')
+        video.upload()
+      }
+    )
+
+    video.addEventListener(e => {
+      switch(e) {
+      case 'no_file_found':
+        (new Resizing.Rails.Toast()).show('Error', 'ファイルを指定してください')
+        break;
+      case 'upload_failed':
+        (new Resizing.Rails.Toast()).show('Error', 'アップロードに失敗しました')
+        break;
+      }
+      document.getElementById('submit').removeAttribute('disabled')
+    })
+  })

data/app/views/resizing/rails/videos/index.html.slim

@@ -0,0 +1,53 @@
+h1 動画アップロード
+
+= render 'resizing/rails/videos/upload_form'
+
+= 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}:#{video.data_id}"
+        ul.list-group.list-group-flush
+          li.list-group-item
+            | State:
+            span.video-state = video.data_state
+          li.list-group-item
+            | AVC
+            a.card-link.avc-url.data-copy-url href='#'
+              | Copy URL
+          li.list-group-item
+            | HEVC
+            a.card-link.hevc-url.data-copy-url href='#'
+              | Copy URL
+        .card-footer
+          small.text-muted = 'asfadf'
+        .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)
+      })
+    })
+  })

data/app/views/resizing/rails/videos/show.html.slim

@@ -0,0 +1,75 @@
+
+.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
+      | AVC
+      a.card-link.avc-url.data-copy-url href='#'
+        | Copy URL
+    li.list-group-item
+      | HEVC
+      a.card-link.hevc-url.data-copy-url href='#'
+        | Copy URL
+    li.list-group-item
+      label.form-label for='copy-tag' コピー用のタグ（このサイト内だけで有効です）
+      textarea#copy-tag class='form-control' rows='10'
+        | <div id='video-#{@video.id}'></div>
+          <script>
+          document.addEventListner('DOMContentLoaded', function () {
+            video = new Resizing.Rails.Video("#{@video.data_self_url}", document.querySelector('video-#{@video.id}'))
+            video.fetch()
+          })
+          </script>
+
+      p
+        | ※Resizing.Rails.Video classの読み込みが必要です。
+      b 例：
+      pre
+        code
+          | javascript_include_tag "resizing/rails/video"
+
+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
+      }
+    })
+
+  })
+

data/config/routes.rb

@@ -0,0 +1,7 @@
+Resizing::Rails::Engine.routes.draw do
+  resources :videos do
+    collection do
+      post :prepare
+    end
+  end
+end

data/db/migrate/20210122043613_create_resizing_rails_videos.rb

@@ -0,0 +1,9 @@
+class CreateResizingRailsVideos < ActiveRecord::Migration[5.2]
+  def change
+    create_table :resizing_rails_videos do |t|
+      t.text :data
+
+      t.timestamps
+    end
+  end
+end

data/lib/resizing/rails.rb

@@ -0,0 +1,7 @@
+require "resizing/rails/engine"
+
+module Resizing
+  module Rails
+    # Your code goes here...
+  end
+end

data/lib/resizing/rails/engine.rb

@@ -0,0 +1,25 @@
+Gem.loaded_specs['resizing-rails'].dependencies.each do |d|
+  require d.name
+rescue LoadError
+  require d.name.gsub('-', '/')
+end
+
+module Resizing
+  module Rails
+    class Engine < ::Rails::Engine
+      isolate_namespace Resizing::Rails
+
+      # initializer 'ResizingRails precompile hook', group: :all do |app|
+      #   puts app.config.assets.precompile
+      #   app.config.assets.precompile += %w(
+      #     resizing/rails/videos.js
+      #   )
+      # end
+
+      # rake_tasks do
+      #   Dir[File.join(File.dirname(__FILE__), '../tasks/*.rake')].each { |f| load f }
+      # end
+    end
+  end
+end
+

data/lib/resizing/rails/version.rb

@@ -0,0 +1,5 @@
+module Resizing
+  module Rails
+    VERSION = '0.1.0.pre'
+  end
+end

data/lib/tasks/resizing/rails_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :resizing_rails do
+#   # Task goes here
+# end

metadata

@@ -0,0 +1,204 @@
+--- !ruby/object:Gem::Specification
+name: resizing-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0.pre
+platform: ruby
+authors:
+- Junichiro Kasuya
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2021-02-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.2.4
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.2.4.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.2.4
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.2.4.4
+- !ruby/object:Gem::Dependency
+  name: resizing
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.8.0
+- !ruby/object:Gem::Dependency
+  name: slim-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: kaminari
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: bootstrap
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.0.0.beta1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 5.0.0.beta1
+- !ruby/object:Gem::Dependency
+  name: sassc
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: github_changelog_generator
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Resizing mountable module for Rails application.
+email:
+- junichiro.kasuya@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/config/resizing_rails_manifest.js
+- app/assets/javascripts/resizing/rails/application.js
+- app/assets/javascripts/resizing/rails/clipboard.js
+- app/assets/javascripts/resizing/rails/progressbar.js
+- app/assets/javascripts/resizing/rails/toast.js
+- app/assets/javascripts/resizing/rails/video.js
+- app/assets/javascripts/resizing/rails/video_fetcher.js
+- app/assets/javascripts/resizing/rails/video_uploader.js
+- app/assets/stylesheets/resizing/rails/application.scss
+- app/assets/stylesheets/resizing/rails/videos.scss
+- app/controllers/resizing/rails/application_controller.rb
+- app/controllers/resizing/rails/videos_controller.rb
+- app/helpers/resizing/rails/application_helper.rb
+- app/helpers/resizing/rails/videos_helper.rb
+- app/helpers/resizing/rails/webpack_bundle_helper.rb
+- app/javascript/packs/resizing.js
+- app/javascript/src/video.js
+- app/jobs/resizing/rails/application_job.rb
+- app/mailers/resizing/rails/application_mailer.rb
+- app/models/resizing/rails/application_record.rb
+- app/models/resizing/rails/video.rb
+- app/views/kaminari/_first_page.html.slim
+- app/views/kaminari/_gap.html.slim
+- app/views/kaminari/_last_page.html.slim
+- app/views/kaminari/_next_page.html.slim
+- app/views/kaminari/_page.html.slim
+- app/views/kaminari/_paginator.html.slim
+- app/views/kaminari/_prev_page.html.slim
+- app/views/layouts/resizing/rails/application.html.slim
+- app/views/resizing/rails/common/_clipboard.html.slim
+- app/views/resizing/rails/common/_toast.html.slim
+- app/views/resizing/rails/videos/_upload_form.html.slim
+- app/views/resizing/rails/videos/index.html.slim
+- app/views/resizing/rails/videos/show.html.slim
+- config/routes.rb
+- db/migrate/20210122043613_create_resizing_rails_videos.rb
+- lib/resizing/rails.rb
+- lib/resizing/rails/engine.rb
+- lib/resizing/rails/version.rb
+- lib/tasks/resizing/rails_tasks.rake
+homepage: https://github.com/jksy/resizing-rails/
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">"
+    - !ruby/object:Gem::Version
+      version: 1.3.1
+requirements: []
+rubygems_version: 3.0.3
+signing_key: 
+specification_version: 4
+summary: Resizing mountable module for Rails application.
+test_files: []