The Deadlock Wiki

User:Toad64/Sandbox: Difference between revisions

Browse history interactively
← Older edit

Toad64 (talk | contribs)

1 user group
480 edits
undo
VisualWikitext
Toad64 (talk | contribs)
Contributors
480 edits
updated info about code
Toad64 (talk | contribs)
Contributors
480 edits
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 2: Line 2:


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
// gemini code
// 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 33: Line 40:
             align-items: center;
             align-items: center;
             gap: 12px;
             gap: 12px;
           
             width: 100%;
             width: 100%;
             max-width: 400px;
             max-width: 400px;
            background: var(--background-color-base-border);
padding: 10px 15px;
            padding: 10px 15px;
             border-radius: 50px;
             border-radius: 50px;
           
            background: var(--background-color-base-subtle);
             color: var(--color-base);
             color: var(--color-base);
             font-family: sans-serif;
             font-family: sans-serif;
            box-sizing: border-box;
overflow: hidden;
           }
           }
         
           .playBtn {
           .playBtn {
            flex-shrink: 0;
         
             width: 30px;
             width: 30px;
             height: 30px;
             height: 30px;
            border: none;
            border-radius: 50%;
           
            align-items: center;
    justify-content: center;
           
             background: var(--background-color-interactive);
             background: var(--background-color-interactive);
            border: none;
             color: var(--color-base);
             color: var(--color-base);
            border-radius: 50%;
             cursor: pointer;
             cursor: pointer;
             flex-shrink: 0;
              
          }
         
          .playBtn:hover {
        background: var(--background-color-interactive-subtle);
           }
           }
         
           .seek {
           .seek {
            -webkit-appearance: none;
        flex: 1;
             flex: 1;
        -webkit-appearance: none;
             appearance: none;
           
             height: 6px;
             height: 6px;
            border-radius: 5px;
           
             background: var(--color-base);
             background: var(--color-base);
            border-radius: 5px;
             cursor: pointer;
             cursor: pointer;
           }
           }
            
            
           .seek::-webkit-slider-thumb {
           .seek::-webkit-slider-thumb {
         -webkit-appearance: none; /* Override default look */
         -webkit-appearance: none;
         appearance: none;
         appearance: none;
         border-radius: 50px;
        
         width: 15px;
         width: 15px;
         height: 15px;
         height: 15px;
        border-radius: 50px;
       
         background: var(--link-color);
         background: var(--link-color);
         cursor: pointer;
         cursor: pointer;
Line 71: Line 99:
        
        
       .seek::-moz-range-thumb {
       .seek::-moz-range-thumb {
         border-radius: 50px;
    -webkit-appearance: none;
         appearance: none;
       
         width: 15px;
         width: 15px;
         height: 15px;
         height: 15px;
        border-radius: 50px;
       
         background: var(--link-color);
         background: var(--link-color);
         cursor: pointer;
         cursor: pointer;
           }
           }
           .time { font-size: 12px; opacity: 0.8; white-space: nowrap; }
         
           .time {  
        font-size: 12px;  
        opacity: 0.8;  
        white-space: nowrap;  
          }
         </style>
         </style>
          
          
Retrieved from "https://deadlock.wiki/User:Toad64/Sandbox"