1.0.1

README.md

@@ -12,9 +12,11 @@ Demos:
 [![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/g0xXNPZvI5w/0.jpg)](https://www.youtube.com/watch?v=g0xXNPZvI5w)
 
 ## Features
-- Youtube video support
+- Local Video Support
+- Youtube video Support
 - Local Image Support
 - Web Image Support
+- Local Audio Support
 - 3 preset CSS Loading Icons
 
 ### Install
@@ -33,5 +35,7 @@ Demos:
 - MUST HAVE [**BCC-LOADINGSCREEN-HELPER**](https://github.com/BryceCanyonCounty/bcc-loadscreen-helper)
 
 ## Coming Soon!
-- Add Local Video File Support
-- Add audio file support
+- Disable the default redm loadscreen audio so that the custom video/audio is played by itself.
+- Mute sound with spacebar
+- Current time vs Time elapsed 
+- More loading icons

config.js

@@ -1,9 +1,19 @@
 CONFIG = {
-    image: true, // If you want an image background make this flag true (but make sure yt is false)
-    yt: false, //If you want a youtube video make this flag true (but make sure image is false)
-    embed: "http://www.youtube.com/embed/4KPpWQ7XVO8?autoplay=1&loop=1&controls=0&mute=1", //Embed link to Youtube
+    image: true, // If you want an image background make this flag true (but make sure yt/video is false)
     imagesource: "url('nui://bcc-loadscreen/ui/assets/background.png')",
     backgroundcolor: "#4d4d4d",
+
+    yt: false, //If you want a youtube video make this flag true (but make sure image/video is false)
+    embed: "http://www.youtube.com/embed/4KPpWQ7XVO8?autoplay=1&loop=1&controls=0&mute=1", //Embed link to Youtube
+
+    video: false, //If you want a local video make this flag true (but make sure image/yt is false)
+    videosrc: "nui://bcc-loadscreen/ui/assets/video.mp4",
+    videovolume: 0.0, //between 0-1
+
+    audio: false,
+    audiosrc: 'nui://bcc-loadscreen/ui/assets/music.mp3',
+    audiovolume: 0.5, //between 0-1
+
     loading: {
         active: true, //Do you want the loading icon to show
         icon: "fadedots", // 'fadedots', 'linedots', 'circle'

fxmanifest.lua

@@ -20,6 +20,6 @@ loadscreen 'ui/index.html'
 ui_page 'ui/index.html'
 loadscreen_cursor 'no'
 
-version '1.0.0'
+version '1.0.1'
 
 resource_manifest_version '77731fab-63ca-442c-a67b-abc70f28dfa5'

ui/app.js

@@ -1,7 +1,4 @@
 const { createApp } = Vue;
-window.addEventListener("message", function (e) {
-  console.log(e.data.eventName);
-});
 
 createApp({
   data() {
@@ -12,10 +9,10 @@ createApp({
     };
   },
   mounted() {
-    console.log(CONFIG)
     window.addEventListener("message", function (e) {
       console.log(e.data.eventName);
     });
+
     this.timer = setInterval(() => {
       fetch(`https://bcc-loadscreen-helper/isgameinitiated`, {
         method: "POST",
@@ -28,6 +25,16 @@ createApp({
           clearInterval(this.timer)
         }
       });
+
+      if (this.config.video) {
+        var vid = document.getElementById("videocomp");
+        vid.volume = this.config.videovolume;
+      }
+
+      if (this.config.audio) {
+        var vid = document.getElementById("audiocomp");
+        vid.volume = this.config.audiovolume;
+      }
     }, 20000);
   },
   destroyed() {

ui/index.html

@@ -21,11 +21,23 @@
           <div class="loader4"  v-if="config.loading.icon == 'circle'"></div>
         </div>
       </div>
+      <div class="wrapper" :style="cssvars" v-if="config.video && visible">
+        <video if="videocomp" width="320" height="240" controls="false" autoplay playsinline loop>
+          <source :src="config.videosrc" type="video/mp4">
+          Your browser does not support the video tag.
+        </video>
+      </div>
+      <div class="wrapper" :style="cssvars" v-if="config.audio && visible">
+        <audio autoplay id="audiocomp">
+          <source :src="config.audiosrc" type="audio/mpeg">
+          Your browser does not support the audio element.
+        </audio>
+      </div>
       <div class="wrapper" :style="cssvars" v-if="config.yt && visible">
         <iframe id="video" 
         width="100%" height="100%" 
         :src="config.embed"
-        controls="0" allowfullscreen
+        controls="0"
         frameborder="0"
         allowfullscreen></iframe>
         <div class="loader" v-if="config.loading.active">

ui/style.css

@@ -19,6 +19,12 @@ body {
   color: var(--color);
 }
 
+video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
 .background {
   background-color: var(--backgroundcolor);
   background-size: cover;