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 code in syntaxhighlight
Toad64 (talk | contribs)
Contributors
480 edits
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
Using Javascript (and a set of ::root colors i had), It is possible to modify the default audio element used to play audio.
Using Javascript, It is possible to modify the default audio element used to play audio. This code replaces the standard webkit media player with a stylized version. (Currently for chromium browsers only)


<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>
          
          
Line 119: Line 156:
</syntaxhighlight>
</syntaxhighlight>


This code creates a styleized media player (in this example the Old Deadlock Title Screen):
In this example, the Old Deadlock Title Screen:
 
[[File:Music menu lp.mp3]]
[[File:Music menu lp.mp3]]
Retrieved from "https://deadlock.wiki/User:Toad64/Sandbox"