Merge pull request #527 from Deeksha1502/github-artifact-url

SB-I212: Added index.html and style.css

Author: pallakartheekreddy

player/public/coreplugins/org.ekstep.overlay-1.0/renderer/controller/overlay.js

@@ -105,6 +105,21 @@
 
     <script type="text/javascript" src="renderer/manager/AudioManager.js"></script>
     <!-- endinjector -->
+    <script>
+        setTimeout(() => {
+        let globalObj = this.window;
+        let globalConfig = globalObj?.GlobalContext || {};
+        if (globalConfig?.config?.dir === 'rtl') {
+            document.body.setAttribute('dir', 'rtl');
+        } 
+        else if(window.parent.ecEditor && typeof window.parent.ecEditor.getConfig === 'function' && window.parent.ecEditor.getConfig('dir')){
+            document.body.setAttribute('dir', window.parent.ecEditor.getConfig('dir'));
+        }
+        else {
+            document.body.setAttribute('dir', 'ltr');
+        }
+        }, 3000);
+     </script>
 </body>
 
 </html>

player/public/index.html

@@ -42,7 +42,19 @@ var splashScreen = {
 		EkstepRendererAPI.addEventListener("plugin:load:success", splashScreen.pluginLoadSuccess)
 	},
 	createHtml: function () {
-		var html = "<img src=\"" + splashScreen.config.bgImage + "\" class=\"gc-loader-img\" onerror=\"this.style.display='none'\" /><P class=\"splashText\" id=\"splashTextId\"> Loading your content</p><div id=\"progressArea\"><div id=\"progressBar\"></div><p id=\"progressCount\" class=\"font-lato gc-loader-prog\"></p></div><a href=\"" + splashScreen.config.webLink + "\" target=\"_blank\"><div id=\"splashScreen\" class=\"splashScreen\"> <img src=\"" + splashScreen.config.icon + "\" class=\"splash-icon \" onerror=\"this.style.display='none'\" /> <span>" + splashScreen.config.text + "</span> </div></a>"
+		const loadingText = (
+			EkstepRendererAPI.getGlobalConfig().context.resourceBundles ||
+			(
+				window.parent &&
+				window.parent.ecEditor &&
+				window.parent.ecEditor.getConfig &&
+				window.parent.ecEditor.getConfig('resourceBundles') &&
+				window.parent.ecEditor.getConfig('resourceBundles').frmelmnts &&
+				window.parent.ecEditor.getConfig('resourceBundles').frmelmnts.lbl
+			) ||
+			{}
+		).loadingYourContent || "Loading your content";
+		var html = "<img src=\"" + splashScreen.config.bgImage + "\" class=\"gc-loader-img\" onerror=\"this.style.display='none'\" /><P class=\"splashText\" id=\"splashTextId\">" + loadingText + "</p><div id=\"progressArea\"><div id=\"progressBar\"></div><p id=\"progressCount\" class=\"font-lato gc-loader-prog\"></p></div><a href=\"" + splashScreen.config.webLink + "\" target=\"_blank\"><div id=\"splashScreen\" class=\"splashScreen\"> <img src=\"" + splashScreen.config.icon + "\" class=\"splash-icon \" onerror=\"this.style.display='none'\" /> <span>" + splashScreen.config.text + "</span> </div></a>"
 		return html
 	},
 

player/public/js/splashScreen.js

@@ -216,11 +216,12 @@ ion-popover-view.fit ion-content {
 
 .gc-menu {
     font-size: 1.8vw;
-    position: absolute;
+    position: fixed;
     /*text-transform: uppercase;*/
     width: 35%;
     height: 100%;
     top: 0;
+    left: 0;
     margin-left: -35%;
 }
 
@@ -1800,9 +1801,10 @@ body {
 }
 
 #progressArea {
-    position: relative;
-    left: 25vw;
-    top: 50vh;
+    position: absolute; /* or fixed if you want to pin it to viewport */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
     width: 50vw;
     height: 2em;
     text-align: center;
@@ -1813,7 +1815,7 @@ body {
 .gc-loader-prog {
     position: absolute;
     height: 2em;
-    color: #000;
+    color: white;
     width: 100%;
     font-weight: bold;
     overflow: hidden;