Skip to content

S
SHMCamStudio
Commit f4bddbcc authored by Robocoders's avatar Robocoders
Browse files
Options

Update stream.html and index.html for responsive video resizing in sidebar

parent 8136e978
Pipeline #160 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 81 additions and 71 deletions
      templates/index.html
      View file @ f4bddbcc
      ...@@ -294,4 +294,52 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. ...@@ -294,4 +294,52 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
      }, { passive: false }); }, { passive: false });
      </script> </script>
      </body> </body>
      </html>
      <script>
      const sidebar = document.querySelector('.sidebar');
      const resizeHandle = document.getElementById('resize-handle');
      const buttonsContainer = document.querySelector('.buttons-container');
      const containerWidth = document.querySelector('.main-container').clientWidth;
      function adjustSidebarWidth(newWidth) {
      sidebar.style.width = `${newWidth}px`;
      buttonsContainer.style.width = `${containerWidth - newWidth}px`;
      // Notify the iframe about the resize
      var iframe = document.querySelector(".video-container iframe");
      if (iframe) {
      iframe.contentWindow.postMessage("resize", "*");
      }
      }
      let isResizing = false;
      resizeHandle.addEventListener('mousedown', (e) => {
      isResizing = true;
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', stopResize);
      });
      function handleMouseMove(e) {
      if (!isResizing) return;
      let newWidth = e.clientX;
      // Limit sidebar width between 50px and 50% of screen
      newWidth = Math.max(50, Math.min(newWidth, containerWidth / 2));
      adjustSidebarWidth(newWidth);
      }
      function stopResize() {
      isResizing = false;
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', stopResize);
      }
      // Prevent zoom on double-tap for mobile
      document.addEventListener('touchmove', function(event) {
      if (event.scale !== 1) { event.preventDefault(); }
      }, { passive: false });
      </script>
      </body>
      </html> </html>
      templates/stream.html
      View file @ f4bddbcc
      ...@@ -14,103 +14,65 @@ GNU General Public License for more details. ...@@ -14,103 +14,65 @@ GNU General Public License for more details.
      You should have received a copy of the GNU General Public License You should have received a copy of the GNU General Public License
      along with this program. If not, see <https://www.gnu.org/licenses/>. along with this program. If not, see <https://www.gnu.org/licenses/>.
      --> -->
      <!DOCTYPE html> <!DOCTYPE html>
      <html lang="en"> <html lang="en">
      <head> <head>
      <meta charset="UTF-8"> <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Stream Interface</title> <title>Video Stream</title>
      <!-- Video.js CSS -->
      <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
      <style> <style>
      body { body, html {
      margin: 0; margin: 0;
      padding: 0; padding: 0;
      background-color: #000; height: 100%;
      overflow: hidden; overflow: hidden;
      } }
      #videoContainer { #videoContainer {
      width: 100%; width: 100%;
      height: 100vh; height: 100%;
      background-color: #000;
      } }
      video {
      /* Prevent text selection and touch callout */ width: 100%;
      body { height: 100%;
      -webkit-user-select: none; object-fit: contain;
      -webkit-touch-callout: none;
      user-select: none;
      } }
      </style> </style>
      </head> </head>
      <body> <body>
      <div id="videoContainer"> <div id="videoContainer">
      <video <video id="videoPlayer" autoplay muted playsinline>
      id="videoElement" <source src="/video_feed" type="video/mp4">
      class="video-js vjs-default-skin"
      controls
      playsinline
      width="100%"
      height="100%"
      >
      Your browser does not support the video tag. Your browser does not support the video tag.
      </video> </video>
      </div> </div>
      <!-- Video.js library -->
      <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script> <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
      <script> <script>
      const videoElement = document.getElementById('videoElement'); var player = videojs('videoPlayer', {
      autoplay: true,
      window.onload = function() { muted: true,
      var player = videojs('videoElement', { controls: true,
      html5: { fluid: true,
      vhs: { responsive: true
      overrideNative: !videojs.browser.IS_SAFARI });
      },
      nativeAudioTracks: false,
      nativeVideoTracks: false
      }});
      player.src({ src: '{{ stream_url }}', type: 'application/x-mpegURL'});
      player.play();
      };
      // Function to handle resize
      function handleResize() {
      var videoContainer = document.getElementById('videoContainer');
      var video = document.getElementById('videoPlayer');
      video.style.width = videoContainer.clientWidth + 'px';
      video.style.height = videoContainer.clientHeight + 'px';
      }
      // Fullscreen on click // Call handleResize initially and on window resize
      videoElement.addEventListener('click', () => { handleResize();
      if (!document.fullscreenElement) { window.addEventListener('resize', handleResize);
      if (videoElement.requestFullscreen) {
      videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) { // Firefox
      videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
      videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) { // IE/Edge
      videoElement.msRequestFullscreen();
      }
      } else {
      if (document.exitFullscreen) {
      document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
      document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
      }
      }
      });
      // Prevent zoom // Listen for messages from the parent window
      document.addEventListener('touchmove', function(event) { window.addEventListener('message', function(event) {
      if (event.scale !== 1) { if (event.data === 'resize') {
      event.preventDefault(); handleResize();
      } }
      }, { passive: false }); }, false);
      </script> </script>
      </body> </body>
      </html> </html>
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment