1.0.2

BryceCanyonCounty · Oct 22, 2022 · 747179e · 747179e
1 parent 5b2c6e5
commit 747179e
Show file tree

Hide file tree

Showing 6 changed files with 173 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ Demos:
 - Web Image Support
 - Local Audio Support
 - 3 preset CSS Loading Icons
+- Custom loadscreen minimum duration
+- Time elapsed
 
 ### Install
 * Download this repo
@@ -36,6 +38,4 @@ Demos:
 
 ## Coming Soon!
 - 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
diff --git a/config.js b/config.js
@@ -13,6 +13,14 @@ CONFIG = {
     audio: false,
     audiosrc: 'nui://bcc-loadscreen/ui/assets/music.mp3',
     audiovolume: 0.5, //between 0-1
+
+    timeelapsed: true,
+
+    loadtime: {
+        minimum: 0, //miliseconds
+        skip: false,
+        lang: "Press Space to Skip Load Screen"
+    },
 
     loading: {
         active: true, //Do you want the loading icon to show

diff --git a/fxmanifest.lua b/fxmanifest.lua
@@ -18,8 +18,9 @@ files {
 
 loadscreen 'ui/index.html'
 ui_page 'ui/index.html'
-loadscreen_cursor 'no'
 
-version '1.0.1'
+loadscreen_cursor 'yes'
+
+version '1.0.2'
 
 resource_manifest_version '77731fab-63ca-442c-a67b-abc70f28dfa5'
diff --git a/ui/app.js b/ui/app.js
@@ -4,70 +4,118 @@ createApp({
   data() {
     return {
       visible: true,
-      timer : null,
-      config: CONFIG
+      timer: null,
+      config: CONFIG,
+      override: false,
+      timeout: null,
+      done: false,
+      loading: false,
+      elapsedtime: null,
+      elapsedtimer: null,
+      starttime: null
     };
   },
   mounted() {
-    window.addEventListener("message", function (e) {
-      console.log(e.data.eventName);
-    });
+    this.done = false
+    this.loading = true
 
-    this.timer = setInterval(() => {
-      fetch(`https://bcc-loadscreen-helper/isgameinitiated`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json; charset=UTF-8",
-        },
-      }).then(resp => resp.json()).then(resp => {
-        if(resp.online) {
-          this.visible = false
-          clearInterval(this.timer)
-        }
-      });
+    this.timeout = setTimeout(() => {
+      this.done = true
+    }, this.config.loadtime.minimum)
 
-      if (this.config.video) {
-        var vid = document.getElementById("videocomp");
-        vid.volume = this.config.videovolume;
-      }
+    this.startCallback()
+
+    this.starttime = Date.now()
+
+    if (this.config.timeelapsed) {
+      this.elapsedtimer = setInterval(() => {
+        let d = Date.now() - this.starttime
 
-      if (this.config.audio) {
-        var vid = document.getElementById("audiocomp");
-        vid.volume = this.config.audiovolume;
-      }
-    }, 20000);
+        var msec = d;
+
+        var hour = Math.floor(msec / 1000 / 60 / 60);
+        msec -= hour * 1000 * 60 * 60;
+        var min = Math.floor(msec / 1000 / 60);
+        msec -= min * 1000 * 60;
+        var sec = Math.floor(msec / 1000);
+        msec -= sec * 1000;
+
+
+        this.elapsedtime = `${hour != 0 ? hour + 'h ' : ''}${min != 0 ? min + 'm ' : ''}${sec}s`
+      }, 1000);
+    }
+
+    // Set volume for the video
+    if (this.config.video) {
+      var vid = document.getElementById("videocomp");
+      vid.volume = this.config.videovolume;
+    }
+
+    // Set volume for the audio
+    if (this.config.audio) {
+      var vid = document.getElementById("audiocomp");
+      vid.volume = this.config.audiovolume;
+    }
   },
   destroyed() {
     window.removeEventListener("message");
 
-    this.yt = false
-    this.image = false
+    this.yt = false;
+    this.image = false;
 
-    var iframe = element.querySelector( 'iframe');
-    var video = element.querySelector( 'video' );
-    if ( iframe ) {
+    var iframe = element.querySelector("iframe");
+    var video = element.querySelector("video");
+    if (iframe) {
       var iframeSrc = iframe.src;
       iframe.src = iframeSrc;
     }
-    if ( video ) {
+    if (video) {
       video.pause();
     }
   },
   computed: {
     cssvars() {
       return {
-        '--color': '#fff',
-        '--backgroundcolor': this.config.backgroundcolor,
-        '--backgroundimage': this.config.imagesource,
-        '--loadingcolor': this.config.loading.color
-      }
-    }
+        "--color": "#fff",
+        "--backgroundcolor": this.config.backgroundcolor,
+        "--backgroundimage": this.config.imagesource,
+        "--loadingcolor": this.config.loading.color,
+      };
+    },
   },
   methods: {
     onMessage(event) {
       if (event.data.action === "toggle") {
         this.visible = !this.visible;
       }
     },
+    startCallback() {
+      this.timer = setInterval(() => {
+        fetch(`https://bcc-loadscreen-helper/isgameinitiated`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json; charset=UTF-8",
+          },
+        })
+          .then((resp) => resp.json())
+          .then((resp) => {
+            if (resp.online) {
+              this.loading = false
+              if (this.done) {
+                this.visible = false;
+                clearInterval(this.timer);
+              }
+            }
+
+            if (resp.spacebar == true && this.config.loadtime.skip) {
+                this.loading = false
+                this.visible = false;
+                clearInterval(this.timer);
+                clearTimeout(this.timeout)
+            }
+          })
+          .catch(e => {})
+      }, 10000);
+    },
   },
 }).mount("#app");
