GithubHelp home page GithubHelp logo

nilsenevoldsen / audiobutton Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 3.0 137 KB

MediaWiki extension that creates a one-button play/pause toggle for an uploaded audio file

License: MIT License

JavaScript 41.01% PHP 54.51% Less 4.47%

audiobutton's People

Contributors

dependabot[bot] avatar elifoster avatar fo-nttax avatar nilsenevoldsen avatar pcjcos avatar r4ndomone avatar

Stargazers

avatar avatar

Watchers

avatar avatar

Forkers

chaud arbolitoloco1 r4ndomone

audiobutton's Issues

File uses should create a link to the file

On Dota2 we had a bunch of files that were moved without updating the page incorporating them because there were no links generated by their use through this extension. It would be helpful if using a file in this extension added a link from the calling page to the file.

Putting an image before sm2 call causes TypeError

When an image is placed before the sm2/ab call with the left image property, the a.ext-audiobutton gets placed into a separate p tag separate from the audio.ext-audiobutton. button.previousElementSibling in ext.audiobutton.js thus returns null, which causes a TypeError on audio.canPlayType. A solution seems to be placing the sm2 tag inside a span, so I think if the hook itself outputs a span this will be fixed.

Example:

<div class="floatleft"><img alt="Wiki.png" src="..." width="20" height="5" srcset="..."></div>
<audio hidden="" class="ext-audiobutton" data-volume="1.0"><source src="..." type="application/ogg"><a href="...">Link</a></audio>
<p>
	<a class="ext-audiobutton" data-state="play" title="Play/Pause"></a>
</p>

The error in the console:

TypeError: Cannot read property 'canPlayType' of null
    at load.php?debug=false&lang=en&modules=ext.audioButton|ext.reverb.notifications.scripts|oojs-ui-core%2Coojs-ui-widgets&skin=hydradark&version=0ok7bwp:1
    at NodeList.forEach (<anonymous>)
    at load.php?debug=false&lang=en&modules=ext.audioButton|ext.reverb.notifications.scripts|oojs-ui-core%2Coojs-ui-widgets&skin=hydradark&version=0ok7bwp:1
    at load.php?debug=false&lang=en&modules=ext.audioButton|ext.reverb.notifications.scripts|oojs-ui-core%2Coojs-ui-widgets&skin=hydradark&version=0ok7bwp:2
    at mw.loader.implement.css (load.php?debug=false&lang=en&modules=ext.audioButton|ext.reverb.notifications.scripts|oojs-ui-core%2Coojs-ui-widgets&skin=hydradark&version=0ok7bwp:2)
    at runScript (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=hydradark&version=1su7rs5:162)
    at checkCssHandles (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=hydradark&version=1su7rs5:162)
    at Object.<anonymous> (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=hydradark&version=1su7rs5:162)
    at fire (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=hydradark&version=1su7rs5:46)
    at Object.fireWith (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=hydradark&version=1su7rs5:47)
logError @ load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=hydradark&version=1su7rs5:177

Real-world example

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.