Load mediaelement player for videos #2634

assets/js/legacy/app.js

@@ -53,7 +53,7 @@ window.setContentFromEditor = function (id, content) {
 // global.frameReady = frameReady;
 // window.frameReady = frameReady;
 
-require("./vendor")
+import "./vendor"
 
 global.moment = moment
 moment.locale(locale)
@@ -65,7 +65,6 @@ require("bootstrap-daterangepicker/daterangepicker.js")
 
 require("blueimp-file-upload")
 require("blueimp-load-image")
-import("mediaelement")
 require("multiselect-two-sides")
 require("datepair.js")
 require("timepicker")
@@ -355,18 +354,6 @@ $(function () {
     $("#" + inputId).filterByText($("#" + inputId + "-filter"))
   })
 
-  // Mediaelement
-  //if ( {{ show_media_element }} == 1) {
-  //     $('video:not(.skip), audio:not(.skip)').mediaelementplayer({
-  //         pluginPath: _p.web + 'web/assets/mediaelement/build/',
-  //         //renderers: ['html5', 'flash_video', 'native_flv'],
-  //         features: ['{{ video_features }}'],
-  //         success: function(mediaElement, originalNode, instance) {
-  //         },
-  //         vrPath: _p.web + 'web/assets/vrview/build/vrview.js'
-  //     });
-  //}
-
   // Table highlight.
   $("form .data_table input:checkbox").click(function () {
     if ($(this).is(":checked")) {

assets/js/legacy/vendor.js

@@ -1,4 +1,3 @@
-// require('mediaelement');
 // import('multiselect-two-sides');
 
 require("image-map-resizer/js/imageMapResizer.js")

assets/vue/App.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup>
-import { computed, onUpdated, provide, ref, watch, watchEffect } from "vue"
+import { computed, onMounted, onUpdated, provide, ref, watch, watchEffect } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { DefaultApolloClient } from "@vue/apollo-composable"
 import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client/core"
@@ -55,6 +55,7 @@ import { useI18n } from "vue-i18n"
 import { customVueTemplateEnabled } from "./config/env"
 import CustomDashboardLayout from "../../var/vue_templates/components/layout/DashboardLayout.vue"
 import EmptyLayout from "./components/layout/EmptyLayout.vue"
+import { useMediaElementLoader } from "./composables/mediaElementLoader"
 
 const apolloClient = new ApolloClient({
   link: createHttpLink({
@@ -69,6 +70,8 @@ const route = useRoute()
 const router = useRouter()
 const i18n = useI18n()
 
+const { loader: mejsLoader } = useMediaElementLoader()
+
 const layout = computed(() => {
   if (route.meta.emptyLayout) {
     return EmptyLayout
@@ -194,4 +197,8 @@ watch(
     inmediate: true,
   },
 )
+
+onMounted(() => {
+  mejsLoader()
+})
 </script>

assets/vue/composables/mediaElementLoader.js

@@ -0,0 +1,65 @@
+import "mediaelement/build/mediaelementplayer.min.css"
+import "mediaelement/full"
+
+const videoSelector = "video:not(.skip), audio:not(.skip)"
+
+const mejsOptions = {
+  iconSprite: "/build/libs/mediaelement/mejs-controls.svg",
+}
+
+function newVideosCallback(newVideo) {
+  const attrId = newVideo.getAttribute("id")
+
+  if (attrId && attrId.startsWith("mejs")) {
+    return
+  }
+
+  // eslint-disable-next-line no-undef
+  new MediaElementPlayer(newVideo, mejsOptions)
+}
+
+function addedNodesCallback(newNode) {
+  if (!newNode.querySelectorAll) {
+    return
+  }
+
+  const newVideos = newNode.querySelectorAll(videoSelector)
+
+  if (!newVideos.length) {
+    return
+  }
+
+  newVideos.forEach(newVideosCallback)
+}
+
+function observerCallback(mutationList) {
+  for (const { type, addedNodes } of mutationList) {
+    if ("childList" !== type) {
+      continue
+    }
+
+    addedNodes.forEach(addedNodesCallback)
+  }
+}
+
+function loader() {
+  const observer = new MutationObserver(observerCallback)
+
+  observer.observe(document.querySelector("body"), {
+    childList: true,
+    subtree: true,
+  })
+}
+
+function domLoader() {
+  document.addEventListener("DOMContentLoaded", function () {
+    loader()
+  })
+}
+
+export function useMediaElementLoader() {
+  return {
+    loader,
+    domLoader,
+  }
+}