resizing-rails 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fee8aa49d76956092c278082a2b5101e67a0825a1cd5aed1b77f86bf21eed5ca
-  data.tar.gz: 9a5d3c0b6e2be6a17b349e16df7bb435d371db7f9a994127e99d4430bdef7790
+  metadata.gz: 19bc526581140827ced204007407305cc3fab1c536b3fcc6090cc03db55e3637
+  data.tar.gz: b170c6cf1cd7ac32b94b2988b9a4c816f6f9bac05de60eaa53663e7b8eb57b60
 SHA512:
-  metadata.gz: 0e557645e13e95c0772d00fae71746a935eebb5b0c6181ac812acee62d841f14b3d8094076c78a4b3ea62d51ae667b8c5b01e0dbcf9f8b2e9758910d8710704c
-  data.tar.gz: 1fc7f77c26a2c1be2b92a488de5253a4a66b0feacde3c49ee5356d0436c5c4ea86c59eff689086e77cc48b8597594d6f8dbf2ba69fe0376bee6a01bd388b53ef
+  metadata.gz: b760a2fc7b6c01f5aca8c3b0a9a4f578f9dd3aed2c412382d2823716829a843039214218102970b8450b1d6de3ae1f8f8d6a9f92365843eefc7999e360c5a6ae
+  data.tar.gz: 516d11fd1bd06488f6448f57633762234a41b7429b4bf73e0a680c37aede4e122556c3eeb386bc3905c4efd421422986d86525840d9d05e266f62b8f3ddaa1ff

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

@@ -3,5 +3,6 @@
 //= require resizing/rails/toast
 //= require resizing/rails/video
 //= require resizing/rails/video_fetcher
+//= require resizing/rails/video_loader
 //= require resizing/rails/video_uploader
 //= require resizing/rails/videojs/7.8.2/video.min

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

@@ -12,6 +12,7 @@ class Video {
     let video = this.buildVideoTag()
     this.video = videojs(video.id, {fluid: true})
     this.record = null
+    this.refresh_seconds = 30
   }
 
   fetch() {
@@ -23,7 +24,7 @@ class Video {
         this.renderVideo(record)
       }
       if(record.state != 'ready' && record.state != 'initialized') {
-        setTimeout(this.fetch.bind(this), 5000)
+        setTimeout(this.fetch.bind(this), this.refresh_seconds * 1000)
       }
     })
   }

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

@@ -0,0 +1,17 @@
+if(window.Resizing === undefined) { window.Resizing = {} }
+if(window.Resizing.Rails === undefined) { window.Resizing.Rails = {} }
+
+class VideoLoader {
+  constructor() {
+    window.addEventListener('DOMContentLoaded', (event)=> {
+      let elements = document.querySelectorAll('[data-video-url]')
+      elements.forEach(elem => {
+        let url = elem.getAttribute('data-video-url')
+        let fetcher = new Resizing.Rails.Video(url, elem)
+        fetcher.fetch()
+      })
+    })
+  }
+}
+
+Resizing.Rails.VideoLoader = VideoLoader

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

@@ -1,4 +1,19 @@
 module Resizing::Rails
   module VideosHelper
+    def video_file_field_tag name, options = {}
+      raise ArgumentError, "video_file_field_tag requires Hash as option arguments" unless options.is_a? Hash
+
+      options = options.merge(only_path: true)
+      args['data-video-prepare-url'] = prepare_video_url(options)
+      file_field_tag name
+    end
+
+    def resizing_prepare_video_url(*args)
+      Resizing::Rails::Engine.routes.url_helpers.prepare_videos_url(*args)
+    end
+
+    def resizing_video_tag resizing_rails_video
+      raw "<div class='video' data-video-url=#{resizing_rails_video.data_self_url}></div>"
+    end
   end
 end

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

@@ -21,25 +21,31 @@ h1 動画詳細
           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>
+      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>
-          document.addEventListner('DOMContentLoaded', function () {
+          window.addEventListner('DOMContentLoaded', function () {
             video = new Resizing.Rails.Video("#{@video.data_self_url}", document.querySelector('video-#{@video.id}'))
             video.fetch()
           })
           </script>
-
-      p
-        | ※スタイルシートとJavaScriptの読み込みが必要です。
-      b 例：
-      br
-      | app/views/layouts/application.html.slim へ以下を追加
-      pre.bg-light
-        code
-          | = stylesheet_link_tag 'resizing/rails', media: 'all'
-            = javascript_include_tag "resizing/rails"
+      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() {

data/lib/resizing/rails/version.rb

@@ -1,5 +1,5 @@
 module Resizing
   module Rails
-    VERSION = '0.2.0'
+    VERSION = '0.3.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: resizing-rails
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Junichiro Kasuya
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-07 00:00:00.000000000 Z
+date: 2021-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -70,16 +70,16 @@ dependencies:
   name: bootstrap
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 5.0.0.beta1
+        version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
-        version: 5.0.0.beta1
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: sassc
   requirement: !ruby/object:Gem::Requirement
@@ -112,6 +112,7 @@ files:
 - 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_loader.js
 - app/assets/javascripts/resizing/rails/video_uploader.js
 - app/assets/javascripts/resizing/rails/videojs/7.8.2/video.min.js
 - app/assets/stylesheets/resizing/rails.scss