fix(deps): update dependency video.js to v8.23.3

.claude/settings.local.json

@@ -1,6 +1,7 @@
 {
   "permissions": {
     "allow": [
+      "Bash(find:*)",
       "WebFetch(domain:github.com)",
       "Bash(grep:*)",
       "Bash(gh pr checkout:*)",

app/javascript/packs/video_player.js

@@ -0,0 +1,18 @@
+import videojs from 'video.js'
+import 'video.js/dist/video-js.css'
+
+// Make videojs available globally for inline scripts
+window.videojs = videojs
+
+// Auto-initialize video.js players on page load
+document.addEventListener('DOMContentLoaded', function() {
+  // Initialize any video elements with video-js class
+  const videoElements = document.querySelectorAll('video.video-js')
+  videoElements.forEach(function(element) {
+    if (!element.hasAttribute('data-vjs-player')) {
+      videojs(element)
+    }
+  })
+})
+
+export default videojs

app/views/admin/streamings/_preview.html.erb

@@ -12,7 +12,7 @@
         <video
           id="my-player"
           class="video-js video-js vjs-16-9 vjs-big-play-centered"
-          data-setup='{"fluid": true, "liveui": true,   "enableWorker": true,  "lowLatencyMode": true  "backBufferLength": 1}'
+          data-setup='{"fluid": true, "liveui": true, "enableWorker": true, "lowLatencyMode": true, "backBufferLength": 1}'
           controls
           preload="auto"
         >

app/views/layouts/application.html.erb

@@ -12,14 +12,13 @@
     <link rel="stylesheet" href="https://use.typekit.net/ntd4lbp.css">
     <%= stylesheet_link_tag event_js_path, media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag event_js_path, 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'video_player', 'data-turbolinks-track': 'reload' %>
   <meta name="turbo-cache-control" content="no-cache">
 
     <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
 
     <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" rel="stylesheet" />
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
 
     <meta property="og:site_name" content="<%= site_name %>" />
 

app/views/layouts/no_headers.html.erb

@@ -12,14 +12,13 @@
     <link rel="stylesheet" href="https://use.typekit.net/ntd4lbp.css">
     <%= stylesheet_link_tag event_js_path, media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag event_js_path, 'data-turbolinks-track': 'reload' %>
+    <%= javascript_include_tag 'video_player', 'data-turbolinks-track': 'reload' %>
   <meta name="turbo-cache-control" content="no-cache">
 
     <script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
 
     <link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" rel="stylesheet" />
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
 
     <meta property="og:site_name" content="<%= site_name %>" />
 

package.json

@@ -28,7 +28,7 @@
         "sass": "^1.77.6",
         "sass-loader": "^16.0.0",
         "sortablejs": "^1.15.3",
-        "video.js": "8.5.2",
+        "video.js": "8.23.3",
         "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
         "webpack-remove-empty-scripts": "^1.0.4"

webpack.config.js

@@ -71,6 +71,9 @@ module.exports = {
     ],
     'tracks/track_channel': [
       "./app/javascript/packs/tracks/track_channel.js",
+    ],
+    video_player: [
+      "./app/javascript/packs/video_player.js",
     ]
   },
   module: {