Added random image and rotation

Author: AndrewR3K

config.js

@@ -6,6 +6,20 @@ CONFIG = {
         active: true, // If you want an image background make this flag true (but make sure youtube/video is false)
         source: "url('nui://bcc-loadscreen/ui/assets/background.png')",
         backgroundcolor: "#4d4d4d",
+        random: {
+            active: false, //If set to true, a random image from Sources will be chosed on player connection. Warning: The image.source will be ignored if set to true.
+            sources: [
+                "url('nui://bcc-loadscreen/ui/assets/background.png')",
+                "url('nui://bcc-loadscreen/ui/assets/images/background1.jpg')",
+                "url('nui://bcc-loadscreen/ui/assets/images/background2.jpg')",
+                "url('nui://bcc-loadscreen/ui/assets/images/background3.jpeg')"
+            ],
+            rotate: {
+                active: false, // If true, the loadscreen will rotate between images every x seconds
+                sequenced: false,  // Images show in order, if false, random image will be chosen each time.
+                time: 5, // Roate image every x seconds
+            }
+        },
     },
     video: {
         active: false, //If you want a local video make this flag true (but make sure image/youtube is false)

fxmanifest.lua

@@ -15,9 +15,10 @@ files {
     'ui/assets/*',
     'ui/assets/fonts/*',
     'ui/assets/styles/*',
+    'ui/assets/images/*',
     'config.js'
 }
 
 ui_page 'ui/index.html'
 
-version '1.1.2'
+version '1.1.3'

ui/app.js

@@ -17,7 +17,11 @@ let vueApp = createApp({
       elapsedtime: null,
       elapsedtimer: null,
       starttime: null,
-      player: null
+      player: null,
+      backgroundimage: null,
+      rotations: {
+        interval: null,
+      },
     };
   },
   mounted() {
@@ -64,6 +68,41 @@ let vueApp = createApp({
       var vid = document.getElementById("audiocomp");
       vid.volume = this.config.audio.volume;
     }
+
+    this.backgroundimage = this.config.image.source;
+
+    if (this.config.image.random.rotate.active == true) {
+      let position = 0;
+
+      if (this.config.image.random.rotate.sequenced !== true) {
+        let min = Math.ceil(0);
+        let max = Math.floor(this.config.image.random.sources.length - 1);
+        position = Math.floor(Math.random() * (max - min + 1)) + min;
+      }
+
+      this.backgroundimage = this.config.image.random.sources[position];
+
+      this.rotations.interval = setInterval(() => {
+        if (this.config.image.random.rotate.sequenced == true) {
+          if (position < this.config.image.random.sources.length - 1) {
+            position++;
+          } else {
+            position = 0;
+          }
+          this.backgroundimage = this.config.image.random.sources[position];
+        } else {
+          let min = Math.ceil(0);
+          let max = Math.floor(this.config.image.random.sources.length - 1);
+          let randindex = Math.floor(Math.random() * (max - min + 1)) + min;
+          this.backgroundimage = this.config.image.random.sources[randindex];
+        }
+      }, this.config.image.random.rotate.time * 1000);
+    } else if (this.config.image.random.active == true) {
+      let min = Math.ceil(0);
+      let max = Math.floor(this.config.image.random.sources.length - 1);
+      let randindex = Math.floor(Math.random() * (max - min + 1)) + min;
+      this.backgroundimage = this.config.image.random.sources[randindex];
+    }
   },
   destroyed() {
     this.yt = false;
@@ -78,13 +117,17 @@ let vueApp = createApp({
     if (video) {
       video.pause();
     }
+
+    if (this.rotations.interval) {
+      clearInterval(this.rotations.interval);
+    }
   },
   computed: {
     cssvars() {
       return {
         "--color": "#fff",
         "--backgroundcolor": this.config.image.backgroundcolor,
-        "--backgroundimage": this.config.image.source,
+        "--backgroundimage": this.backgroundimage || this.config.image.source,
         "--loadingcolor": this.config.loading.color,
       };
     },
@@ -99,15 +142,15 @@ let vueApp = createApp({
           height: window.innerHeight,
           videoId: this.config.youtube.source,
           playerVars: {
-            'playsinline': 1,
-            'controls': 0,
-            'mute': this.config.youtube.mute,
-            'autoplay': 1
+            playsinline: 1,
+            controls: 0,
+            mute: this.config.youtube.mute,
+            autoplay: 1,
           },
           events: {
             onReady: that.onPlayerReady,
-            onStateChange: that.onPlayerStateChange
-          }
+            onStateChange: that.onPlayerStateChange,
+          },
         });
       }
     },
@@ -118,7 +161,7 @@ let vueApp = createApp({
     onPlayerStateChange(evt) {
       if (evt.data === 0) {
         if (this.config.youtube.looped) {
-          this.player.playVideo(); 
+          this.player.playVideo();
         } else if (this.visible) {
           this.visible = false;
           clearInterval(this.timer);
@@ -127,12 +170,17 @@ let vueApp = createApp({
     },
     startCallback() {
       this.timer = setInterval(() => {
-        fetch(this.config.feathercore.active ? `https://feather-core/isgameinitiated` : `https://bcc-loadscreen-helper/isgameinitiated`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json; charset=UTF-8",
-          },
-        })
+        fetch(
+          this.config.feathercore.active
+            ? `https://feather-core/isgameinitiated`
+            : `https://bcc-loadscreen-helper/isgameinitiated`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json; charset=UTF-8",
+            },
+          }
+        )
           .then((resp) => resp.json())
           .then((resp) => {
             this.loading = false;
@@ -142,8 +190,12 @@ let vueApp = createApp({
             } else if (resp.online) {
               this.loading = false;
 
-              let isvideolooped = this.config.video.looped == false && this.config.video.active == true
-              let isYTlooped = this.config.youtube.looped == false && this.config.youtube.active == true
+              let isvideolooped =
+                this.config.video.looped == false &&
+                this.config.video.active == true;
+              let isYTlooped =
+                this.config.youtube.looped == false &&
+                this.config.youtube.active == true;
 
               if (!(isvideolooped || isYTlooped)) {
                 this.visible = false;
@@ -159,5 +211,5 @@ let vueApp = createApp({
 
 // Youtube API Shim for vue
 window.onYouTubeIframeAPIReady = () => {
-  vueApp.initYoutube()
+  vueApp.initYoutube();
 };

ui/assets/images/background1.jpg

@@ -50,6 +50,8 @@ video {
   background-image: var(--backgroundimage);
   background-repeat: no-repeat;
   background-position: center;
+  -webkit-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
 }
 
 .wrapper {