Merge pull request #5463 from avalonmediasystem/user_action_buttons

Move add to playlist button and add icon in front of button text
avalonmediasystem · Nov 10, 2023 · 8847c28 · 8847c28
2 parents 448b892 + e44ff63
commit 8847c28
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/app/assets/stylesheets/avalon.scss b/app/assets/stylesheets/avalon.scss
@@ -1195,6 +1195,16 @@ td {
   }
 }
 
+.ramp--rails-content {
+  #addToPlaylistBtn {
+    svg {
+      color: $blue;
+      height: 1.5rem;
+      margin-right: 0.2rem;
+    }
+  }
+}
+
 /*
   Override CSS for transcript component imported
   from @samvera/ramp

diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx
@@ -133,23 +133,23 @@ const Ramp = ({
                         </div>
                           <div  className="ramp--rails-content">
                             <Col className="ramp-button-group-1">
-                              { timeline.canCreate && <div className="mr-1" dangerouslySetInnerHTML={{ __html: timeline.content }} /> }
-                              { playlist.canCreate &&
-                                <button className="btn btn-outline mr-1 text-nowrap"
-                                  id="addToPlaylistBtn"
+                              { timeline.canCreate &&
+                                <button
+                                  id="timelineBtn"
+                                  className="btn btn-outline mr-1 text-nowrap"
                                   type="button"
-                                  data-toggle="collapse"
-                                  data-target="#addToPlaylistPanel"
+                                  data-toggle="modal"
+                                  data-target="#timelineModal"
                                   aria-expanded="false"
-                                  aria-controls="addToPlaylistPanel"
+                                  aria-controls="timelineModal"
                                   disabled={true}
                                 >
-                                  Add to Playlist
+                                  Create Timeline
                                 </button>
                               }
                               { share.canShare &&
                                 <button
-                                  className="btn btn-outline text-nowrap"
+                                  className="btn btn-outline mr-1 text-nowrap"
                                   type="button"
                                   data-toggle="collapse"
                                   data-target="#shareResourcePanel"
@@ -161,6 +161,24 @@ const Ramp = ({
                                     Share
                                 </button>
                               }
+                              { playlist.canCreate &&
+                                <button className="btn btn-outline text-nowrap mr-1"
+                                  id="addToPlaylistBtn"
+                                  type="button"
+                                  data-toggle="collapse"
+                                  data-target="#addToPlaylistPanel"
+                                  aria-expanded="false"
+                                  aria-controls="addToPlaylistPanel"
+                                  disabled={true}
+                                >
+                                  {/* Static SVG image in /app/assets/images/add_to_playlist_icon.svg */}
+                                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+                                     viewBox="-293 386 24 24" xmlSpace="preserve">
+                                     <path className="st1" fill="currentColor" d="M-279,395h-12v2h12V395z M-279,391h-12v2h12V391z M-275,399v-4h-2v4h-4v2h4v4h2v-4h4v-2H-275z M-291,401h8v-2h-8V401z"/>
+                                  </svg>
+                                  Add to Playlist
+                                </button>
+                              }
                             </Col>
                             { has_structure && 
                               <Col className="ramp-button-group-2">
@@ -177,6 +195,9 @@ const Ramp = ({
                             }
                           </div>
                           <Row className="mx-0">
+                            <Col>
+                              <div dangerouslySetInnerHTML={{ __html: timeline.content}} />
+                            </Col>
                             <Col md={12} lg={12} sm={12}>
                               <div className="collapse" id="addToPlaylistPanel">
                                 <div className="card card-body" dangerouslySetInnerHTML={{ __html: playlist.tab }} />

diff --git a/app/views/media_objects/_timeline.html.erb b/app/views/media_objects/_timeline.html.erb
@@ -13,13 +13,6 @@ Unless required by applicable law or agreed to in writing, software distributed
   specific language governing permissions and limitations under the License.
 ---  END LICENSE_HEADER BLOCK  ---
 %>
-
-<div id="timeline-button">
-  <button type="button" class="btn btn-outline text-nowrap" id="timeline-btn" data-toggle="modal" data-target="#timelineModal" disabled >
-    Create Timeline
-  </button>
-</div>
-
 <div class="modal fade" id="timelineModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;" data-title="<%= @media_object.title %>">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
@@ -57,7 +50,7 @@ $(document).ready(function() {
     let title, streamId;
     if(player) {
       player.player.on('loadedmetadata', () => {
-        let timelineBtn = document.getElementById('timeline-btn');
+        let timelineBtn = document.getElementById('timelineBtn');
         if(timelineBtn) {
           timelineBtn.disabled = false;
         }