Merge pull request #6088 from avalonmediasystem/resize-player

Adjust column size to avoid player overflow on browser resize
avalonmediasystem · Oct 28, 2024 · beef060 · beef060
2 parents 65b3147 + 28259f6
commit beef060
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/app/javascript/components/MediaObjectRamp.jsx b/app/javascript/components/MediaObjectRamp.jsx
@@ -72,7 +72,7 @@ const Ramp = ({
       startCanvasId={startCanvasId}
       startCanvasTime={startCanvasTime}>
       <Row className="ramp--all-components ramp--itemview">
-        <Col sm={8}>
+        <Col sm={12} md={9}>
           {(cdl.enabled && !cdl.can_stream)
             ? (<React.Fragment>
                 <div dangerouslySetInnerHTML={{ __html: cdl.embed }} />
@@ -160,7 +160,7 @@ const Ramp = ({
             )
           }
         </Col>
-        <Col sm={(sections_count == 0) ? 12 : 4} className="ramp--tabs-panel">
+        <Col sm={12} md={3} className="ramp--tabs-panel">
           {cdl.enabled && <div dangerouslySetInnerHTML={{ __html: cdl.destroy }} />}
           <Tabs>
             <Tab eventKey="details" title="Details">

diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
@@ -159,10 +159,10 @@ const Ramp = ({
       emptyManifestMessage='This playlist currently has no playable items.'
       startCanvasId={startCanvasId}>
       <Row className="ramp--all-components ramp--playlist">
-        <Col sm={8}>
+        <Col sm={12} md={8}>
           <MediaPlayer enableFileDownload={false} enablePlaybackRate={true} />
           {playlist_item_ids?.length > 0 && (
-            <Card className="ramp--playlist-accordion">
+            <Card className={`ramp--playlist-accordion ${IS_MOBILE ? 'mobile-view' : ''}`}>
               <Card.Header>
                 <h4>{activeItemTitle}</h4>
                 {activeItemSummary && <div>{activeItemSummary}</div>}
@@ -194,7 +194,7 @@ const Ramp = ({
             </Card>
           )}
         </Col>
-        <Col sm={4} className={`ramp--playlist-items-column ${IS_MOBILE ? 'mobile-view' : ''}`}>
+        <Col sm={12} md={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
@@ -333,6 +333,15 @@
   }
 
   .ramp--playlist-accordion {
+    // Set accordion with to fit player's minimum width
+    min-width: 490px;
+    &.mobile-view {
+      min-width: 380px;
+    }
+
+    border-radius: 0 0 0.25em 0.25em;
+    border-top: none;
+
     .accordion .card {
       border: none;
       border-bottom: 1px solid rgba(0, 0, 0, 0.125);