diff --git a/ui/index.html b/ui/index.html
@@ -6,32 +6,62 @@
   <body>
     <div id="app">
       <div class="wrapper background" :style="cssvars" v-if="config.image && visible">
-        <div class="loader" v-if="config.loading.active">
-          <div class="loader1"  v-if="config.loading.icon == 'linedots'">
+        <div class="loader">
+          <div class="elapsed" v-if="config.timeelapsed">{{elapsedtime}}</div>
+          <div class="skip" v-if="loading == false && config.loadtime.skip "> {{ config.loadtime.lang }} </div>
+          <div class="loader1"  v-if="config.loading.icon == 'linedots' && config.loading.active">
             <span></span>
             <span></span>
             <span></span>
             <span></span>
             <span></span>
           </div>
-          <div class="loader3"  v-if="config.loading.icon == 'fadedots'">
+          <div class="loader3"  v-if="config.loading.icon == 'fadedots' && config.loading.active">
             <span></span>
             <span></span>
           </div>
-          <div class="loader4"  v-if="config.loading.icon == 'circle'"></div>
+          <div class="loader4"  v-if="config.loading.icon == 'circle' && config.loading.active"></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>
+        <video id="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 class="elapsed" v-if="config.timeelapsed">{{elapsedtime}}</div>
+        <div class="skip" v-if="loading == false && config.loadtime.skip"> {{ config.loadtime.lang }} </div>
+        <div class="loader1"  v-if="config.loading.icon == 'linedots' && config.loading.active">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <div class="loader3"  v-if="config.loading.icon == 'fadedots' && config.loading.active">
+          <span></span>
+          <span></span>
+        </div>
+        <div class="loader4"  v-if="config.loading.icon == 'circle' && config.loading.active"></div>
       </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 class="elapsed" v-if="config.timeelapsed">{{elapsedtime}}</div>
+        <div class="skip" v-if="loading == false && config.loadtime.skip"> {{ config.loadtime.lang }} </div>
+        <div class="loader1"  v-if="config.loading.icon == 'linedots' && config.loading.active">
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <div class="loader3"  v-if="config.loading.icon == 'fadedots' && config.loading.active">
+          <span></span>
+          <span></span>
+        </div>
+        <div class="loader4"  v-if="config.loading.icon == 'circle' && config.loading.active"></div>
       </div>
       <div class="wrapper" :style="cssvars" v-if="config.yt && visible">
         <iframe id="video" 
@@ -40,6 +70,8 @@
         controls="0"
         frameborder="0"
         allowfullscreen></iframe>
+        <div class="elapsed" v-if="config.timeelapsed">{{elapsedtime}}</div>
+        <div class="skip" v-if="loading == false && config.loadtime.skip"> {{ config.loadtime.lang }} </div>
         <div class="loader" v-if="config.loading.active">
           <div class="loader1"  v-if="config.loading.icon == 'linedots'">
             <span></span>

diff --git a/ui/style.css b/ui/style.css
@@ -1,3 +1,5 @@
+/* TODO: Break this file into a few different css files */
+
 @font-face {
   font-family: rdr;
   src: url(assets/fonts/rdrlino-regular-webfont.woff);
@@ -25,6 +27,29 @@ video {
   object-fit: cover;
 }
 
+.loader {
+  position: absolute;
+  bottom: 60px;
+  right: 60px;
+  left: 60px;
+}
+
+.elapsed {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  color: white;
+}
+
+.skip {
+  font-size: 30px;
+  color: white;
+  display: inline-block;
+  vertical-align: middle;
+  width: 80%;
+  margin: 0 auto;
+}
+
 .background {
   background-color: var(--backgroundcolor);
   background-size: cover;
@@ -49,11 +74,14 @@ video {
   z-index: 999999;
 }
 
-
 .loader1 {
   display:inline-block;
   font-size:0px;
   padding:0px;
+  vertical-align: middle;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
 }
 .loader1 span {
   vertical-align:middle;
@@ -108,19 +136,16 @@ video {
   to {-webkit-transform: scale(1, 1);}
 }
 
-.loader {
-  position: absolute;
-  bottom: 60px;
-  right: 60px;
-}
-
-
 .loader3 {
   width:50px;
   height:50px;
   display:inline-block;
   padding:0px;
   text-align:left;
+  vertical-align: middle;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
 }
 .loader3 span {
   position:absolute;
@@ -151,6 +176,7 @@ video {
   width:45px;
   height:45px;
   display:inline-block;
+  vertical-align: middle;
   padding:0px;
   border-radius:100%;
   border:5px solid;
@@ -160,6 +186,9 @@ video {
   border-right-color:rgba(255,255,255, 0.3);
   -webkit-animation: loader4 1s ease-in-out infinite;
   animation: loader4 1s ease-in-out infinite;
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
 }
 @keyframes loader4 {
   from {transform: rotate(0deg);}