Permalink
Browse files

Whoah! Loads of changes. We're getting close.

  • Loading branch information...
justintadlock committed Aug 31, 2013
1 parent af15230 commit 5ff8e88e82fe22369a9c60b25ea6eea1a94366ff
View
339 LICENSE

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -13,13 +13,43 @@ Follow the "/dev" branch for the latest updates. Please make pull requests and
https://github.com/justintadlock/theme-mediaelement/tree/dev
+=== Usage ===
+
+Either load the "mediaelements.min.css" file via `wp_enqueue_script()` or `@import()` it at the top of your `style.css`. Then, add the following to your `functions.php`.
+
+ add_action( 'wp_enqueue_scripts', 'my_deregister_styles' );
+
+ function my_deregister_styles() {
+ wp_deregister_style( 'mediaelement' );
+ wp_deregister_style( 'wp-mediaelement' );
+ }
+
=== Todo ===
* Figure out elements that I don't understand yet. :)
* Remove as much "style" as possible, including fonts, colors, and backgrounds.
-* Don't rely on any images. Allow theme devs to handle this.
+* Don't rely on any images (maybe). Allow theme devs to handle this.
* Simplify. Simplify. Simplify.
=== Resources ===
-* http://mediaelementjs.com
+* http://mediaelementjs.com
+
+=== Structure ===
+
+Basic structure of the media player:
+
+ <div class="mejs-container">
+ <div class="mejs-inner">
+ <div class="mejs-mediaelement">
+ <audio class="wp-audio-shortcode">...</audio>
+ </div>
+ <div class="mejs-layers">
+ <div class="mejs-layer">...</div>
+ </div>
+ <div class="mejs-controls">
+ <div class="mejs-button"></div>
+ </div>
+ <div class="mejs-clear">...</div>
+ </div>
+ </div>
View
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="bigplay-gradient.fw-Page%201" viewBox="0 0 100 200" style="background-color:#ffffff00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="100px" height="200px"> <defs> <radialGradient id="gradient1" cx="50%" cy="50%" r="50%"> <stop stop-color="#222222" stop-opacity="0" offset="70%"/> <stop stop-color="#222222" stop-opacity="0.0118" offset="70.202%"/> <stop stop-color="#333333" stop-opacity="1" offset="85%"/> <stop stop-color="#333333" stop-opacity="0" offset="100%"/> </radialGradient> <radialGradient id="gradient2" cx="50%" cy="50%" r="50%"> <stop stop-color="#bbbbbb" stop-opacity="0" offset="70%"/> <stop stop-color="#bbbbbb" stop-opacity="0.0118" offset="70.202%"/> <stop stop-color="#bbbbbb" stop-opacity="1" offset="85%"/> <stop stop-color="#bbbbbb" stop-opacity="0" offset="100%"/> </radialGradient> <filter id="filter1" x="-100%" y="-100%" width="300%" height="300%"> <!-- Glow --> <feColorMatrix result="out" in="SourceGraphic" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.251 0"/> <feMorphology result="out" in="out" operator="dilate" radius="3"/> <feGaussianBlur result="out" in="out" stdDeviation="1.5"/> <feBlend in="SourceGraphic" in2="out" mode="normal" result="Glow1"/> </filter> <filter id="filter2" x="-100%" y="-100%" width="300%" height="300%"> <!-- Glow --> <feColorMatrix result="out" in="SourceGraphic" type="matrix" values="0 0 0 0.8667 0 0 0 0 0.8667 0 0 0 0 0.8667 0 0 0 0 0.251 0"/> <feMorphology result="out" in="out" operator="dilate" radius="3"/> <feGaussianBlur result="out" in="out" stdDeviation="1.5"/> <feBlend in="SourceGraphic" in2="out" mode="normal" result="Glow2"/> </filter> </defs> <g id="Background"> </g> <g id="dark%20shadow"> <path d="M 22 50 C 22 34.5358 34.5358 22 50 22 C 65.4642 22 78 34.5358 78 50 C 78 65.4642 65.4642 78 50 78 C 34.5358 78 22 65.4642 22 50 ZM 5 50 C 5 74.8531 25.1469 95 50 95 C 74.8531 95 95 74.8531 95 50 C 95 25.1469 74.8531 5 50 5 C 25.1469 5 5 25.1469 5 50 Z" fill="url(#gradient1)"/> <path d="M 22 150 C 22 134.5358 34.5358 122 50 122 C 65.4642 122 78 134.5358 78 150 C 78 165.4642 65.4642 178 50 178 C 34.5358 178 22 165.4642 22 150 ZM 5 150 C 5 174.8531 25.1469 195 50 195 C 74.8531 195 95 174.8531 95 150 C 95 125.1469 74.8531 105 50 105 C 25.1469 105 5 125.1469 5 150 Z" fill="url(#gradient2)"/> </g> <g id="dark"> <path id="Polygon" filter="url(#filter1)" d="M 72.5 49.5 L 38.75 68.9856 L 38.75 30.0144 L 72.5 49.5 Z" fill="#ffffff"/> <path id="Ellipse" d="M 13 50.5 C 13 29.7891 29.7891 13 50.5 13 C 71.2109 13 88 29.7891 88 50.5 C 88 71.2109 71.2109 88 50.5 88 C 29.7891 88 13 71.2109 13 50.5 Z" stroke="#ffffff" stroke-width="5" fill="none"/> </g> <g id="light"> <path id="Polygon2" filter="url(#filter2)" d="M 72.5 149.5 L 38.75 168.9856 L 38.75 130.0144 L 72.5 149.5 Z" fill="#ffffff"/> <path id="Ellipse2" d="M 13 150.5 C 13 129.7891 29.7891 113 50.5 113 C 71.2109 113 88 129.7891 88 150.5 C 88 171.211 71.2109 188 50.5 188 C 29.7891 188 13 171.211 13 150.5 Z" stroke="#ffffff" stroke-width="5" fill="none"/> </g></svg>
View
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="controls.fw-Page%201" viewBox="0 0 144 32" style="background-color:#ffffff00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" x="0px" y="0px" width="144px" height="32px"> <defs> <radialGradient id="gradient1" cx="50%" cy="50%" r="50%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#f2f2f2" stop-opacity="0.2" offset="100%"/> </radialGradient> <linearGradient id="gradient2" x1="50%" y1="-7.8652%" x2="50%" y2="249.6629%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient3" x1="50%" y1="0%" x2="50%" y2="238.75%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient4" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient5" x1="50%" y1="-33.3333%" x2="50%" y2="152.0833%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient6" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient7" x1="50%" y1="-33.3333%" x2="50%" y2="152.0833%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient8" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient9" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient10" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient11" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient12" x1="50%" y1="0%" x2="50%" y2="238.75%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient13" x1="40%" y1="-140%" x2="40%" y2="98.75%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient14" x1="50%" y1="0%" x2="50%" y2="238.75%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient15" x1="60%" y1="-140%" x2="60%" y2="98.75%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient16" x1="50%" y1="0%" x2="50%" y2="298.4375%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient17" x1="50%" y1="0%" x2="50%" y2="238.75%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient18" x1="50%" y1="-200%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient19" x1="50%" y1="-200%" x2="50%" y2="110.9375%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient20" x1="55%" y1="0%" x2="55%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/> </linearGradient> <linearGradient id="gradient21" x1="50%" y1="0%" x2="50%" y2="100%"> <stop stop-color="#ffffff" stop-opacity="1" offset="0%"/> <stop stop-color="#c8c8c8" stop-opacity="1" offset="99.4444%"/> </linearGradient> </defs> <g id="BG"> </g> <g id="controls"> <path id="Line" d="M 98.5 7.5 L 109.5 7.5 " stroke="#ffffff" stroke-width="1" fill="none"/> <path id="Line2" d="M 98.5 3.5 L 109.5 3.5 " stroke="#ffffff" stroke-width="1" fill="none"/> <path id="Line3" d="M 98.5 11.5 L 109.5 11.5 " stroke="#ffffff" stroke-width="1" fill="none"/> <path id="Ellipse" d="M 108 11.5 C 108 10.6716 108.4477 10 109 10 C 109.5523 10 110 10.6716 110 11.5 C 110 12.3284 109.5523 13 109 13 C 108.4477 13 108 12.3284 108 11.5 Z" fill="#ffffff"/> <path id="Ellipse2" d="M 104 7.5 C 104 6.6716 104.4477 6 105 6 C 105.5523 6 106 6.6716 106 7.5 C 106 8.3284 105.5523 9 105 9 C 104.4477 9 104 8.3284 104 7.5 Z" fill="#ffffff"/> <path id="Ellipse3" d="M 108 3.5 C 108 2.6716 108.4477 2 109 2 C 109.5523 2 110 2.6716 110 3.5 C 110 4.3284 109.5523 5 109 5 C 108.4477 5 108 4.3284 108 3.5 Z" fill="#ffffff"/> </g> <g id="backlight"> <g id="off"> <rect x="83" y="21" width="10" height="6" stroke="#ffffff" stroke-width="1" fill="#333333"/> </g> <g id="on"> <path id="Ellipse4" d="M 81 8 C 81 5.2385 84.134 3 88 3 C 91.866 3 95 5.2385 95 8 C 95 10.7615 91.866 13 88 13 C 84.134 13 81 10.7615 81 8 Z" fill="url(#gradient1)"/> <rect x="83" y="5" width="10" height="6" stroke="#ffffff" stroke-width="1" fill="#333333"/> </g> </g> <g id="loop"> <g id="on2"> <path d="M 73.795 4.205 C 75.2155 4.8785 76.2 6.3234 76.2 8 C 76.2 10.3196 74.3196 12.2 72 12.2 C 69.6804 12.2 67.8 10.3196 67.8 8 C 67.8 6.3234 68.7845 4.8785 70.205 4.205 L 68.875 2.875 C 67.1501 3.9289 66 5.8306 66 8 C 66 11.3138 68.6862 14 72 14 C 75.3138 14 78 11.3138 78 8 C 78 5.8306 76.8499 3.9289 75.125 2.875 L 73.795 4.205 Z" fill="url(#gradient2)"/> <path d="M 71 2 L 66 2 L 71 7 L 71 2 Z" fill="url(#gradient3)"/> </g> <g id="off2"> <path d="M 73.795 20.205 C 75.2155 20.8785 76.2 22.3234 76.2 24 C 76.2 26.3196 74.3196 28.2 72 28.2 C 69.6804 28.2 67.8 26.3196 67.8 24 C 67.8 22.3234 68.7845 20.8785 70.205 20.205 L 68.875 18.875 C 67.1501 19.9289 66 21.8306 66 24 C 66 27.3138 68.6862 30 72 30 C 75.3138 30 78 27.3138 78 24 C 78 21.8306 76.8499 19.9289 75.125 18.875 L 73.795 20.205 Z" fill="#a8a8b7"/> <path d="M 71 18 L 66 18 L 71 23 L 71 18 Z" fill="#a8a8b7"/> </g> </g> <g id="cc"> <rect visibility="hidden" x="49" y="2" width="14" height="12" stroke="#b0b0b0" stroke-width="1" fill="none"/> <text visibility="hidden" x="49" y="17" width="14" fill="#ffffff" style="font-size: 10px; color: #ffffff; font-family: Arial; text-align: center; "><tspan><![CDATA[cc]]></tspan></text> <path d="M 55 7 C 50.2813 3.7813 50.063 12.9405 55 10 " stroke="#ffffff" stroke-width="1" fill="none"/> <path d="M 60 7 C 55.2813 3.7813 55.063 12.9405 60 10 " stroke="#ffffff" stroke-width="1" fill="none"/> <path d="M 50 3 L 62 3 L 62 13 L 50 13 L 50 3 ZM 49 2 L 49 14 L 63 14 L 63 2 L 49 2 Z" fill="url(#gradient4)"/> <rect x="49" y="2" width="14" height="12" fill="none"/> </g> <g id="volume"> <g id="no%20sound"> <rect x="17" y="5" width="5" height="6" fill="url(#gradient5)"/> <path d="M 21 5 L 25 2 L 25 14 L 21 11.0625 L 21 5 Z" fill="url(#gradient6)"/> </g> <g id="sound%20bars"> <rect x="17" y="21" width="5" height="6" fill="url(#gradient7)"/> <path d="M 21 21 L 25 18 L 25 30 L 21 27.0625 L 21 21 Z" fill="url(#gradient8)"/> <path d="M 27 18 C 27 18 30.0625 17.375 30 24 C 29.9375 30.625 27 30 27 30 " stroke="#ffffff" stroke-width="1" fill="none"/> <path d="M 26 21.0079 C 26 21.0079 28.041 20.6962 27.9994 24 C 27.9577 27.3038 26 26.9921 26 26.9921 " stroke="#ffffff" stroke-width="1" fill="none"/> </g> </g> <g id="play/pause"> <g id="play"> <path id="Polygon" d="M 14 8.5 L 3 14 L 3 3 L 14 8.5 Z" fill="url(#gradient9)"/> </g> <g id="pause"> <rect x="3" y="18" width="3" height="12" fill="url(#gradient10)"/> <rect x="10" y="18" width="3" height="12" fill="url(#gradient11)"/> </g> </g> <g id="fullscreen"> <g id="enter%201"> <path d="M 34 2 L 39 2 L 34 7 L 34 2 Z" fill="url(#gradient12)"/> <path d="M 34 14 L 39 14 L 34 9 L 34 14 Z" fill="url(#gradient13)"/> <path d="M 46 2 L 41 2 L 46 7 L 46 2 Z" fill="url(#gradient14)"/> <path d="M 46 14 L 41 14 L 46 9 L 46 14 Z" fill="url(#gradient15)"/> </g> <g id="exit"> <path d="M 42 22 L 46 22 L 42 18 L 42 22 Z" fill="url(#gradient16)"/> <path d="M 38 22 L 38 18 L 34 22 L 38 22 Z" fill="url(#gradient17)"/> <path d="M 38 26 L 34 26 L 38 30 L 38 26 Z" fill="url(#gradient18)"/> <path d="M 42 26 L 42 30 L 46 26 L 42 26 Z" fill="url(#gradient19)"/> </g> </g> <g id="stop"> <rect x="115" y="3" width="10" height="10" fill="url(#gradient20)"/> </g> <g id="chooser"> <path d="M 135.2346 6.1522 C 136.2551 5.7295 137.4251 6.2141 137.8478 7.2346 C 138.2704 8.2551 137.7859 9.425 136.7654 9.8478 C 135.7449 10.2705 134.5749 9.7859 134.1522 8.7654 C 133.7295 7.7449 134.2141 6.5749 135.2346 6.1522 ZM 133.2735 1.4176 L 136 4.0054 L 138.7265 1.4176 L 138.8246 5.1754 L 142.5824 5.2735 L 139.9946 8 L 142.5824 10.7265 L 138.8246 10.8246 L 138.7265 14.5824 L 136 11.9946 L 133.2735 14.5824 L 133.1754 10.8246 L 129.4176 10.7265 L 132.0054 8 L 129.4176 5.2735 L 133.1754 5.1754 L 133.2735 1.4176 Z" fill="url(#gradient21)"/> </g></svg>
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Oops, something went wrong.

0 comments on commit 5ff8e88

Please sign in to comment.