Merge pull request #5623 from avalonmediasystem/playlist-items-height

avalonmediasystem · Feb 2, 2024 · a74dc68 · a74dc68
2 parents c68131f + 44e31b5
commit a74dc68
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
@@ -50,6 +50,9 @@ const Ramp = ({
 
   let interval;
 
+  const USER_AGENT = window.navigator.userAgent;
+  const IS_MOBILE = (/Mobi/i).test(USER_AGENT);
+
   React.useEffect(() => {
     let url = `${base_url}/playlists/${playlist_id}/manifest.json`;
     setManifestUrl(url);
@@ -86,7 +89,7 @@ const Ramp = ({
           <Card className="ramp--playlist-accordion">
             <Card.Header>
               <h4>{activeItemTitle}</h4>
-              { activeItemSummary && <div>{activeItemSummary}</div> }
+              {activeItemSummary && <div>{activeItemSummary}</div>}
             </Card.Header>
             <Card.Body>
               <Accordion>
@@ -114,7 +117,7 @@ const Ramp = ({
             </Card.Body>
           </Card>
         </Col>
-        <Col sm={4} className="ramp--playlist-items-column">
+        <Col sm={4} className={`ramp--playlist-items-column ${IS_MOBILE ? 'mobile-view' : ''}`}>
           <Row>
             <Col sm={6}>
               <AutoAdvanceToggle />

diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
@@ -356,4 +356,11 @@
       max-height: inherit;
     }
   }
+
+  /* CSS for playlist items column height in landscape mode for mobile devices */
+  @media(orientation: landscape) {
+    .ramp--playlist-items-column.mobile-view {
+      height: 109vh !important;
+    }
+  }
 }