@antmedia/web_player 2.11.2 → 2.11.11

package/src/web_player.js

@@ -1,6 +1,6 @@
 import { getUrlParameter } from "@antmedia/webrtc_adaptor/dist/fetch.stream";
 import { Logger } from "@antmedia/webrtc_adaptor/dist/loglevel.min";
-import  { UpArrow } from "./icons/images";
+import { UpArrow } from "./icons/images";
 
 export const STATIC_VIDEO_HTML =  "<video id='video-player' class='video-js vjs-default-skin vjs-big-play-centered' controls playsinline></video>";
 
@@ -14,6 +14,8 @@ const PTZ_ZOOM_TEXT_BUTTON_ID = "zoom-text";
 
 export class WebPlayer {
 
+    static PLAYER_EVENTS = ['abort','canplay','canplaythrough','durationchange','emptied','ended','error','loadeddata','loadedmetadata','loadstart','pause','play','playing','progress','ratechange','seeked','seeking','stalled','suspend','timeupdate','volumechange','waiting','enterpictureinpicture','leavepictureinpicture','fullscreenchange','resize','audioonlymodechange','audiopostermodechange','controlsdisabled','controlsenabled','debugon','debugoff','disablepictureinpicturechanged','dispose','enterFullWindow','error','exitFullWindow','firstplay','fullscreenerror','languagechange','loadedmetadata','loadstart','playerreset','playerresize','posterchange','ready','textdata','useractive','userinactive','usingcustomcontrols','usingnativecontrols'];
+
 	static DEFAULT_PLAY_ORDER = ["webrtc", "hls"];
 
 	static DEFAULT_PLAY_TYPE  =  ["mp4", "webm"];
@@ -95,6 +97,12 @@ export class WebPlayer {
      */
     mute = false;
 
+
+    /**
+     * controls: Toggles the visibility of player controls.
+     */
+    controls = true;
+
     /**
      * Force the Player to play with audio Auto Play might not work.
      */
@@ -213,6 +221,17 @@ export class WebPlayer {
      */
     isIPCamera;
 
+    /**
+     * Stream id of backup stream.
+     */
+    backupStreamId;
+
+    /**
+     * activeStreamId: is the stream id that is being played currently
+     * It can be streamID or backupStreamId
+     */
+    activeStreamId;
+
 
     constructor(configOrWindow, containerElement, placeHolderElement) {
 
@@ -234,6 +253,9 @@ export class WebPlayer {
         WebPlayer.LL_HLS_Folder = "ll-hls";
 
 		WebPlayer.VIDEO_PLAYER_ID = "video-player";
+
+        WebPlayer.PLAYER_EVENTS = ['abort','canplay','canplaythrough','durationchange','emptied','ended','error','loadeddata','loadedmetadata','loadstart','pause','play','playing','progress','ratechange','seeked','seeking','stalled','suspend','timeupdate','volumechange','waiting','enterpictureinpicture','leavepictureinpicture','fullscreenchange','resize','audioonlymodechange','audiopostermodechange','controlsdisabled','controlsenabled','debugon','debugoff','disablepictureinpicturechanged','dispose','enterFullWindow','error','exitFullWindow','firstplay','fullscreenerror','languagechange','loadedmetadata','loadstart','playerreset','playerresize','posterchange','ready','textdata','useractive','userinactive','usingcustomcontrols','usingnativecontrols'];
+
 		
 		// Initialize default values
         this.setDefaults();
@@ -271,6 +293,8 @@ export class WebPlayer {
             alert(message);
             throw new Error(message);
         }
+        //set the active stream id as stream id
+        this.activeStreamId = this.streamId;
         
         if (!this.httpBaseURL) 
         {
@@ -294,22 +318,21 @@ export class WebPlayer {
             path += appName 
 
             this.httpBaseURL = this.window.location.protocol + "//" + path;
-		    this.websocketURL = "ws://" + path + this.streamId + ".webrtc";
+		    this.websocketBaseURL = "ws://" + path;
 		
 		    if (this.window.location.protocol.startsWith("https")) {
-                this.websocketURL = this.websocketURL.replace("ws", "wss");
+                this.websocketBaseURL = this.websocketBaseURL.replace("ws", "wss");
 		    }
 	
         }
-        else if (!this.websocketURL) 
+        else if (!this.websocketBaseURL) 
         {
             //this is the case where web player gets inputs from config object
             if (!this.httpBaseURL.endsWith("/")) {
                 this.httpBaseURL += "/";
             }
 
-			this.websocketURL = this.httpBaseURL.replace("http", "ws");
-			this.websocketURL += this.streamId + ".webrtc"; 
+			this.websocketBaseURL = this.httpBaseURL.replace("http", "ws");
 		}
 
         this.dom = this.window.document;
@@ -382,7 +405,7 @@ export class WebPlayer {
         this.aScene = null;
         this.playerListener = null;
         this.webRTCDataListener = null;
-        this.websocketURL = null;
+        this.websocketBaseURL = null;
         this.httpBaseURL = null;
         this.videoHTMLContent = STATIC_VIDEO_HTML;
         this.videoPlayerId = "video-player";
@@ -398,6 +421,8 @@ export class WebPlayer {
         this.ptzMovement = "relative";
         this.restAPIPromise = null;
         this.isIPCamera = false;
+        this.playerEvents = WebPlayer.PLAYER_EVENTS
+        this.backupStreamId = null;
     }
     
     initializeFromUrlParams() {
@@ -456,6 +481,8 @@ export class WebPlayer {
 
         this.ptzMovement = getUrlParameter("ptzMovement", this.window.location.search) || this.ptzMovement;
 
+        this.backupStreamId = getUrlParameter("backupStreamId", this.window.location.search) || this.backupStreamId;
+
 	}
 
     loadWebRTCComponents() {
@@ -633,7 +660,7 @@ export class WebPlayer {
                     limitRenditionByPlayerDimensions: false
                 }
             },
-            controls: true,
+            controls: this.controls,
             class: 'video-js vjs-default-skin vjs-big-play-centered',
             muted: this.mute,
             preload: "auto",
@@ -641,22 +668,6 @@ export class WebPlayer {
 
         });
 
-        this.videojsPlayer.on('error', (e) => {
-            Logger.warn("There is an error in playback: ", e);
-            // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
-            if (!this.errorCalled) {
-                this.errorCalled = true;
-                setTimeout(() => {
-                    this.tryNextTech();
-                    this.errorCalled = false;
-                }, 2500)
-            }
-
-            if (this.playerListener != null) {
-                this.playerListener("error", e);
-            }
-        });
-
 		//webrtc specific events
 		if (extension == "webrtc") {
 
@@ -687,7 +698,7 @@ export class WebPlayer {
 	                * If getting codec incompatible or remote description error, it will redirect HLS player.
 	                */
 	                Logger.warn("notSetRemoteDescription error. Redirecting to HLS player.");
-	                this.playIfExists("hls");
+	                this.playIfExists("hls", this.activeStreamId);
 	            }
                 if (this.playerListener != null) {
                     this.playerListener("webrtc-error", errors);
@@ -762,82 +773,7 @@ export class WebPlayer {
             this.makeVideoJSVisibleWhenReady();
         }
 
-        this.videojsPlayer.on('ended', () => {
-            //reinit to play after it ends
-            Logger.warn("stream is ended")
-            this.setPlayerVisible(false);
-            //for webrtc, this event can be called by two reasons
-            //1. ice connection is not established, it means that there is a networking issug
-            //2. stream is ended
-            if (this.currentPlayType != "vod") {
-                //if it's vod, it means that stream is ended and no need to replay
-
-                if (this.iceConnected) {
-                    //if iceConnected is true, it means that stream is really ended for webrtc
-
-                    //initialize to play again if the publishing starts again
-                    this.playIfExists(this.playOrder[0]);
-                }
-                else if (this.currentPlayType == "hls") {
-                    //if it's hls, it means that stream is ended
-
-                    this.setPlayerVisible(false);
-                    if (this.playOrder[0] = "hls")
-                    {
-                        //do not play again if it's hls because it play last seconds again, let the server clear it
-                        setTimeout(() => {
-                            this.playIfExists(this.playOrder[0]);
-                        }, 10000);
-                    }
-                    else
-                    {
-                        this.playIfExists(this.playOrder[0]);
-                    }
-                    //TODO: what if the stream is hls vod then it always re-play
-                }
-                else {
-                    //if iceConnected is false, it means that there is a networking issue for webrtc
-                    this.tryNextTech();
-                }
-            }
-            if (this.playerListener != null) {
-                this.playerListener("ended");
-            }
-        });
-
-        //webrtc plugin sends play event. On the other hand, webrtc plugin sends ready event for every scenario.
-        //so no need to trust ready event for webrt play
-        this.videojsPlayer.on("play", () => {
-            this.setPlayerVisible(true);
-            if (this.playerListener != null) {
-                this.playerListener("play");
-            }
-
-            if(this.restJwt){
-                this.isIpCameraBroadcast();
-            }
-            else if (this.isIPCamera){
-                this.injectPtzElements();  
-            }
-        });
-
-        this.videojsPlayer.on("playing", () => {
-            if (this.playerListener != null) {
-                this.playerListener("playing");
-            }
-        });
-
-        this.videojsPlayer.on("timeupdate", () => {
-            if (this.playerListener != null) {
-                this.playerListener("timeupdate");
-            }
-        });
-
-        this.videojsPlayer.on("pause", () => {
-            if (this.playerListener != null) {
-                this.playerListener("pause");
-            }
-        });
+        this.listenPlayerEvents()
 
         this.iceConnected = false;
 
@@ -867,6 +803,111 @@ export class WebPlayer {
         }
     }
 
+    listenPlayerEvents() {
+        this.playerEvents.forEach(event => {
+            this.videojsPlayer.on(event, (eventData) => {
+                switch (event) {
+                    case 'play':
+                        this.setPlayerVisible(true);
+                        if (this.playerListener != null) {
+                            this.playerListener("play");
+                        }
+            
+                        if(this.restJwt){
+                            this.isIpCameraBroadcast();
+                        }
+                        else if (this.isIPCamera){
+                            this.injectPtzElements();  
+                        }
+                        break;
+                    case 'ended':
+                        //reinit to play after it ends
+                        Logger.warn("stream is ended")
+                        this.setPlayerVisible(false);
+                        //for webrtc, this event can be called by two reasons
+                        //1. ice connection is not established, it means that there is a networking issug
+                        //2. stream is ended
+                        if (this.currentPlayType != "vod") {
+                            //if it's vod, it means that stream is ended and no need to replay
+                
+                            if (this.iceConnected) {
+                                //if iceConnected is true, it means that stream is really ended for webrtc
+                
+                                //initialize to play again if the publishing starts again
+                                this.playIfExists(this.playOrder[0], this.activeStreamId);
+                            }
+                            else if (this.currentPlayType == "hls") {
+                                //if it's hls, it means that stream is ended
+                
+                                this.setPlayerVisible(false);
+                                if (this.playOrder[0] = "hls")
+                                {
+                                    //do not play again if it's hls because it play last seconds again, let the server clear it
+                                    setTimeout(() => {
+                                        this.playIfExists(this.playOrder[0], this.activeStreamId);
+                                    }, 10000);
+                                }
+                                else
+                                {
+                                    this.playIfExists(this.playOrder[0], this.activeStreamId);
+                                }
+                                //TODO: what if the stream is hls vod then it always re-play
+                            }
+                            else {
+                                //if iceConnected is false, it means that there is a networking issue for webrtc
+                                this.tryNextTech();
+                            }
+                        }
+                        if (this.playerListener != null) {
+                            this.playerListener(event);
+                        }
+                        break;
+                    case 'timeupdate':
+                        if (this.playerListener != null) {
+                            this.playerListener(event, eventData, { currentTime: this.videojsPlayer.currentTime() });
+                        }
+                        break;
+                    case 'progress':
+                        if (this.playerListener != null) {
+                            this.playerListener(event, eventData, { bufferedPercent: this.videojsPlayer.bufferedPercent() });
+                        }
+                        break;
+                    case 'volumechange':
+                        if (this.playerListener != null) {
+                            this.playerListener(event, eventData, { 
+                                volume: this.videojsPlayer.volume(),
+                                muted: this.videojsPlayer.muted()
+                            });
+                        }
+                        break;
+                    case 'ratechange':
+                        if (this.playerListener != null) {
+                            this.playerListener(event, eventData, { playbackRate: this.videojsPlayer.playbackRate() });
+                        }
+                        break;
+                    case 'error':
+                        Logger.warn("There is an error in playback: ", eventData);
+                        // We need to add this kind of check. If we don't add this kind of checkpoint, it will create an infinite loop
+                        if (!this.errorCalled) {
+                            this.errorCalled = true;
+                            setTimeout(() => {
+                                this.tryNextTech();
+                                this.errorCalled = false;
+                            }, 2500)
+                        }
+                        if(this.playerListener != null){
+                            this.playerListener("error", eventData)
+                        }
+                        break;
+                    default:
+                        if (this.playerListener != null) {
+                            this.playerListener(event, eventData);
+                        }
+                }
+            });
+        }); 
+    }
+
     listenForID3MetaData() {
         this.videojsPlayer.textTracks().on('addtrack', e => {
             const metadataTrack = Array.from(this.videojsPlayer.textTracks()).find(t => t.label === 'Timed Metadata');         
@@ -969,17 +1010,30 @@ export class WebPlayer {
 	        this.destroyDashPlayer();
 	        this.destroyVideoJSPlayer();
 	        this.setPlayerVisible(false);
-	        var index = this.playOrder.indexOf(this.currentPlayType);
-	        if (index == -1 || index == (this.playOrder.length - 1)) {
-	            index = 0;
-	        }
-	        else {
-	            index++;
-	        }
 
+            //before changing play type, let's check if there is any backup stream
+            var playTypeIndex = this.playOrder.indexOf(this.currentPlayType);
+            if (this.activeStreamId == this.streamId && this.backupStreamId != null) 
+            {
+                //update active stream id to backup stream id
+                this.activeStreamId = this.backupStreamId;
+                //don't update playTypeIndex because we're trying backup stream with the same play type
+            }
+            else 
+            {
+                //reset the activeStreamId back to streamId
+                this.activeStreamId = this.streamId;
+                //update the playTypeIndex to try next tech
+                if (playTypeIndex == -1 || playTypeIndex == (this.playOrder.length - 1)) {
+                    playTypeIndex = 0;
+                }
+                else {
+                    playTypeIndex++;
+                }
+            }
 	        this.tryNextTechTimer = setTimeout(() => {
 				 this.tryNextTechTimer = -1;
-	            this.playIfExists(this.playOrder[index]);
+	            this.playIfExists(this.playOrder[playTypeIndex], this.activeStreamId);
 	        }, 3000);
         }
         else
@@ -1063,11 +1117,11 @@ export class WebPlayer {
             {
                 //do not play again if it's dash because it play last seconds again, let the server clear it
                 setTimeout(() => {
-                    this.playIfExists(this.playOrder[0]);
+                    this.playIfExists(this.playOrder[0], this.activeStreamId);
                 }, 10000);
             }
             else {
-                this.playIfExists(this.playOrder[0]);
+                this.playIfExists(this.playOrder[0], this.activeStreamId);
             }
             if (this.playerListener != null) {
                 this.playerListener("ended");
@@ -1163,7 +1217,7 @@ export class WebPlayer {
      * play the stream with the given tech
      * @param {string} tech
      */
-    async playIfExists(tech) {
+    async playIfExists(tech, streamIdToPlay) {
         this.currentPlayType = tech;
         this.destroyVideoJSPlayer();
         this.destroyDashPlayer();
@@ -1172,78 +1226,78 @@ export class WebPlayer {
         this.containerElement.innerHTML = this.videoHTMLContent;
 
 
-        Logger.warn("Try to play the stream " + this.streamId + " with " + this.currentPlayType);
+        Logger.warn("Try to play the stream " + streamIdToPlay + " with " + this.currentPlayType);
         switch (this.currentPlayType) {
             case "hls":
                 //TODO: Test case for hls
                 //1. Play stream with adaptive m3u8 for live and VoD
                 //2. Play stream with m3u8 for live and VoD
                 //3. if files are not available check nextTech is being called
-                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId, WebPlayer.HLS_EXTENSION).then((streamPath) => {
+                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay, WebPlayer.HLS_EXTENSION).then((streamPath) => {
 
                     this.playWithVideoJS(streamPath, WebPlayer.HLS_EXTENSION);
                     Logger.warn("incoming stream path: " + streamPath);
 
                 }).catch((error) => {
 
-                    Logger.warn("HLS stream resource not available for stream:" + this.streamId + " error is " + error + ". Try next play tech");
+                    Logger.warn("HLS stream resource not available for stream:" + streamIdToPlay + " error is " + error + ". Try next play tech");
                     this.tryNextTech();
                 });
             case "ll-hls":
-                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER + "/" + WebPlayer.LL_HLS_FOLDER, this.streamId, WebPlayer.HLS_EXTENSION).then((streamPath) => {
+                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER + "/" + WebPlayer.LL_HLS_FOLDER, streamIdToPlay, WebPlayer.HLS_EXTENSION).then((streamPath) => {
 
                     this.playWithVideoJS(streamPath, WebPlayer.HLS_EXTENSION);
                     Logger.warn("incoming stream path: " + streamPath);
 
                 }).catch((error) => {
 
-                    Logger.warn("LL-HLS stream resource not available for stream:" + this.streamId + " error is " + error + ". Try next play tech");
+                    Logger.warn("LL-HLS stream resource not available for stream:" + streamIdToPlay + " error is " + error + ". Try next play tech");
                     this.tryNextTech();
                 });
             case "dash":
-                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId + "/" + this.streamId, WebPlayer.DASH_EXTENSION).then((streamPath) => {
+                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay + "/" + streamIdToPlay, WebPlayer.DASH_EXTENSION).then((streamPath) => {
                     this.playViaDash(streamPath);
                 }).catch((error) => {
-                    Logger.warn("DASH stream resource not available for stream:" + this.streamId + " error is " + error + ". Try next play tech");
+                    Logger.warn("DASH stream resource not available for stream:" + streamIdToPlay + " error is " + error + ". Try next play tech");
                     this.tryNextTech();
                 });
 
             case "webrtc":
               
 
-                return this.playWithVideoJS(this.addSecurityParams(this.websocketURL), WebPlayer.WEBRTC_EXTENSION);
+                return this.playWithVideoJS(this.addSecurityParams(this.getWebsocketURLForStream(streamIdToPlay)), WebPlayer.WEBRTC_EXTENSION);
             case "vod":
                 //TODO: Test case for vod
                 //1. Play stream with mp4 for VoD
                 //2. Play stream with webm for VoD
                 //3. Play stream with playOrder type
 
-                var lastIndexOfDot = this.streamId.lastIndexOf(".");
+                var lastIndexOfDot = streamIdToPlay.lastIndexOf(".");
                 var extension;
                 if (lastIndexOfDot != -1)
                 {
                     //if there is a dot in the streamId, it means that this is extension, use it. make the extension empty
                     this.playType[0] = "";
-                    extension = this.streamId.substring(lastIndexOfDot + 1);
+                    extension = streamIdToPlay.substring(lastIndexOfDot + 1);
                 }
                 else {
 					//we need to give extension to playWithVideoJS
 					extension = this.playType[0];
 				}
 
-                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId,  this.playType[0]).then((streamPath) => {
+                return this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay,  this.playType[0]).then((streamPath) => {
 
                     //we need to give extension to playWithVideoJS
                     this.playWithVideoJS(streamPath, extension);
 
                 }).catch((error) => {
-                    Logger.warn("VOD stream resource not available for stream:" + this.streamId + " and play type " + this.playType[0] + ". Error is " + error);
+                    Logger.warn("VOD stream resource not available for stream:" + streamIdToPlay + " and play type " + this.playType[0] + ". Error is " + error);
                     if (this.playType.length > 1) {
                         Logger.warn("Try next play type which is " + this.playType[1] + ".")
-                        this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, this.streamId, this.playType[1]).then((streamPath) => {
+                        this.checkStreamExistsViaHttp(WebPlayer.STREAMS_FOLDER, streamIdToPlay, this.playType[1]).then((streamPath) => {
                             this.playWithVideoJS(streamPath, this.playType[1]);
                         }).catch((error) => {
-                            Logger.warn("VOD stream resource not available for stream:" + this.streamId + " and play type error is " + error);
+                            Logger.warn("VOD stream resource not available for stream:" + streamIdToPlay + " and play type error is " + error);
                         });
                     }
 
@@ -1251,6 +1305,11 @@ export class WebPlayer {
         }
     }
 
+
+    getWebsocketURLForStream(streamIdToPlay) {
+        return  this.websocketBaseURL + streamIdToPlay + ".webrtc";
+    }
+
     /**
      *
      * @returns {String} query string for security
@@ -1273,11 +1332,13 @@ export class WebPlayer {
      * play the stream with videojs player or dash player
      */
     play() {
-        if (this.streamId.startsWith(WebPlayer.STREAMS_FOLDER)) {
+        //if there is a request to play, try original stream first
+        this.activeStreamId = this.streamId;
+        if (this.activeStreamId.startsWith(WebPlayer.STREAMS_FOLDER)) {
 
             //start videojs player because it directly try to play stream from streams folder
-            var lastIndexOfDot = this.streamId.lastIndexOf(".");
-            var extension = this.streamId.substring(lastIndexOfDot + 1);
+            var lastIndexOfDot = this.activeStreamId.lastIndexOf(".");
+            var extension = this.activeStreamId.substring(lastIndexOfDot + 1);
 
             this.playOrder= ["vod"];
             this.currentPlayType = this.playOrder[0];
@@ -1289,14 +1350,14 @@ export class WebPlayer {
 
             if (extension == WebPlayer.DASH_EXTENSION)
             {
-				this.playViaDash(this.httpBaseURL + this.addSecurityParams(this.streamId), extension);
+				this.playViaDash(this.httpBaseURL + this.addSecurityParams(this.activeStreamId), extension);
 			}
 			else  {
-				this.playWithVideoJS(this.httpBaseURL + this.addSecurityParams(this.streamId), extension);
+				this.playWithVideoJS(this.httpBaseURL + this.addSecurityParams(this.activeStreamId), extension);
 			}
         }
         else {
-            this.playIfExists(this.playOrder[0]);
+            this.playIfExists(this.playOrder[0], this.activeStreamId);
         }
     }
 
@@ -1391,11 +1452,11 @@ export class WebPlayer {
                 <span id="zoom-in-button" style="color: #bc1b22; font-size: 50px; font-weight: bold; cursor: pointer; margin-left: 5px; user-select: none;">+</span>
              </div>
               <div id="direction-arrow-container" class="direction-arrow-container">
-                <img id="up-button" style="position: absolute; width: 50px; cursor: pointer; height: 50px; left: 50%; transform: translateX(-50%);" src="`+ UpArrow +`"/>
+                <img id="up-button" style="position: absolute; width: 50px; cursor: pointer; height: 50px; left: 50%; transform: translateX(-50%);" src="`+ UpArrow.src +`"/>
              
-                <img id="left-button" style="position: absolute; left: 0px; width: 50px; height: 50px; cursor: pointer; top: 50%; transform: translateY(-50%) rotate(-90deg);" src="`+UpArrow+`"/>
-                <img id="right-button" style="position: absolute; right:0px; top: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateY(-50%) rotate(90deg);" src="`+UpArrow+`"/>
-                <img id="down-button" style="position: absolute; bottom:0px;left: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateX(-50%) rotate(180deg);" src="`+UpArrow+`"/>
+                <img id="left-button" style="position: absolute; left: 0px; width: 50px; height: 50px; cursor: pointer; top: 50%; transform: translateY(-50%) rotate(-90deg);" src="`+UpArrow.src+`"/>
+                <img id="right-button" style="position: absolute; right:0px; top: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateY(-50%) rotate(90deg);" src="`+UpArrow.src+`"/>
+                <img id="down-button" style="position: absolute; bottom:0px;left: 50%; width: 50px; cursor: pointer; height: 50px; transform: translateX(-50%) rotate(180deg);" src="`+UpArrow.src+`"/>
                
             </div>