User:Toad64/Sandbox: Difference between revisions

Toad64 (talk | contribs)
No edit summary
Toad64 (talk | contribs)
No edit summary
 
(One intermediate revision by the same user not shown)
Line 6: Line 6:
// In your Common.js
// In your Common.js
$(document).ready(function() {
$(document).ready(function() {
    // Find every native audio player generated by the wiki
     $('audio').each(function() {
     $('audio').each(function() {
         // Create your custom component
         const $this = $(this);
         const myPlayer = document.createElement('audio-player');
         const src = $this.attr('src');
          
          
         // Transfer the source
         // Log what we found to the console so we can see why it's undefined
         myPlayer.setAttribute('track', $(this).attr('src'));
         console.log("Processing element:", this);
          
        console.log("Source found:", src);
        // Replace the native player with your custom one
 
        $(this).replaceWith(myPlayer);
         if (src) {
            const myPlayer = document.createElement('audio-player');
            myPlayer.setAttribute('track', src);
            $this.replaceWith(myPlayer);
        } else {
            console.warn("Skipping element because src is undefined:", this);
        }
     });
     });
});
});
Line 55: Line 60:
             border: none;
             border: none;
             border-radius: 50%;
             border-radius: 50%;
           
            align-items: center;
    justify-content: center;
              
              
             background: var(--background-color-interactive);
             background: var(--background-color-interactive);
Line 61: Line 69:
              
              
           }
           }
         
          .playBtn:hover {
        background: var(--background-color-interactive-subtle);
          }
         
           .seek {
           .seek {
         flex: 1;
         flex: 1;
Line 96: Line 109:
         cursor: pointer;
         cursor: pointer;
           }
           }
         
           .time {  
           .time {  
         font-size: 12px;  
         font-size: 12px;