updated plugin AudioIgniter version 1.9.0

This commit is contained in:
KawaiiPunk 2022-08-19 16:15:57 +00:00 committed by Gitium
parent b49569de47
commit 8af91729f1
43 changed files with 6804 additions and 6000 deletions

View File

@ -1,155 +1,640 @@
@charset "UTF-8"; @charset "UTF-8";
@keyframes ai-spin { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
@keyframes backgroundPosition { 0% { background-position: -140px 0; }
100% { background-position: 140px 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.ai-row { margin-left: -15px; margin-right: -15px; box-sizing: border-box; } @keyframes ai-spin {
.ai-row::after { content: ""; display: table; clear: both; } 0% {
transform: rotate(0deg);
}
[class^="ai-col"] { float: left; padding-left: 15px; padding-right: 15px; width: 50%; box-sizing: border-box; } 100% {
transform: rotate(360deg);
}
}
.ai-btn { display: inline-block; font-weight: normal; margin: 0; line-height: normal; border: 0; box-shadow: none; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; user-select: none; border-radius: 2px; width: auto; height: auto; background-image: none; padding: 11px 20px 11px; font-size: 12px; text-transform: uppercase; background-color: #1c4866; color: #ffffff; text-decoration: none; } @keyframes backgroundPosition {
.ai-btn:hover, .ai-btn:focus { color: #ffffff; background-color: #173a52; } 0% {
background-position: -140px 0;
}
.ai-btn-green { background-color: #14b552; } 100% {
.ai-btn-green:hover, .ai-btn-green:focus { color: #ffffff; background-color: #119e48; } background-position: 140px 0;
}
}
.ai-brand-module { background-color: #1c4866; padding: 15px; color: #ffffff; font-size: 12px; } .sr-only {
.ai-brand-module p { font-size: 12px; } position: absolute;
.ai-brand-module a:not(.ai-btn) { color: #ffcc00; text-decoration: none; } width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.ai-brand-module-actions { text-align: right; } .ai-row {
.ai-brand-module-actions p { margin: 0; } margin-left: -15px;
margin-right: -15px;
box-sizing: border-box;
}
.ai-header { margin: 12px 0 -12px; height: 40px; } .ai-row::after {
content: "";
display: table;
clear: both;
}
.ai-header-actions { text-align: right; } [class^="ai-col"] {
float: left;
padding-left: 15px;
padding-right: 15px;
width: 50%;
box-sizing: border-box;
}
.ai-logo { display: inline-block; position: relative; top: -2px; } .ai-btn {
.ai-logo img { height: 44px; } display: inline-block;
font-weight: normal;
margin: 0;
line-height: normal;
border: 0;
box-shadow: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
white-space: nowrap;
-webkit-user-select: none;
user-select: none;
border-radius: 2px;
width: auto;
height: auto;
background-image: none;
padding: 11px 20px 11px;
font-size: 12px;
text-transform: uppercase;
background-color: #1c4866;
color: #ffffff;
text-decoration: none;
}
.ai-note { font-style: italic; } .ai-btn:hover,
.ai-btn:focus {
color: #ffffff;
background-color: #173a52;
}
.ai-list-inline { margin: 0; padding: 0; list-style: none; } .ai-btn-green {
.ai-list-inline li { display: inline-block; margin: 0; } background-color: #14b552;
}
.ai-footer-links a::after { content: "\007c"; color: #ffffff; opacity: .5; margin: 0 7px; } .ai-btn-green:hover,
.ai-footer-links li:last-child a::after { display: none; } .ai-btn-green:focus {
color: #ffffff;
background-color: #119e48;
}
.ai-module { border: 1px solid #eeeeee; margin-top: 12px; padding: 15px; } .ai-brand-module {
.ai-module::after { content: ""; display: table; clear: both; } background-color: #1c4866;
padding: 15px;
color: #ffffff;
font-size: 12px;
}
.ai-container { margin-top: 12px; } .ai-brand-module p {
font-size: 12px;
}
.ai-field-controls-wrap { padding: 15px; border: 1px solid #eeeeee; } .ai-brand-module a:not(.ai-btn) {
.ai-field-controls-wrap::after { content: ""; display: table; clear: both; } color: #ffcc00;
text-decoration: none;
}
.ai-field-controls { float: left; } .ai-brand-module-actions {
.ai-field-controls .button { margin-right: 5px; } text-align: right;
}
.ai-field-controls-visibility { float: right; padding-top: 4px; } .ai-brand-module-actions p {
margin: 0;
}
.ai-field-controls-visibility a { text-decoration: none; } .ai-header {
margin: 12px 0 -12px;
height: 40px;
}
.ai-fields-expand-all { margin-right: 8px; padding-right: 6px; border-right: 1px solid #f1f1f1; } .ai-header-actions {
text-align: right;
}
.ai-fields-container { padding: 15px; border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; } .ai-logo {
display: inline-block;
position: relative;
top: -2px;
}
.ai-field-repeatable { margin-bottom: 15px; border: 1px solid #d7d7d7; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.07); } .ai-logo img {
.ai-field-repeatable:last-child { margin-bottom: 0; } height: 44px;
.ai-field-repeatable:only-child .ai-remove-field { display: none; } }
.ai-field-container { padding: 15px; background-color: #ffffff; } .ai-note {
.ai-field-container::after { content: ""; display: table; clear: both; } font-style: italic;
}
.ai-field-head { padding: 8px 15px 5px; line-height: normal; background-color: #d7d7d7; background: linear-gradient(to bottom, #f1f1f1, #d7d7d7); border-bottom: 1px solid #cccccc; } .ai-list-inline {
.ai-field-head::after { content: ""; display: table; clear: both; } margin: 0;
.ai-field-head .toggle-indicator { border-radius: 50%; } padding: 0;
.ai-fields-sortable .ai-field-head { cursor: move; } list-style: none;
}
.ai-field-sort-handle { position: relative; top: 1px; color: #0073aa; } .ai-list-inline li {
.ai-field-sort-handle .dashicons { font-size: 18px; } display: inline-block;
margin: 0;
}
.ai-field-title { font-weight: bold; font-size: 1.05em; margin-left: 8px; padding-top: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 80%; display: inline-block; } .ai-footer-links a::after {
content: "\007c";
color: #ffffff;
opacity: .5;
margin: 0 7px;
}
.ai-field-toggle { float: right; } .ai-footer-links li:last-child a::after {
display: none;
}
.ai-field-cover { float: left; width: 100px; height: 100px; margin-right: 15px; background-color: #eeeeee; border: 1px solid #cccccc; } .ai-module {
border: 1px solid #eeeeee;
margin-top: 12px;
padding: 15px;
}
.ai-field-split { float: left; width: calc(50% - 71px); margin-right: 15px; } .ai-module::after {
.ai-field-split:nth-child(2n + 1) { margin-right: 0; } content: "";
display: table;
clear: both;
}
.ai-container .button .dashicons, .ai-module .button .dashicons { font-size: 1.2em; line-height: 1.7em; } .ai-container {
margin-top: 12px;
}
.ai-form-field-group { padding: 15px; border: 1px solid #f1f1f1; margin-bottom: 15px; } .ai-field-controls-wrap {
.ai-form-field-group :last-child { margin-bottom: 0; } padding: 15px;
.ai-form-field-group-title { margin-top: 0; } border: 1px solid #eeeeee;
}
.ai-form-field { margin-bottom: 15px; } .ai-field-controls-wrap::after {
.ai-form-field label { display: inline-block; font-weight: bold; margin-bottom: 3px; } content: "";
.ai-form-field input[type="text"], .ai-form-field input[type="url"], .ai-form-field input[type="search"], .ai-form-field input[type="email"], .ai-form-field input[type="password"], .ai-form-field input[type="number"], .ai-form-field input[type="tel"], .ai-form-field input[type="date"], .ai-form-field textarea { width: 100%; } display: table;
.ai-form-field input[type="checkbox"], .ai-form-field input[type="radio"] { display: inline-block; position: relative; top: 1px; } clear: both;
}
.ai-module-settings .ai-form-field input[type="text"], .ai-module-settings .ai-form-field input[type="url"], .ai-module-settings .ai-form-field input[type="search"], .ai-module-settings .ai-form-field input[type="email"], .ai-module-settings .ai-form-field input[type="password"], .ai-module-settings .ai-form-field input[type="number"], .ai-module-settings .ai-form-field input[type="tel"], .ai-module-settings .ai-form-field input[type="date"], .ai-module-settings .ai-form-field textarea, .ai-module-settings .ai-form-field select { width: 200px; max-width: 100%; display: block; } .ai-field-controls {
float: left;
}
.ai-form-field-addon { position: relative; } .ai-field-controls .button {
.ai-form-field-addon input { padding-right: 80px; } margin-right: 5px;
.ai-form-field-addon button { position: absolute; top: 0; right: -2px; } }
.ai-field-help { margin: 5px 0 0; font-style: italic; color: #999; } .ai-field-controls-visibility {
float: right;
padding-top: 4px;
}
.ai-remove-field { float: right; } .ai-field-controls-visibility a {
text-decoration: none;
}
.ai-field-upload-cover { display: block; position: relative; width: 100px; height: 100px; text-decoration: none; color: initial; overflow: hidden; } .ai-fields-expand-all {
.ai-field-upload-cover img { max-width: 100%; display: none; } margin-right: 8px;
padding-right: 6px;
border-right: 1px solid #f1f1f1;
}
.ai-has-cover .ai-remove-cover { display: block; } .ai-fields-container {
.ai-has-cover .ai-field-cover-placeholder { display: none; } padding: 15px;
.ai-has-cover img { display: inline-block; } border-left: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
}
.ai-field-cover-placeholder { text-align: center; font-style: normal; font-size: .9em; opacity: .8; padding-top: 28px; } .ai-field-repeatable {
.ai-field-cover-placeholder::before { content: ""; display: inline-block; font: 400 20px/1 dashicons; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none !important; display: block; } margin-bottom: 15px;
.ai-track-loading .ai-field-cover-placeholder::before { content: "\f463"; animation: rotation 1.2s infinite linear; } border: 1px solid #d7d7d7;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.07);
}
.ai-remove-cover { color: #ffffff; background-color: #ff0000; width: 16px; height: 16px; font-size: 12px; cursor: pointer; position: absolute; top: 0; right: 0; opacity: .9; transition: opacity 0.18s ease-in; display: none; text-align: center; } .ai-field-repeatable:last-child {
.ai-remove-cover:hover { opacity: 1; } margin-bottom: 0;
.ai-remove-cover .dashicons { font-size: 16px; width: 100%; height: 100%; } }
.ai-remove-all-fields .dashicons, .ai-remove-field .dashicons { color: #ff0000; } .ai-field-repeatable:only-child .ai-remove-field {
display: none;
}
.ai-add-field-batch .dashicons, .ai-add-field .dashicons { color: #0073aa; } .ai-field-container {
padding: 15px;
background-color: #ffffff;
}
.ai-info-box { background: #fffce6; color: #948832; font-size: 12px; border: solid 1px #eeeac9; padding: 15px; margin: 0 0 15px 0; } .ai-field-container::after {
content: "";
display: table;
clear: both;
}
.ai-player-type-message { display: none; } .ai-field-container-links {
display: flex;
grid-gap: 20px;
}
.ai-drop-placeholder { background-color: #f1f1f1; border: 2px dashed #cccccc; opacity: 0.5; margin-bottom: 15px; } .ai-field-container-links .ai-field-split {
width: 50%;
float: none;
}
.ai-collapsed .ai-field-container { display: none; } .ai-field-head {
.ai-collapsed .toggle-indicator::before { content: "\f140" !important; } padding: 8px 15px 5px;
line-height: normal;
background-color: #d7d7d7;
background: linear-gradient(to bottom, #f1f1f1, #d7d7d7);
border-bottom: 1px solid #cccccc;
}
.ai-module-shortcode .code { display: block; width: 100%; margin-top: 3px; padding: 10px 10px 8px; font-weight: bold; background: #f1f1f1; } .ai-field-head::after {
content: "";
display: table;
clear: both;
}
.ai-sync-soundcloud.button { display: none; } .ai-field-head .toggle-indicator {
.ai-sync-soundcloud.button::before { content: "\f463"; color: #d54e21; display: inline-block; font: 400 19px/1 dashicons; speak: none; position: relative; left: -1px; top: 4px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; vertical-align: top; } border-radius: 50%;
.ai-track-loading .ai-sync-soundcloud.button::before { animation: rotation 1.2s infinite linear; } }
.ai-soundcloud-track .ai-sync-soundcloud { display: inline-block; } .ai-fields-sortable .ai-field-head {
.ai-soundcloud-track .ai-upload { display: none; } cursor: move;
}
@media (max-width: 1100px) { .ai-field-controls, .ai-field-controls-visibility { margin: 0; float: none; width: 100%; } .ai-field-sort-handle {
.ai-field-controls { margin-bottom: 5px; } position: relative;
.ai-field-split { float: none; width: 100%; } top: 1px;
.ai-field-cover { margin-bottom: 15px; } color: #0073aa;
.ai-footer { text-align: center; } }
.ai-footer .ai-brand-module-actions { text-align: center; margin-top: 10px; }
.ai-footer [class^="ai-col"] { width: 100%; } } .ai-field-sort-handle .dashicons {
@media (max-width: 782px) { .ai-container .button .dashicons, .ai-module .button .dashicons { line-height: 1.2em; } font-size: 18px;
.ai-form-field-addon .button { top: 2px; } } }
@media (max-width: 600px) { .ai-field-controls .button { width: 100%; }
.ai-header { text-align: center; } .ai-field-title {
.ai-header .ai-brand-module-actions { margin-top: 10px; } font-weight: bold;
.ai-header .ai-btn { display: block; } font-size: 1.05em;
.ai-header [class^="ai-col"] { width: 100%; } } margin-left: 8px;
padding-top: 3px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 80%;
display: inline-block;
}
.ai-field-toggle {
float: right;
}
.ai-field-cover {
float: left;
width: 100px;
height: 100px;
margin-right: 15px;
background-color: #eeeeee;
border: 1px solid #cccccc;
}
.ai-field-split {
float: left;
width: calc(50% - 71px);
margin-right: 15px;
}
.ai-field-split:nth-child(2n + 1) {
margin-right: 0;
}
.ai-container .button .dashicons,
.ai-module .button .dashicons {
font-size: 1.2em;
line-height: 1.7em;
}
.ai-form-field-group {
padding: 15px;
border: 1px solid #f1f1f1;
margin-bottom: 15px;
}
.ai-form-field-group :last-child {
margin-bottom: 0;
}
.ai-form-field-group-title {
margin-top: 0;
}
.ai-form-field {
margin-bottom: 15px;
}
.ai-form-field label {
display: inline-block;
font-weight: bold;
margin-bottom: 3px;
}
.ai-form-field input[type="text"],
.ai-form-field input[type="url"],
.ai-form-field input[type="search"],
.ai-form-field input[type="email"],
.ai-form-field input[type="password"],
.ai-form-field input[type="number"],
.ai-form-field input[type="tel"],
.ai-form-field input[type="date"],
.ai-form-field textarea,
.ai-form-field select {
width: 100%;
}
.ai-form-field input[type="checkbox"],
.ai-form-field input[type="radio"] {
display: inline-block;
position: relative;
top: 1px;
}
.ai-module-settings .ai-form-field input[type="text"],
.ai-module-settings .ai-form-field input[type="url"],
.ai-module-settings .ai-form-field input[type="search"],
.ai-module-settings .ai-form-field input[type="email"],
.ai-module-settings .ai-form-field input[type="password"],
.ai-module-settings .ai-form-field input[type="number"],
.ai-module-settings .ai-form-field input[type="tel"],
.ai-module-settings .ai-form-field input[type="date"],
.ai-module-settings .ai-form-field textarea,
.ai-module-settings .ai-form-field select {
width: 200px;
max-width: 100%;
display: block;
}
.ai-form-field-addon {
position: relative;
}
.ai-form-field-addon input {
padding-right: 80px;
}
.ai-form-field-addon button {
position: absolute;
top: 0;
right: -2px;
}
.ai-field-help {
margin: 5px 0 0;
font-style: italic;
color: #999;
}
.ai-form-field-checkbox-secondary {
margin-top: 7px;
}
.ai-remove-field {
float: right;
}
.ai-field-upload-cover {
display: block;
position: relative;
width: 100px;
height: 100px;
text-decoration: none;
color: initial;
overflow: hidden;
}
.ai-field-upload-cover img {
max-width: 100%;
display: none;
}
.ai-has-cover .ai-remove-cover {
display: block;
}
.ai-has-cover .ai-field-cover-placeholder {
display: none;
}
.ai-has-cover img {
display: inline-block;
}
.ai-field-cover-placeholder {
text-align: center;
font-style: normal;
font-size: .9em;
opacity: .8;
padding-top: 28px;
}
.ai-field-cover-placeholder::before {
content: "";
display: inline-block;
font: 400 20px/1 dashicons;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
display: block;
}
.ai-track-loading .ai-field-cover-placeholder::before {
content: "\f463";
animation: rotation 1.2s infinite linear;
}
.ai-remove-cover {
color: #ffffff;
background-color: #ff0000;
width: 16px;
height: 16px;
font-size: 12px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
opacity: .9;
transition: opacity 0.18s ease-in;
display: none;
text-align: center;
}
.ai-remove-cover:hover {
opacity: 1;
}
.ai-remove-cover .dashicons {
font-size: 16px;
width: 100%;
height: 100%;
}
.ai-remove-all-fields .dashicons,
.ai-remove-field .dashicons {
color: #ff0000;
}
.ai-add-field-batch .dashicons,
.ai-add-field .dashicons {
color: #0073aa;
}
.ai-info-box {
background: #fffce6;
color: #948832;
font-size: 12px;
border: solid 1px #eeeac9;
padding: 15px;
margin: 0 0 15px 0;
}
.ai-player-type-message {
display: none;
}
.ai-drop-placeholder {
background-color: #f1f1f1;
border: 2px dashed #cccccc;
opacity: 0.5;
margin-bottom: 15px;
}
.ai-collapsed .ai-field-container {
display: none;
}
.ai-collapsed .toggle-indicator::before {
content: "\f140" !important;
}
.ai-module-shortcode .code {
display: block;
width: 100%;
margin-top: 3px;
padding: 10px 10px 8px;
font-weight: bold;
background: #f1f1f1;
}
.ai-sync-soundcloud.button {
display: none;
}
.ai-sync-soundcloud.button::before {
content: "\f463";
color: #d54e21;
display: inline-block;
font: 400 19px/1 dashicons;
speak: none;
position: relative;
left: -1px;
top: 4px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: top;
}
.ai-track-loading .ai-sync-soundcloud.button::before {
animation: rotation 1.2s infinite linear;
}
.ai-soundcloud-track .ai-sync-soundcloud {
display: inline-block;
}
.ai-soundcloud-track .ai-upload {
display: none;
}
@media (max-width: 1100px) {
.ai-field-controls,
.ai-field-controls-visibility {
margin: 0;
float: none;
width: 100%;
}
.ai-field-controls {
margin-bottom: 5px;
}
.ai-field-container-links {
display: block;
}
.ai-field-container-links .ai-field-split,
.ai-field-split {
float: none;
width: 100%;
}
.ai-field-cover {
margin-bottom: 15px;
}
.ai-footer {
text-align: center;
}
.ai-footer .ai-brand-module-actions {
text-align: center;
margin-top: 10px;
}
.ai-footer [class^="ai-col"] {
width: 100%;
}
}
@media (max-width: 782px) {
.ai-container .button .dashicons,
.ai-module .button .dashicons {
line-height: 1.2em;
}
.ai-form-field-addon .button {
top: 2px;
}
}
@media (max-width: 600px) {
.ai-field-controls .button {
width: 100%;
}
.ai-header {
text-align: center;
}
.ai-header .ai-brand-module-actions {
margin-top: 10px;
}
.ai-header .ai-btn {
display: block;
}
.ai-header [class^="ai-col"] {
width: 100%;
}
}

File diff suppressed because one or more lines are too long

View File

@ -241,6 +241,16 @@ $border-color: $lighter-grey !default;
background-color: $white; background-color: $white;
} }
.ai-field-container-links {
display: flex;
grid-gap: 20px;
.ai-field-split {
width: 50%;
float: none;
}
}
.ai-field-head { .ai-field-head {
@include clearfix; @include clearfix;
padding: 8px $base-pad 5px; padding: 8px $base-pad 5px;
@ -347,7 +357,8 @@ $border-color: $lighter-grey !default;
input[type="number"], input[type="number"],
input[type="tel"], input[type="tel"],
input[type="date"], input[type="date"],
textarea { textarea,
select {
width: 100%; width: 100%;
} }
@ -398,6 +409,10 @@ $border-color: $lighter-grey !default;
color: #999; color: #999;
} }
.ai-form-field-checkbox-secondary {
margin-top: 7px;
}
.ai-remove-field { .ai-remove-field {
float: right; float: right;
} }
@ -595,6 +610,11 @@ $border-color: $lighter-grey !default;
margin-bottom: 5px; margin-bottom: 5px;
} }
.ai-field-container-links {
display: block;
}
.ai-field-container-links .ai-field-split,
.ai-field-split { .ai-field-split {
float: none; float: none;
width: 100%; width: 100%;

View File

@ -19,6 +19,7 @@ jQuery(function($) {
removeFieldButtonClassName: ".ai-remove-field", removeFieldButtonClassName: ".ai-remove-field",
$removeAllTracksButton: $(".ai-remove-all-fields"), $removeAllTracksButton: $(".ai-remove-all-fields"),
$batchUploadButton: $(".ai-add-field-batch"), $batchUploadButton: $(".ai-add-field-batch"),
$trackDownloadUsesTrackUrlButton: $(".ai-use-track-url-download"),
audioUploadButtonClassName: ".ai-upload", audioUploadButtonClassName: ".ai-upload",
coverUploadButtonClassName: ".ai-field-upload-cover", coverUploadButtonClassName: ".ai-field-upload-cover",
coverRemoveClassName: ".ai-remove-cover", coverRemoveClassName: ".ai-remove-cover",
@ -27,6 +28,8 @@ jQuery(function($) {
trackArtistClassName: ".ai-track-artist", trackArtistClassName: ".ai-track-artist",
trackLyricsClassName: ".ai-track-lyrics", trackLyricsClassName: ".ai-track-lyrics",
trackUrlClassName: ".ai-track-url", trackUrlClassName: ".ai-track-url",
trackDownloadUrlClassName: ".ai-track-download-url",
trackDownloadUsesTrackUrlClassName: ".ai-track-download-uses-track-url",
hasCoverClass: "ai-has-cover", hasCoverClass: "ai-has-cover",
fieldHeadClassName: ".ai-field-head", fieldHeadClassName: ".ai-field-head",
fieldCollapsedClass: "ai-collapsed", fieldCollapsedClass: "ai-collapsed",
@ -113,7 +116,7 @@ jQuery(function($) {
$field.attr("data-uid", newHash); $field.attr("data-uid", newHash);
$field $field
.find("input, textarea") .find("input, textarea, select")
.not(":button") .not(":button")
.each(function() { .each(function() {
var $this = $(this); var $this = $(this);
@ -154,17 +157,20 @@ jQuery(function($) {
* and appends it back after resetting it * and appends it back after resetting it
* *
* @param {string} [hash] - UUID or random hash * @param {string} [hash] - UUID or random hash
* @param {jQuery} [$container] - A jQuery element as the container
* *
* return {Object} - jQuery object * return {Object} - jQuery object
*/ */
function getNewTrackField(hash) { function getNewTrackField(hash, $container) {
var newHash = hash || uuid(); var newHash = hash || uuid();
var $clone = el.$trackContainer var $parent = $container || el.$trackContainer;
var $clone = $parent
.find(el.trackFieldClassName) .find(el.trackFieldClassName)
.first() .first()
.clone() .clone()
.hide() .hide()
.fadeIn(); .show();
resetField($clone, newHash); resetField($clone, newHash);
return $clone; return $clone;
@ -312,12 +318,22 @@ jQuery(function($) {
}); });
el.$expandAllButton.on("click", function(e) { el.$expandAllButton.on("click", function(e) {
expandField(el.$trackContainer.find(el.trackFieldClassName)); var $this = $(this);
var $container = $this
.closest(".ai-container")
.find(".ai-fields-container");
expandField($container.find(el.trackFieldClassName));
e.preventDefault(); e.preventDefault();
}); });
el.$collapseAllButton.on("click", function(e) { el.$collapseAllButton.on("click", function(e) {
collapseField(el.$trackContainer.find(el.trackFieldClassName)); var $this = $(this);
var $container = $this
.closest(".ai-container")
.find(".ai-fields-container");
collapseField($container.find(el.trackFieldClassName));
e.preventDefault(); e.preventDefault();
}); });
@ -335,14 +351,23 @@ jQuery(function($) {
$fieldTitle.text($this.val()); $fieldTitle.text($this.val());
}); });
/* Add Track Top*/ /* Add Field Top */
el.$addTrackButtonTop.on("click", function() { el.$addTrackButtonTop.on("click", function() {
el.$trackContainer.prepend(getNewTrackField()); var $this = $(this);
var $container = $this
.closest(".ai-container")
.find(".ai-fields-container");
$container.prepend(getNewTrackField(undefined, $container));
}); });
/* Add Track Bottom*/ /* Add Field Bottom */
el.$addTrackButtonBottom.on("click", function () { el.$addTrackButtonBottom.on("click", function() {
el.$trackContainer.append(getNewTrackField()); var $this = $(this);
var $container = $this
.closest(".ai-container")
.find(".ai-fields-container");
$container.append(getNewTrackField(undefined, $container));
}); });
/* Remove Track */ /* Remove Track */
@ -353,7 +378,11 @@ jQuery(function($) {
/* Remove All Tracks */ /* Remove All Tracks */
el.$removeAllTracksButton.on("click", function() { el.$removeAllTracksButton.on("click", function() {
var $trackFields = el.$trackContainer.find(el.trackFieldClassName); var $this = $(this);
var $container = $this
.closest(".ai-container")
.find(".ai-fields-container");
var $trackFields = $container.find(el.trackFieldClassName);
if (window.confirm(ai_scripts.messages.confirm_clear_tracks)) { if (window.confirm(ai_scripts.messages.confirm_clear_tracks)) {
if ($trackFields.length > 1) { if ($trackFields.length > 1) {
@ -402,7 +431,9 @@ jQuery(function($) {
onMediaSelect: function(media) { onMediaSelect: function(media) {
setTrackFieldCover($this.parents(el.trackFieldClassName), { setTrackFieldCover($this.parents(el.trackFieldClassName), {
id: media.id, id: media.id,
url: media.sizes.thumbnail.url, url: media.sizes.thumbnail
? media.sizes.thumbnail.url
: media.sizes.full.url,
alt: media.alt alt: media.alt
}); });
} }

View File

@ -5,7 +5,7 @@
* Description: AudioIgniter lets you create music playlists and embed them in your WordPress posts, pages or custom post types and serve your audio content in style! * Description: AudioIgniter lets you create music playlists and embed them in your WordPress posts, pages or custom post types and serve your audio content in style!
* Author: The CSSIgniter Team * Author: The CSSIgniter Team
* Author URI: https://www.cssigniter.com * Author URI: https://www.cssigniter.com
* Version: 1.7.3 * Version: 1.9.0
* Text Domain: audioigniter * Text Domain: audioigniter
* Domain Path: languages * Domain Path: languages
* *
@ -131,7 +131,7 @@ class AudioIgniter {
load_plugin_textdomain( 'audioigniter', false, dirname( self::plugin_basename() ) . '/languages' ); load_plugin_textdomain( 'audioigniter', false, dirname( self::plugin_basename() ) . '/languages' );
include_once( 'class-audioigniter-sanitizer.php' ); require_once 'class-audioigniter-sanitizer.php';
$this->sanitizer = new AudioIgniter_Sanitizer(); $this->sanitizer = new AudioIgniter_Sanitizer();
// Initialization needed in every request. // Initialization needed in every request.
@ -177,6 +177,9 @@ class AudioIgniter {
add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) ); add_action( 'add_meta_boxes', array( $this, 'add_meta_boxes' ) );
add_action( 'save_post', array( $this, 'save_post' ) ); add_action( 'save_post', array( $this, 'save_post' ) );
add_filter( "manage_{$this->post_type}_posts_columns", array( $this, 'filter_posts_columns' ) );
add_action( "manage_{$this->post_type}_posts_custom_column", array( $this, 'add_custom_columns' ), 10, 2 );
do_action( 'audioigniter_admin_init' ); do_action( 'audioigniter_admin_init' );
} }
@ -308,7 +311,7 @@ class AudioIgniter {
public function add_meta_boxes() { public function add_meta_boxes() {
add_meta_box( 'ai-meta-box-tracks', esc_html__( 'Tracks', 'audioigniter' ), array( $this, 'metabox_tracks' ), $this->post_type, 'normal', 'high' ); add_meta_box( 'ai-meta-box-tracks', esc_html__( 'Tracks', 'audioigniter' ), array( $this, 'metabox_tracks' ), $this->post_type, 'normal', 'high' );
add_meta_box( 'ai-meta-box-settings', esc_html__( 'Settings', 'audioigniter' ), array( $this, 'metabox_settings' ), $this->post_type, 'normal', 'high' ); add_meta_box( 'ai-meta-box-settings', esc_html__( 'Settings', 'audioigniter' ), array( $this, 'metabox_settings' ), $this->post_type, 'normal', 'high' );
add_meta_box( 'ai-meta-box-shortcode', esc_html__( 'Shortcode', 'audioigniter' ), array( $this, 'metabox_shortcode' ), $this->post_type, 'normal', 'high' ); add_meta_box( 'ai-meta-box-shortcode', esc_html__( 'Shortcode', 'audioigniter' ), array( $this, 'metabox_shortcode' ), $this->post_type, 'side', 'default' );
} }
/** /**
@ -328,7 +331,7 @@ class AudioIgniter {
<?php $this->metabox_tracks_header(); ?> <?php $this->metabox_tracks_header(); ?>
<div class="ai-container"> <div class="ai-container">
<?php $this->metabox_tracks_field_controls( 'top' ); ?> <?php $this->metabox_tracks_field_controls( 'top', $object->ID ); ?>
<?php $container_classes = apply_filters( 'audioigniter_metabox_tracks_container_classes', array( 'ai-fields-container' ) ); ?> <?php $container_classes = apply_filters( 'audioigniter_metabox_tracks_container_classes', array( 'ai-fields-container' ) ); ?>
@ -344,12 +347,11 @@ class AudioIgniter {
?> ?>
</div> </div>
<?php $this->metabox_tracks_field_controls( 'bottom' ); ?> <?php $this->metabox_tracks_field_controls( 'bottom', $object->ID ); ?>
</div> </div>
<?php $this->metabox_tracks_footer(); ?> <?php $this->metabox_tracks_footer(); ?>
<input type="hidden" name="ai_nonce" id="ai_nonce" value="<?php echo esc_attr( wp_create_nonce( self::plugin_basename() ) ); ?>"/>
<?php <?php
} }
@ -447,12 +449,13 @@ class AudioIgniter {
protected function metabox_tracks_repeatable_track_field( $track = array() ) { protected function metabox_tracks_repeatable_track_field( $track = array() ) {
$track = wp_parse_args( $track, self::get_default_track_values() ); $track = wp_parse_args( $track, self::get_default_track_values() );
$cover_id = $track['cover_id']; $cover_id = $track['cover_id'];
$title = $track['title']; $title = $track['title'];
$artist = $track['artist']; $artist = $track['artist'];
$track_url = $track['track_url']; $track_url = $track['track_url'];
$buy_link = $track['buy_link']; $buy_link = $track['buy_link'];
$download_url = $track['download_url']; $download_url = $track['download_url'];
$download_uses_track_url = (int) $track['download_uses_track_url'];
$cover_url = wp_get_attachment_image_src( intval( $cover_id ), 'thumbnail' ); $cover_url = wp_get_attachment_image_src( intval( $cover_id ), 'thumbnail' );
if ( ! empty( $cover_url[0] ) ) { if ( ! empty( $cover_url[0] ) ) {
@ -602,7 +605,12 @@ class AudioIgniter {
name="ai_playlist_tracks[<?php echo esc_attr( $uid ); ?>][download_url]" name="ai_playlist_tracks[<?php echo esc_attr( $uid ); ?>][download_url]"
placeholder="<?php esc_attr_e( 'Download URL', 'audioigniter' ); ?>" placeholder="<?php esc_attr_e( 'Download URL', 'audioigniter' ); ?>"
value="<?php echo esc_url( $download_url ); ?>" value="<?php echo esc_url( $download_url ); ?>"
<?php if ( $download_uses_track_url ) : ?>
disabled
<?php endif; ?>
/> />
<?php do_action( 'audioigniter_metabox_tracks_repeatable_track_field_after_download_url_button', $track, $uid ); ?>
</div> </div>
<?php do_action( 'audioigniter_metabox_tracks_repeatable_track_fields_column_2', $track, $uid ); ?> <?php do_action( 'audioigniter_metabox_tracks_repeatable_track_fields_column_2', $track, $uid ); ?>
@ -618,7 +626,7 @@ class AudioIgniter {
<?php <?php
} }
protected function metabox_tracks_field_controls( $location ) { protected function metabox_tracks_field_controls( $location, $post_id ) {
?> ?>
<div class="ai-field-controls-wrap"> <div class="ai-field-controls-wrap">
<div class="ai-field-controls"> <div class="ai-field-controls">
@ -627,7 +635,7 @@ class AudioIgniter {
<?php esc_html_e( 'Add Track', 'audioigniter' ); ?> <?php esc_html_e( 'Add Track', 'audioigniter' ); ?>
</button> </button>
<?php do_action( 'audioigniter_metabox_tracks_field_controls' ); ?> <?php do_action( 'audioigniter_metabox_tracks_field_controls', $location, $post_id ); ?>
<button type="button" class="button ai-remove-all-fields"> <button type="button" class="button ai-remove-all-fields">
<span class="dashicons dashicons-dismiss"></span> <span class="dashicons dashicons-dismiss"></span>
@ -1078,12 +1086,13 @@ class AudioIgniter {
public static function get_default_track_values() { public static function get_default_track_values() {
return apply_filters( 'audioigniter_default_track_values', array( return apply_filters( 'audioigniter_default_track_values', array(
'cover_id' => '', 'cover_id' => '',
'title' => '', 'title' => '',
'artist' => '', 'artist' => '',
'track_url' => '', 'track_url' => '',
'buy_link' => '', 'buy_link' => '',
'download_url' => '', 'download_url' => '',
'download_uses_track_url' => 0,
) ); ) );
} }
@ -1263,7 +1272,7 @@ class AudioIgniter {
$track_response['subtitle'] = $track['artist']; $track_response['subtitle'] = $track['artist'];
$track_response['audio'] = $track['track_url']; $track_response['audio'] = $track['track_url'];
$track_response['buyUrl'] = $track['buy_link']; $track_response['buyUrl'] = $track['buy_link'];
$track_response['downloadUrl'] = $track['download_url']; $track_response['downloadUrl'] = $track['download_uses_track_url'] ? $track['track_url'] : $track['download_url'];
$track_response['downloadFilename'] = $this->get_filename_from_url( $track['download_url'] ); $track_response['downloadFilename'] = $this->get_filename_from_url( $track['download_url'] );
if ( ! $track_response['downloadFilename'] ) { if ( ! $track_response['downloadFilename'] ) {
@ -1287,6 +1296,22 @@ class AudioIgniter {
wp_send_json( $response ); wp_send_json( $response );
} }
public function filter_posts_columns( $columns ) {
$date = $columns['date'];
unset( $columns['date'] );
$columns['shortcode'] = __( 'Shortcode', 'audioigniter' );
$columns['date'] = $date;
return $columns;
}
public function add_custom_columns( $column, $post_id ) {
if ( 'shortcode' === $column ) {
?><input type="text" class="code" value="<?php echo esc_attr( sprintf( '[ai_playlist id="%s"]', $post_id ) ); ?>"><?php
}
}
function get_filename_from_url( $url ) { function get_filename_from_url( $url ) {
$struct = wp_parse_url( $url ); $struct = wp_parse_url( $url );

View File

@ -80,12 +80,13 @@ class AudioIgniter_Sanitizer {
$sanitized_track = array(); $sanitized_track = array();
$sanitized_track['cover_id'] = intval( $track['cover_id'] ); $sanitized_track['cover_id'] = intval( $track['cover_id'] );
$sanitized_track['title'] = sanitize_text_field( $track['title'] ); $sanitized_track['title'] = sanitize_text_field( $track['title'] );
$sanitized_track['artist'] = sanitize_text_field( $track['artist'] ); $sanitized_track['artist'] = sanitize_text_field( $track['artist'] );
$sanitized_track['track_url'] = esc_url_raw( $track['track_url'] ); $sanitized_track['track_url'] = esc_url_raw( $track['track_url'] );
$sanitized_track['buy_link'] = esc_url_raw( $track['buy_link'] ); $sanitized_track['buy_link'] = esc_url_raw( $track['buy_link'] );
$sanitized_track['download_url'] = esc_url_raw( $track['download_url'] ); $sanitized_track['download_url'] = esc_url_raw( $track['download_url'] );
$sanitized_track['download_uses_track_url'] = ! empty( $track['download_uses_track_url'] ) ? 1 : 0;
$sanitized_track = array_map( 'trim', $sanitized_track ); $sanitized_track = array_map( 'trim', $sanitized_track );

View File

@ -2,7 +2,7 @@
msgid "" msgid ""
msgstr "" msgstr ""
"Project-Id-Version: AudioIgniter\n" "Project-Id-Version: AudioIgniter\n"
"POT-Creation-Date: 2021-12-14 12:04+0200\n" "POT-Creation-Date: 2022-06-28 14:39+0300\n"
"PO-Revision-Date: 2016-08-29 19:22+0300\n" "PO-Revision-Date: 2016-08-29 19:22+0300\n"
"Last-Translator: Anastis Sourgoutsidis <anastis@cssigniter.com>\n" "Last-Translator: Anastis Sourgoutsidis <anastis@cssigniter.com>\n"
"Language-Team: Anastis Sourgoutsidis <anastis@cssigniter.com>\n" "Language-Team: Anastis Sourgoutsidis <anastis@cssigniter.com>\n"
@ -10,7 +10,7 @@ msgstr ""
"Content-Type: text/plain; charset=UTF-8\n" "Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n" "Content-Transfer-Encoding: 8bit\n"
"Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n" "Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n"
"X-Generator: Poedit 3.0.1\n" "X-Generator: Poedit 3.1\n"
"X-Poedit-Basepath: ..\n" "X-Poedit-Basepath: ..\n"
"X-Poedit-WPHeader: audioigniter.php\n" "X-Poedit-WPHeader: audioigniter.php\n"
"X-Poedit-SourceCharset: UTF-8\n" "X-Poedit-SourceCharset: UTF-8\n"
@ -22,348 +22,348 @@ msgstr ""
"X-Poedit-SearchPathExcluded-0: *.js\n" "X-Poedit-SearchPathExcluded-0: *.js\n"
#. translators: %s is the track's title. #. translators: %s is the track's title.
#: audioigniter.php:213 #: audioigniter.php:216
#, php-format #, php-format
msgid "Play %s" msgid "Play %s"
msgstr "" msgstr ""
#. translators: %s is the track's title. #. translators: %s is the track's title.
#: audioigniter.php:215 #: audioigniter.php:218
#, php-format #, php-format
msgid "Pause %s" msgid "Pause %s"
msgstr "" msgstr ""
#: audioigniter.php:216 #: audioigniter.php:219
msgid "Previous track" msgid "Previous track"
msgstr "" msgstr ""
#: audioigniter.php:217 #: audioigniter.php:220
msgid "Next track" msgid "Next track"
msgstr "" msgstr ""
#: audioigniter.php:218 #: audioigniter.php:221
msgid "Toggle track listing repeat" msgid "Toggle track listing repeat"
msgstr "" msgstr ""
#: audioigniter.php:219 #: audioigniter.php:222
msgid "Toggle track repeat" msgid "Toggle track repeat"
msgstr "" msgstr ""
#: audioigniter.php:220 #: audioigniter.php:223
msgid "Toggle track listing visibility" msgid "Toggle track listing visibility"
msgstr "" msgstr ""
#: audioigniter.php:221 #: audioigniter.php:224
msgid "Buy this track" msgid "Buy this track"
msgstr "" msgstr ""
#: audioigniter.php:222 #: audioigniter.php:225
msgid "Download this track" msgid "Download this track"
msgstr "" msgstr ""
#: audioigniter.php:223 #: audioigniter.php:226
msgid "Volume Up" msgid "Volume Up"
msgstr "" msgstr ""
#: audioigniter.php:224 #: audioigniter.php:227
msgid "Volume Down" msgid "Volume Down"
msgstr "" msgstr ""
#: audioigniter.php:225 #: audioigniter.php:228
msgid "Open track lyrics" msgid "Open track lyrics"
msgstr "" msgstr ""
#: audioigniter.php:226 #: audioigniter.php:229
msgid "Set playback rate" msgid "Set playback rate"
msgstr "" msgstr ""
#: audioigniter.php:227 #: audioigniter.php:230
msgid "Skip forward" msgid "Skip forward"
msgstr "" msgstr ""
#: audioigniter.php:228 #: audioigniter.php:231
msgid "Skip backward" msgid "Skip backward"
msgstr "" msgstr ""
#: audioigniter.php:229 #: audioigniter.php:232
msgid "Shuffle" msgid "Shuffle"
msgstr "" msgstr ""
#: audioigniter.php:234 #: audioigniter.php:237
msgid "" msgid ""
"Do you really want to remove all tracks? (This will not delete your audio " "Do you really want to remove all tracks? (This will not delete your audio "
"files)." "files)."
msgstr "" msgstr ""
#: audioigniter.php:235 #: audioigniter.php:238
msgid "Select or upload audio media" msgid "Select or upload audio media"
msgstr "" msgstr ""
#: audioigniter.php:236 #: audioigniter.php:239
msgid "Select a cover image" msgid "Select a cover image"
msgstr "" msgstr ""
#: audioigniter.php:273 #: audioigniter.php:276
msgctxt "post type general name" msgctxt "post type general name"
msgid "Playlists" msgid "Playlists"
msgstr "" msgstr ""
#: audioigniter.php:274 audioigniter.php:289 #: audioigniter.php:277 audioigniter.php:292
msgctxt "post type singular name" msgctxt "post type singular name"
msgid "Playlist" msgid "Playlist"
msgstr "" msgstr ""
#: audioigniter.php:275 #: audioigniter.php:278
msgctxt "admin menu" msgctxt "admin menu"
msgid "Playlists" msgid "Playlists"
msgstr "" msgstr ""
#: audioigniter.php:276 #: audioigniter.php:279
msgctxt "add new on admin bar" msgctxt "add new on admin bar"
msgid "Playlist" msgid "Playlist"
msgstr "" msgstr ""
#: audioigniter.php:277 audioigniter.php:278 #: audioigniter.php:280 audioigniter.php:281
msgid "Add New Playlist" msgid "Add New Playlist"
msgstr "" msgstr ""
#: audioigniter.php:279 #: audioigniter.php:282
msgid "Edit Playlist" msgid "Edit Playlist"
msgstr "" msgstr ""
#: audioigniter.php:280 #: audioigniter.php:283
msgid "New Playlist" msgid "New Playlist"
msgstr "" msgstr ""
#: audioigniter.php:281 #: audioigniter.php:284
msgid "View Playlist" msgid "View Playlist"
msgstr "" msgstr ""
#: audioigniter.php:282 #: audioigniter.php:285
msgid "Search Playlists" msgid "Search Playlists"
msgstr "" msgstr ""
#: audioigniter.php:283 #: audioigniter.php:286
msgid "No playlists found" msgid "No playlists found"
msgstr "" msgstr ""
#: audioigniter.php:284 #: audioigniter.php:287
msgid "No playlists found in the trash" msgid "No playlists found in the trash"
msgstr "" msgstr ""
#: audioigniter.php:309 audioigniter.php:830 #: audioigniter.php:312 audioigniter.php:838
msgid "Tracks" msgid "Tracks"
msgstr "" msgstr ""
#: audioigniter.php:310 #: audioigniter.php:313
msgid "Settings" msgid "Settings"
msgstr "" msgstr ""
#: audioigniter.php:311 #: audioigniter.php:314 audioigniter.php:1303
msgid "Shortcode" msgid "Shortcode"
msgstr "" msgstr ""
#: audioigniter.php:370 #: audioigniter.php:372
msgid "AudioIgniter Logo" msgid "AudioIgniter Logo"
msgstr "" msgstr ""
#: audioigniter.php:379 #: audioigniter.php:381
msgid "Upgrade to Pro" msgid "Upgrade to Pro"
msgstr "" msgstr ""
#: audioigniter.php:403 #: audioigniter.php:405
msgid "Support" msgid "Support"
msgstr "" msgstr ""
#: audioigniter.php:407 #: audioigniter.php:409
msgid "Documentation" msgid "Documentation"
msgstr "" msgstr ""
#: audioigniter.php:411 #: audioigniter.php:413
msgid "Rate this plugin" msgid "Rate this plugin"
msgstr "" msgstr ""
#. translators: %s is a URL. #. translators: %s is a URL.
#: audioigniter.php:434 #: audioigniter.php:436
#, php-format #, php-format
msgid "" msgid ""
"Thank you for creating with <a href=\"%s\" target=\"_blank\">AudioIgniter</a>" "Thank you for creating with <a href=\"%s\" target=\"_blank\">AudioIgniter</a>"
msgstr "" msgstr ""
#: audioigniter.php:479 #: audioigniter.php:482
msgid "Toggle track visibility" msgid "Toggle track visibility"
msgstr "" msgstr ""
#: audioigniter.php:490 #: audioigniter.php:493
msgid "Remove Cover Image" msgid "Remove Cover Image"
msgstr "" msgstr ""
#: audioigniter.php:503 #: audioigniter.php:506
msgid "Upload Cover" msgid "Upload Cover"
msgstr "" msgstr ""
#: audioigniter.php:521 audioigniter.php:528 #: audioigniter.php:524 audioigniter.php:531
msgid "Title" msgid "Title"
msgstr "" msgstr ""
#: audioigniter.php:536 audioigniter.php:543 #: audioigniter.php:539 audioigniter.php:546
msgid "Artist" msgid "Artist"
msgstr "" msgstr ""
#: audioigniter.php:552 audioigniter.php:559 #: audioigniter.php:555 audioigniter.php:562
msgid "Buy link" msgid "Buy link"
msgstr "" msgstr ""
#: audioigniter.php:572 audioigniter.php:581 #: audioigniter.php:575 audioigniter.php:584
msgid "Audio file or radio stream" msgid "Audio file or radio stream"
msgstr "" msgstr ""
#: audioigniter.php:585 #: audioigniter.php:588
msgid "Upload" msgid "Upload"
msgstr "" msgstr ""
#: audioigniter.php:596 audioigniter.php:603 #: audioigniter.php:599 audioigniter.php:606
msgid "Download URL" msgid "Download URL"
msgstr "" msgstr ""
#: audioigniter.php:612 #: audioigniter.php:620
msgid "Remove Track" msgid "Remove Track"
msgstr "" msgstr ""
#: audioigniter.php:627 #: audioigniter.php:635
msgid "Add Track" msgid "Add Track"
msgstr "" msgstr ""
#: audioigniter.php:634 #: audioigniter.php:642
msgid "Clear Playlist" msgid "Clear Playlist"
msgstr "" msgstr ""
#: audioigniter.php:640 #: audioigniter.php:648
msgid "Expand All" msgid "Expand All"
msgstr "" msgstr ""
#: audioigniter.php:643 #: audioigniter.php:651
msgid "Collapse All" msgid "Collapse All"
msgstr "" msgstr ""
#: audioigniter.php:682 #: audioigniter.php:690
msgid "Player &amp; Track listing" msgid "Player &amp; Track listing"
msgstr "" msgstr ""
#: audioigniter.php:687 #: audioigniter.php:695
msgid "Player Type" msgid "Player Type"
msgstr "" msgstr ""
#: audioigniter.php:718 #: audioigniter.php:726
msgid "Show track listing by default" msgid "Show track listing by default"
msgstr "" msgstr ""
#: audioigniter.php:732 #: audioigniter.php:740
msgid "Show track listing visibility toggle button" msgid "Show track listing visibility toggle button"
msgstr "" msgstr ""
#: audioigniter.php:746 #: audioigniter.php:754
msgid "Reverse track order" msgid "Reverse track order"
msgstr "" msgstr ""
#: audioigniter.php:752 #: audioigniter.php:760
msgid "Starting volume" msgid "Starting volume"
msgstr "" msgstr ""
#: audioigniter.php:763 #: audioigniter.php:771
msgid "0-100" msgid "0-100"
msgstr "" msgstr ""
#: audioigniter.php:768 #: audioigniter.php:776
msgid "Enter a value between 0 and 100 in increments of 10" msgid "Enter a value between 0 and 100 in increments of 10"
msgstr "" msgstr ""
#: audioigniter.php:782 #: audioigniter.php:790
msgid "Limit track listing height" msgid "Limit track listing height"
msgstr "" msgstr ""
#: audioigniter.php:788 audioigniter.php:798 #: audioigniter.php:796 audioigniter.php:806
msgid "Track listing height" msgid "Track listing height"
msgstr "" msgstr ""
#: audioigniter.php:803 #: audioigniter.php:811
msgid "Set a number of pixels" msgid "Set a number of pixels"
msgstr "" msgstr ""
#: audioigniter.php:809 #: audioigniter.php:817
msgid "Maximum player width" msgid "Maximum player width"
msgstr "" msgstr ""
#: audioigniter.php:817 #: audioigniter.php:825
msgid "Automatic width" msgid "Automatic width"
msgstr "" msgstr ""
#: audioigniter.php:822 #: audioigniter.php:830
#, php-format #, php-format
msgid "" msgid ""
"Set a number of pixels, or leave empty to automatically cover 100% of the " "Set a number of pixels, or leave empty to automatically cover 100% of the "
"available area (recommended)." "available area (recommended)."
msgstr "" msgstr ""
#: audioigniter.php:842 #: audioigniter.php:850
msgid "Show track numbers in tracklist" msgid "Show track numbers in tracklist"
msgstr "" msgstr ""
#: audioigniter.php:856 #: audioigniter.php:864
msgid "Show track covers in tracklist" msgid "Show track covers in tracklist"
msgstr "" msgstr ""
#: audioigniter.php:870 #: audioigniter.php:878
msgid "Show active track's cover" msgid "Show active track's cover"
msgstr "" msgstr ""
#: audioigniter.php:884 #: audioigniter.php:892
msgid "Show artist names" msgid "Show artist names"
msgstr "" msgstr ""
#: audioigniter.php:898 #: audioigniter.php:906
msgid "Show track extra buttons (buy link, download button etc)" msgid "Show track extra buttons (buy link, download button etc)"
msgstr "" msgstr ""
#: audioigniter.php:912 #: audioigniter.php:920
msgid "Open buy links in new window" msgid "Open buy links in new window"
msgstr "" msgstr ""
#: audioigniter.php:920 #: audioigniter.php:928
msgid "Track &amp; Track listing repeat" msgid "Track &amp; Track listing repeat"
msgstr "" msgstr ""
#: audioigniter.php:932 #: audioigniter.php:940
msgid "Repeat track listing enabled by default" msgid "Repeat track listing enabled by default"
msgstr "" msgstr ""
#: audioigniter.php:946 #: audioigniter.php:954
msgid "Show track listing repeat toggle button" msgid "Show track listing repeat toggle button"
msgstr "" msgstr ""
#: audioigniter.php:963 #: audioigniter.php:971
msgid "Show \"Powered by AudioIgniter\" link" msgid "Show \"Powered by AudioIgniter\" link"
msgstr "" msgstr ""
#: audioigniter.php:967 #: audioigniter.php:975
msgid "" msgid ""
"We've put a great deal of effort into building this plugin. If you feel like " "We've put a great deal of effort into building this plugin. If you feel like "
"it, let others know about it by enabling this option." "it, let others know about it by enabling this option."
msgstr "" msgstr ""
#: audioigniter.php:987 #: audioigniter.php:995
msgid "Grab the shortcode" msgid "Grab the shortcode"
msgstr "" msgstr ""
#: audioigniter.php:1021 #: audioigniter.php:1029
msgid "Full Player" msgid "Full Player"
msgstr "" msgstr ""
#: audioigniter.php:1026 #: audioigniter.php:1034
msgid "Simple Player" msgid "Simple Player"
msgstr "" msgstr ""
#: audioigniter.php:1248 #: audioigniter.php:1257
msgid "ID doesn't match a playlist" msgid "ID doesn't match a playlist"
msgstr "" msgstr ""

View File

@ -1,7 +1,22 @@
{ {
"presets": [ "presets": [
"es2015", [
"react", "@babel/preset-env",
"stage-2" {
] "targets": {
"browsers": [
"last 2 versions, >1%"
]
},
"modules": false
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
} }

View File

@ -1,15 +1,16 @@
{ {
"extends": [ "extends": [
"airbnb", "airbnb",
"plugin:prettier/recommended", "prettier"
"prettier/react"
], ],
"parser": "@babel/eslint-parser",
"plugins": [ "plugins": [
"babel",
"import" "import"
], ],
"globals": { "globals": {
"aiStrings": true "aiStrings": true
}, },
"env": { "env": {
"browser": true "browser": true
}, },
@ -17,22 +18,36 @@
"arrow-body-style": 0, "arrow-body-style": 0,
"no-confusing-arrow": 0, "no-confusing-arrow": 0,
"global-require": 0, "global-require": 0,
"import/no-extraneous-dependencies": ["error", {"devDependencies": true}], "import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true
}
],
"import/prefer-default-export": 0, "import/prefer-default-export": 0,
"import/no-cycle": 0,
"react/jsx-filename-extension": 0, "react/jsx-filename-extension": 0,
"react/require-default-props": 0, "react/require-default-props": 0,
"react/forbid-prop-types": 0, "react/forbid-prop-types": 0,
"react/default-props-match-prop-types": 0, "react/default-props-match-prop-types": 0,
"react/prefer-stateless-function": 0, "react/prefer-stateless-function": 0,
"react/jsx-curly-spacing": [2, { "react/jsx-curly-spacing": [
"when": "never", 2,
"children": true {
}], "when": "never",
"children": true
}
],
"react/no-array-index-key": 0, "react/no-array-index-key": 0,
"jsx-a11y/anchor-is-valid": 0, "jsx-a11y/anchor-is-valid": 0,
"jsx-a11y/no-static-element-interactions": 0, "jsx-a11y/no-static-element-interactions": 0,
"react/destructuring-assignment": 0, "react/destructuring-assignment": 0,
"react/function-component-definition": 0,
"react/jsx-props-no-spreading": 0,
"react/button-has-type": 0, "react/button-has-type": 0,
"jsx-a11y/label-has-for": 0 "react/jsx-fragments": 0,
"react/jsx-no-constructed-context-values": 0,
"jsx-a11y/label-has-for": 0,
"jsx-a11y/click-events-have-key-events": 0
} }
} }

View File

@ -1 +1 @@
v8.12.0 16.14.2

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,66 @@
/*!
Copyright (c) 2015 Jed Watson.
Based on code that is Copyright 2013-2015, Facebook, Inc.
All rights reserved.
*/
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/*!
* Adapted from jQuery UI core
*
* http://jqueryui.com
*
* Copyright 2014 jQuery Foundation and other contributors
* Released under the MIT license.
* http://jquery.org/license
*
* http://api.jqueryui.com/category/ui-core/
*/
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/** @license
*
* SoundManager 2: JavaScript Sound for the Web
* ----------------------------------------------
* http://schillmania.com/projects/soundmanager2/
*
* Copyright (c) 2007, Scott Schiller. All rights reserved.
* Code provided under the BSD License:
* http://schillmania.com/projects/soundmanager2/license.txt
*
* V2.97a.20170601
*/

View File

@ -1,100 +1,54 @@
<!DOCTYPE html> <!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AudioIgniter</title><style>body {
<html> padding-bottom: 120px;
<head> }</style><script defer="defer" src="style.js"></script><script defer="defer" src="app.js"></script><link href="style.css" rel="stylesheet"></head><body><div id="audioigniter-2799" class="audioigniter-root" data-player-type="full" data-tracks-url="/dev-tracks.json" data-display-active-cover="true" data-display-tracklist-covers="true" data-display-credits="true" data-display-tracklist="true" data-allow-tracklist-toggle="true" data-allow-tracklist-loop="true" data-allow-track-loop="true" data-allow-playback-rate="true" data-display-track-no="true" data-display-artist-names="true" data-display-buy-buttons="true" data-buy-buttons-target="true" data-volume="50" data-cycle-tracks="true" data-limit-tracklist-height="true" data-tracklist-height="185" data-reverse-track-order="false" data-skip-amount="15" data-max-width="600px" data-initial-track="1" data-stop-on-finish="false" data-tracks-delay="5" data-timer-countdown="false" data-shuffle="true" data-shuffle-default="false" data-soundcloud-client-id="" data-remember-last="true" data-player-buttons='[
<meta charset="UTF-8"> {
<meta name="viewport" content="width=device-width,initial-scale=1.0"> "title": "CSSIgniter",
<title>AudioIgniter</title> "url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z\" fill=\"black\"/>\n</svg>"
<style> },
body { {
padding-bottom: 120px; "title": "",
} "url": "https://cssigniter.com",
</style> "icon": "<svg width=\"48\" height=\"40\" viewBox=\"0 0 48 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.1003 39.5001C33.2091 39.5001 43.1166 24.4935 43.1166 11.4838C43.1166 11.0619 43.1072 10.6307 43.0884 10.2088C45.0157 8.81501 46.679 7.0886 48 5.11068C46.205 5.90929 44.2993 6.43085 42.3478 6.65756C44.4026 5.4259 45.9411 3.49103 46.6781 1.21162C44.7451 2.3572 42.6312 3.16531 40.4269 3.60131C38.9417 2.02321 36.978 0.97832 34.8394 0.62819C32.7008 0.278059 30.5064 0.642189 28.5955 1.66428C26.6846 2.68637 25.1636 4.3095 24.2677 6.28271C23.3718 8.25592 23.1509 10.4693 23.6391 12.5807C19.725 12.3843 15.8959 11.3675 12.4 9.59628C8.90405 7.82507 5.81939 5.33896 3.34594 2.29912C2.0888 4.46657 1.70411 7.03138 2.27006 9.47227C2.83601 11.9132 4.31013 14.047 6.39281 15.4401C4.82926 15.3904 3.29995 14.9694 1.93125 14.2119V14.3338C1.92985 16.6084 2.7162 18.8133 4.15662 20.5736C5.59704 22.334 7.60265 23.5412 9.8325 23.9901C8.38411 24.3863 6.86396 24.4441 5.38969 24.1588C6.01891 26.115 7.24315 27.8259 8.89154 29.0528C10.5399 30.2796 12.5302 30.9613 14.5847 31.0026C11.0968 33.7423 6.78835 35.2283 2.35313 35.2213C1.56657 35.2201 0.780798 35.1719 0 35.0769C4.50571 37.9676 9.74706 39.5029 15.1003 39.5001Z\" fill=\"black\"/>\n</svg>"
<link href="style.css" rel="stylesheet"></head> },
<body> {
<div "title": "Another title",
class="audioigniter-root" "url": "https://cssigniter.com",
data-player-type="full" "icon": ""
data-tracks-url="/dev-tracks.json" }
data-display-active-cover="true" ]
data-display-tracklist-covers="true" '></div><div id="audioigniter-2999" class="audioigniter-root" data-player-type="simple" data-tracks-url="/dev-tracks.json" data-display-credits="true" data-display-track-no="true" data-allow-playback-rate="true" data-display-artist-names="true" data-display-buy-buttons="true" data-buy-buttons-target="true" data-allow-track-loop="true" data-volume="50" data-reverse-track-order="false" data-max-width="600px" data-initial-track="3" data-stop-on-finish="false" data-tracks-delay="0" data-timer-countdown="false" data-shuffle="true" data-soundcloud-client-id="" data-player-buttons='[
data-display-credits="true" {
data-display-tracklist="true" "title": "CSSIgniter",
data-allow-tracklist-toggle="true" "url": "https://cssigniter.com",
data-allow-tracklist-loop="true" "icon": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z\" fill=\"black\"/>\n</svg>"
data-allow-track-loop="true" },
data-allow-playback-rate="true" {
data-display-track-no="true" "title": "",
data-display-artist-names="true" "url": "https://cssigniter.com",
data-display-buy-buttons="true" "icon": "<svg width=\"48\" height=\"40\" viewBox=\"0 0 48 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.1003 39.5001C33.2091 39.5001 43.1166 24.4935 43.1166 11.4838C43.1166 11.0619 43.1072 10.6307 43.0884 10.2088C45.0157 8.81501 46.679 7.0886 48 5.11068C46.205 5.90929 44.2993 6.43085 42.3478 6.65756C44.4026 5.4259 45.9411 3.49103 46.6781 1.21162C44.7451 2.3572 42.6312 3.16531 40.4269 3.60131C38.9417 2.02321 36.978 0.97832 34.8394 0.62819C32.7008 0.278059 30.5064 0.642189 28.5955 1.66428C26.6846 2.68637 25.1636 4.3095 24.2677 6.28271C23.3718 8.25592 23.1509 10.4693 23.6391 12.5807C19.725 12.3843 15.8959 11.3675 12.4 9.59628C8.90405 7.82507 5.81939 5.33896 3.34594 2.29912C2.0888 4.46657 1.70411 7.03138 2.27006 9.47227C2.83601 11.9132 4.31013 14.047 6.39281 15.4401C4.82926 15.3904 3.29995 14.9694 1.93125 14.2119V14.3338C1.92985 16.6084 2.7162 18.8133 4.15662 20.5736C5.59704 22.334 7.60265 23.5412 9.8325 23.9901C8.38411 24.3863 6.86396 24.4441 5.38969 24.1588C6.01891 26.115 7.24315 27.8259 8.89154 29.0528C10.5399 30.2796 12.5302 30.9613 14.5847 31.0026C11.0968 33.7423 6.78835 35.2283 2.35313 35.2213C1.56657 35.2201 0.780798 35.1719 0 35.0769C4.50571 37.9676 9.74706 39.5029 15.1003 39.5001Z\" fill=\"black\"/>\n</svg>"
data-buy-buttons-target="true" },
data-volume="50" {
data-cycle-tracks="true" "title": "Another title",
data-limit-tracklist-height="true" "url": "https://cssigniter.com",
data-tracklist-height="185" "icon": ""
data-reverse-track-order="false" }
data-skip-amount="15" ]
data-max-width="600px" '></div><div id="audioigniter-2519" class="audioigniter-root" data-track='{"title":"Sunrise","subtitle":"Thoribass","audio":"https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3","buyUrl":"https:\/\/google.com","downloadUrl":"https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3","cover":"https:\/\/www.cssigniter.com\/demos\/audioigniter\/wp-content\/uploads\/sites\/48\/2016\/08\/CyberSDF-Flame-and-Go.jpg","lyrics":"Some lyrics"}' data-display-active-cover="false" data-display-credits="true" data-allow-playback-rate="false" data-display-buy-buttons="true" data-volume="100" data-skip-amount="0" data-stop-on-finish="true" data-timer-countdown="false" data-player-type="full" data-tracks-url="" data-display-tracklist="false" data-allow-tracklist-toggle="true" data-allow-tracklist-loop="true" data-allow-track-loop="true" data-display-track-no="false" data-display-artist-names="true" data-buy-buttons-target="true" data-cycle-tracks="false" data-limit-tracklist-height="false" data-tracklist-height="185" data-reverse-track-order="false" data-max-width="600px" data-initial-track="1" data-tracks-delay="0" data-shuffle="false" data-shuffle-default="false" data-remember-last="false"></div><div id="audioigniter-8999" class="audioigniter-root" data-player-type="global-footer" data-tracks-url="/dev-tracks.json" data-display-active-cover="true" data-display-tracklist-covers="true" data-display-credits="true" data-display-tracklist="false" data-allow-tracklist-toggle="true" data-allow-tracklist-loop="true" data-allow-track-loop="true" data-display-track-no="true" data-allow-playback-rate="true" data-display-artist-names="true" data-display-buy-buttons="true" data-buy-buttons-target="true" data-volume="50" data-skip-amount="15" data-cycle-tracks="false" data-limit-tracklist-height="true" data-tracklist-height="185" data-reverse-track-order="false" data-max-width="600px" data-initial-track="1" data-stop-on-finish="false" data-tracks-delay="0" data-timer-countdown="true" data-shuffle="true" data-soundcloud-client-id="" data-player-buttons='[
data-initial-track="1" {
data-stop-on-finish="false" "title": "CSSIgniter",
data-tracks-delay="5" "url": "https://cssigniter.com",
data-timer-countdown="false" "icon": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z\" fill=\"black\"/>\n</svg>"
data-shuffle="true" },
data-shuffle-default="false" {
data-soundcloud-client-id="" "title": "",
></div> "url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"40\" viewBox=\"0 0 48 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.1003 39.5001C33.2091 39.5001 43.1166 24.4935 43.1166 11.4838C43.1166 11.0619 43.1072 10.6307 43.0884 10.2088C45.0157 8.81501 46.679 7.0886 48 5.11068C46.205 5.90929 44.2993 6.43085 42.3478 6.65756C44.4026 5.4259 45.9411 3.49103 46.6781 1.21162C44.7451 2.3572 42.6312 3.16531 40.4269 3.60131C38.9417 2.02321 36.978 0.97832 34.8394 0.62819C32.7008 0.278059 30.5064 0.642189 28.5955 1.66428C26.6846 2.68637 25.1636 4.3095 24.2677 6.28271C23.3718 8.25592 23.1509 10.4693 23.6391 12.5807C19.725 12.3843 15.8959 11.3675 12.4 9.59628C8.90405 7.82507 5.81939 5.33896 3.34594 2.29912C2.0888 4.46657 1.70411 7.03138 2.27006 9.47227C2.83601 11.9132 4.31013 14.047 6.39281 15.4401C4.82926 15.3904 3.29995 14.9694 1.93125 14.2119V14.3338C1.92985 16.6084 2.7162 18.8133 4.15662 20.5736C5.59704 22.334 7.60265 23.5412 9.8325 23.9901C8.38411 24.3863 6.86396 24.4441 5.38969 24.1588C6.01891 26.115 7.24315 27.8259 8.89154 29.0528C10.5399 30.2796 12.5302 30.9613 14.5847 31.0026C11.0968 33.7423 6.78835 35.2283 2.35313 35.2213C1.56657 35.2201 0.780798 35.1719 0 35.0769C4.50571 37.9676 9.74706 39.5029 15.1003 39.5001Z\" fill=\"black\"/>\n</svg>"
<div },
class="audioigniter-root" {
data-player-type="simple" "title": "Another title",
data-tracks-url="/dev-tracks.json" "url": "https://cssigniter.com",
data-display-credits="true" "icon": ""
data-display-track-no="true" }
data-allow-playback-rate="true" ]
data-display-artist-names="true" '></div></body></html>
data-display-buy-buttons="true"
data-buy-buttons-target="true"
data-allow-track-loop="true"
data-volume="50"
data-reverse-track-order="false"
data-max-width="600px"
data-initial-track="3"
data-stop-on-finish="false"
data-tracks-delay="0"
data-timer-countdown="false"
data-shuffle="true"
data-soundcloud-client-id=""
></div>
<div
class="audioigniter-root"
data-player-type="global-footer"
data-tracks-url="/dev-tracks.json"
data-display-active-cover="true"
data-display-tracklist-covers="true"
data-display-credits="true"
data-display-tracklist="false"
data-allow-tracklist-toggle="true"
data-allow-tracklist-loop="true"
data-allow-track-loop="true"
data-display-track-no="true"
data-allow-playback-rate="true"
data-display-artist-names="true"
data-display-buy-buttons="true"
data-buy-buttons-target="true"
data-volume="50"
data-skip-amount="15"
data-cycle-tracks="false"
data-limit-tracklist-height="true"
data-tracklist-height="185"
data-reverse-track-order="false"
data-max-width="600px"
data-initial-track="1"
data-stop-on-finish="false"
data-tracks-delay="0"
data-timer-countdown="true"
data-shuffle="true"
data-soundcloud-client-id=""
></div>
<script type="text/javascript" src="app.js"></script><script type="text/javascript" src="style.js"></script></body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
!function(n){function r(e){if(t[e])return t[e].exports;var o=t[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=n,r.c=t,r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=28)}({28:function(n,r){}});

View File

@ -5,7 +5,7 @@
"audio": "https://www.cssigniter.com/assets/audioigniter/sunrise.mp3", "audio": "https://www.cssigniter.com/assets/audioigniter/sunrise.mp3",
"buyUrl": "https://www.cssigniter.com", "buyUrl": "https://www.cssigniter.com",
"downloadUrl": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3", "downloadUrl": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3",
"cover": "https:\/\/www.cssigniter.com\/preview\/audioigniter\/files\/2016\/08\/Thoribass-Sunrise.jpg", "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/CyberSDF-Flame-and-Go.jpg",
"lyrics": "Here in my mind\nYou know you might find\nSomething that you\n\nYou thought you once knew\nBut now it's all gone\nAnd you know it's no fun\n\nYeah I know it's no fun\nOh I know it's no fun\nI'm free to be whatever I\nWhatever I choose\nAnd I'll sing the blues if I want\nI'm free to be whatever I\nWhatever I choose\nAnd I'll sing the blues if I want\nWhatever you do\nWhatever you say\nYeah I know it's alright" "lyrics": "Here in my mind\nYou know you might find\nSomething that you\n\nYou thought you once knew\nBut now it's all gone\nAnd you know it's no fun\n\nYeah I know it's no fun\nOh I know it's no fun\nI'm free to be whatever I\nWhatever I choose\nAnd I'll sing the blues if I want\nI'm free to be whatever I\nWhatever I choose\nAnd I'll sing the blues if I want\nWhatever you do\nWhatever you say\nYeah I know it's alright"
}, },
{ {
@ -14,14 +14,14 @@
"audio": "https://www.cssigniter.com/assets/audioigniter/sunrise.mp3", "audio": "https://www.cssigniter.com/assets/audioigniter/sunrise.mp3",
"buyUrl": "https://www.cssigniter.com", "buyUrl": "https://www.cssigniter.com",
"downloadUrl": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3", "downloadUrl": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3",
"cover": "https:\/\/www.cssigniter.com\/preview\/audioigniter\/files\/2016\/08\/The-Fisherman-Another-Day.jpg" "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/Thoribass-Sunrise.jpg"
}, },
{ {
"title": "Remix Safety Guide", "title": "Remix Safety Guide",
"subtitle": "Rocavaco", "subtitle": "Rocavaco",
"audio": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/remix.mp3", "audio": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/remix.mp3",
"buyUrl": "https://www.cssigniter.com", "buyUrl": "https://www.cssigniter.com",
"cover": "https:\/\/www.cssigniter.com\/preview\/audioigniter\/files\/2016\/08\/Rocavaco-Remix-Safety-Guide.jpg", "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/The-Fisherman-Another-Day.jpg",
"lyrics": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eius hic illo natus vitae. Assumenda commodi eaque eos est eum excepturi fugiat provident, quidem saepe? Aut doloremque, unde? Delectus, dolorum." "lyrics": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eius hic illo natus vitae. Assumenda commodi eaque eos est eum excepturi fugiat provident, quidem saepe? Aut doloremque, unde? Delectus, dolorum."
}, },
{ {
@ -37,28 +37,28 @@
"subtitle": "Syl Johnson (SoundCloud)", "subtitle": "Syl Johnson (SoundCloud)",
"audio": "https://soundcloud.com/enterofficial/maceo-plex-b2b-richie-hawtin-enterweek-11-sake-bar-space-ibiza-september-10th-2015", "audio": "https://soundcloud.com/enterofficial/maceo-plex-b2b-richie-hawtin-enterweek-11-sake-bar-space-ibiza-september-10th-2015",
"buyUrl": "", "buyUrl": "",
"cover": "https://www.cssigniter.com/preview/audioigniter/files/2016/08/artworks-000103551140-ez6k4x-t500x500.jpg" "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/Rocavaco-Remix-Safety-Guide.jpg"
}, },
{ {
"title": "Deep House Radio", "title": "Deep House Radio",
"subtitle": "", "subtitle": "",
"audio": "https://deephouseradio.radioca.st/stream/1/", "audio": "https://deephouseradio.radioca.st/stream/1/",
"buyUrl": "https://www.cssigniter.com", "buyUrl": "https://www.cssigniter.com",
"cover": "https://www.cssigniter.com/preview/audioigniter/files/2016/08/Rocavaco-Remix-Safety-Guide.jpg" "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/MegaEnx-Tomorrow.jpg"
}, },
{ {
"title": "Flash of Light", "title": "Flash of Light",
"subtitle": "Kxmode", "subtitle": "Kxmode",
"audio": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/flashlight.mp3", "audio": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/flashlight.mp3",
"buyUrl": "https://www.cssigniter.com", "buyUrl": "https://www.cssigniter.com",
"cover": "https:\/\/www.cssigniter.com\/preview\/audioigniter\/files\/2016\/08\/Kxmode-Flash-of-Light.jpg", "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/BitBurner-We-Get-Mental.jpg",
"lyrics": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eius hic illo natus vitae. Assumenda commodi eaque eos est eum excepturi fugiat provident, quidem saepe? Aut doloremque, unde? Delectus, dolorum." "lyrics": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eius hic illo natus vitae. Assumenda commodi eaque eos est eum excepturi fugiat provident, quidem saepe? Aut doloremque, unde? Delectus, dolorum."
}, },
{ {
"title": "We Get Mental", "title": "We Get Mental",
"subtitle": "BitBurner", "subtitle": "BitBurner",
"audio": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/mental.mp3", "audio": "https:\/\/www.cssigniter.com\/assets\/audioigniter\/mental.mp3",
"buyUrl": "", "buyUrl": "",
"cover": "https:\/\/www.cssigniter.com\/preview\/audioigniter\/files\/2016\/08\/BitBurner-We-Get-Mental.jpg" "cover": "https://www.cssigniter.com/demos/audioigniter/wp-content/uploads/sites/48/2016/08/Kxmode-Flash-of-Light.jpg"
} }
] ]

View File

@ -7,6 +7,8 @@
"start": "webpack-dev-server", "start": "webpack-dev-server",
"build": "rm -rf ./build && webpack", "build": "rm -rf ./build && webpack",
"lint": "eslint ./src --ext .js --ext .jsx --cache || true", "lint": "eslint ./src --ext .js --ext .jsx --cache || true",
"webpack-profile": "webpack --json > stats.json",
"babel-lala": "babel --plugins transform-react-remove-prop-types build/app.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"keywords": [ "keywords": [
@ -17,46 +19,53 @@
"author": "vmasto", "author": "vmasto",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.17.10",
"@babel/core": "^7.18.5",
"@babel/eslint-parser": "^7.18.2",
"@babel/plugin-proposal-class-properties": "^7.17.12",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.17.12",
"@babel/plugin-proposal-object-rest-spread": "^7.18.0",
"@babel/plugin-proposal-optional-chaining": "^7.17.12",
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",
"babel-core": "^6.25.0", "babel-loader": "^8.2.5",
"babel-loader": "^7.1.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-preset-es2015": "^6.24.1", "css-loader": "^6.7.1",
"babel-preset-react": "^6.24.1", "eslint": "^8.18.0",
"babel-preset-react-hmre": "1.1.1", "eslint-config-airbnb": "^19.0.4",
"babel-preset-stage-1": "^6.24.1", "eslint-config-airbnb-base": "^15.0.0",
"babel-preset-stage-2": "^6.24.1", "eslint-config-prettier": "^8.5.0",
"css-loader": "^0.28.4", "eslint-plugin-babel": "^5.3.1",
"eslint": "3.19.0", "eslint-plugin-import": "^2.26.0",
"eslint-config-airbnb": "15.0.2", "eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-config-airbnb-base": "^11.2.0", "eslint-plugin-prettier": "^3.3.1",
"eslint-config-prettier": "^4.1.0", "eslint-plugin-react": "^7.30.0",
"eslint-plugin-import": "2.7.0", "extract-text-webpack-plugin": "^3.0.2",
"eslint-plugin-jsx-a11y": "5.1.1", "html-webpack-plugin": "^5.5.0",
"eslint-plugin-prettier": "^3.0.1", "mini-css-extract-plugin": "^2.6.1",
"eslint-plugin-react": "7.1.0", "postcss-loader": "^7.0.0",
"extract-text-webpack-plugin": "^3.0.0", "precss": "^4.0.0",
"html-webpack-plugin": "^2.29.0",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"precss": "^2.0.0",
"prettier": "^1.16.4", "prettier": "^1.16.4",
"sass-loader": "^6.0.6", "sass": "^1.52.3",
"style-loader": "^0.18.2", "sass-loader": "11.0.1",
"webpack": "^3.2.0", "style-loader": "^3.3.1",
"webpack-dev-server": "^2.5.1", "terser-webpack-plugin": "^5.3.3",
"webpack": "5.72.1",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2",
"webpack-merge": "^4.1.0" "webpack-merge": "^4.1.0"
}, },
"dependencies": { "dependencies": {
"classnames": "2.3.0", "classnames": "2.3.0",
"es6-promise": "^4.1.1",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.8.3", "react": "^18.2.0",
"react-custom-scrollbars": "^4.1.2", "react-custom-scrollbars": "^4.1.2",
"react-dom": "^16.8.3", "react-dom": "^18.2.0",
"react-modal": "^3.8.1", "react-modal": "^3.8.1",
"react-sound": "^1.2.0", "react-sound": "^1.2.0",
"soundmanager2": "^2.97.20170602", "soundmanager2": "^2.97.20170602",
"sprintf-js": "1.1.1", "sprintf-js": "1.1.1"
"whatwg-fetch": "0.11.1"
} }
} }

View File

@ -6,13 +6,14 @@
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<style> <style>
body { body {
padding-bottom: 120px; padding-bottom: 120px;
} }
</style> </style>
</head> </head>
<body> <body>
<div <div
id="audioigniter-2799"
class="audioigniter-root" class="audioigniter-root"
data-player-type="full" data-player-type="full"
data-tracks-url="/dev-tracks.json" data-tracks-url="/dev-tracks.json"
@ -42,9 +43,29 @@
data-shuffle="true" data-shuffle="true"
data-shuffle-default="false" data-shuffle-default="false"
data-soundcloud-client-id="" data-soundcloud-client-id=""
data-remember-last="true"
data-player-buttons='[
{
"title": "CSSIgniter",
"url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z\" fill=\"black\"/>\n</svg>"
},
{
"title": "",
"url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"40\" viewBox=\"0 0 48 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.1003 39.5001C33.2091 39.5001 43.1166 24.4935 43.1166 11.4838C43.1166 11.0619 43.1072 10.6307 43.0884 10.2088C45.0157 8.81501 46.679 7.0886 48 5.11068C46.205 5.90929 44.2993 6.43085 42.3478 6.65756C44.4026 5.4259 45.9411 3.49103 46.6781 1.21162C44.7451 2.3572 42.6312 3.16531 40.4269 3.60131C38.9417 2.02321 36.978 0.97832 34.8394 0.62819C32.7008 0.278059 30.5064 0.642189 28.5955 1.66428C26.6846 2.68637 25.1636 4.3095 24.2677 6.28271C23.3718 8.25592 23.1509 10.4693 23.6391 12.5807C19.725 12.3843 15.8959 11.3675 12.4 9.59628C8.90405 7.82507 5.81939 5.33896 3.34594 2.29912C2.0888 4.46657 1.70411 7.03138 2.27006 9.47227C2.83601 11.9132 4.31013 14.047 6.39281 15.4401C4.82926 15.3904 3.29995 14.9694 1.93125 14.2119V14.3338C1.92985 16.6084 2.7162 18.8133 4.15662 20.5736C5.59704 22.334 7.60265 23.5412 9.8325 23.9901C8.38411 24.3863 6.86396 24.4441 5.38969 24.1588C6.01891 26.115 7.24315 27.8259 8.89154 29.0528C10.5399 30.2796 12.5302 30.9613 14.5847 31.0026C11.0968 33.7423 6.78835 35.2283 2.35313 35.2213C1.56657 35.2201 0.780798 35.1719 0 35.0769C4.50571 37.9676 9.74706 39.5029 15.1003 39.5001Z\" fill=\"black\"/>\n</svg>"
},
{
"title": "Another title",
"url": "https://cssigniter.com",
"icon": ""
}
]
'
></div> ></div>
<div <div
id="audioigniter-2999"
class="audioigniter-root" class="audioigniter-root"
data-player-type="simple" data-player-type="simple"
data-tracks-url="/dev-tracks.json" data-tracks-url="/dev-tracks.json"
@ -64,9 +85,63 @@
data-timer-countdown="false" data-timer-countdown="false"
data-shuffle="true" data-shuffle="true"
data-soundcloud-client-id="" data-soundcloud-client-id=""
data-player-buttons='[
{
"title": "CSSIgniter",
"url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z\" fill=\"black\"/>\n</svg>"
},
{
"title": "",
"url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"40\" viewBox=\"0 0 48 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.1003 39.5001C33.2091 39.5001 43.1166 24.4935 43.1166 11.4838C43.1166 11.0619 43.1072 10.6307 43.0884 10.2088C45.0157 8.81501 46.679 7.0886 48 5.11068C46.205 5.90929 44.2993 6.43085 42.3478 6.65756C44.4026 5.4259 45.9411 3.49103 46.6781 1.21162C44.7451 2.3572 42.6312 3.16531 40.4269 3.60131C38.9417 2.02321 36.978 0.97832 34.8394 0.62819C32.7008 0.278059 30.5064 0.642189 28.5955 1.66428C26.6846 2.68637 25.1636 4.3095 24.2677 6.28271C23.3718 8.25592 23.1509 10.4693 23.6391 12.5807C19.725 12.3843 15.8959 11.3675 12.4 9.59628C8.90405 7.82507 5.81939 5.33896 3.34594 2.29912C2.0888 4.46657 1.70411 7.03138 2.27006 9.47227C2.83601 11.9132 4.31013 14.047 6.39281 15.4401C4.82926 15.3904 3.29995 14.9694 1.93125 14.2119V14.3338C1.92985 16.6084 2.7162 18.8133 4.15662 20.5736C5.59704 22.334 7.60265 23.5412 9.8325 23.9901C8.38411 24.3863 6.86396 24.4441 5.38969 24.1588C6.01891 26.115 7.24315 27.8259 8.89154 29.0528C10.5399 30.2796 12.5302 30.9613 14.5847 31.0026C11.0968 33.7423 6.78835 35.2283 2.35313 35.2213C1.56657 35.2201 0.780798 35.1719 0 35.0769C4.50571 37.9676 9.74706 39.5029 15.1003 39.5001Z\" fill=\"black\"/>\n</svg>"
},
{
"title": "Another title",
"url": "https://cssigniter.com",
"icon": ""
}
]
'
></div> ></div>
<div <div
id="audioigniter-2519"
class="audioigniter-root"
data-track='{"title":"Sunrise","subtitle":"Thoribass","audio":"https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3","buyUrl":"https:\/\/google.com","downloadUrl":"https:\/\/www.cssigniter.com\/assets\/audioigniter\/sunrise.mp3","cover":"https:\/\/www.cssigniter.com\/demos\/audioigniter\/wp-content\/uploads\/sites\/48\/2016\/08\/CyberSDF-Flame-and-Go.jpg","lyrics":"Some lyrics"}'
data-display-active-cover="false"
data-display-credits="true"
data-allow-playback-rate="false"
data-display-buy-buttons="true"
data-volume="100"
data-skip-amount="0"
data-stop-on-finish="true"
data-timer-countdown="false"
data-player-type="full"
data-tracks-url=""
data-display-tracklist="false"
data-allow-tracklist-toggle="true"
data-allow-tracklist-loop="true"
data-allow-track-loop="true"
data-display-track-no="false"
data-display-artist-names="true"
data-buy-buttons-target="true"
data-cycle-tracks="false"
data-limit-tracklist-height="false"
data-tracklist-height="185"
data-reverse-track-order="false"
data-max-width="600px"
data-initial-track="1"
data-tracks-delay="0"
data-shuffle="false"
data-shuffle-default="false"
data-remember-last="false"
></div>
<div
id="audioigniter-8999"
class="audioigniter-root" class="audioigniter-root"
data-player-type="global-footer" data-player-type="global-footer"
data-tracks-url="/dev-tracks.json" data-tracks-url="/dev-tracks.json"
@ -95,6 +170,24 @@
data-timer-countdown="true" data-timer-countdown="true"
data-shuffle="true" data-shuffle="true"
data-soundcloud-client-id="" data-soundcloud-client-id=""
data-player-buttons='[
{
"title": "CSSIgniter",
"url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 35.9789 8.77641 45.908 20.25 47.7084V30.9375H14.1562V24H20.25V18.7125C20.25 12.6975 23.8331 9.375 29.3152 9.375C31.9402 9.375 34.6875 9.84375 34.6875 9.84375V15.75H31.6613C28.68 15.75 27.75 17.6002 27.75 19.5V24H34.4062L33.3422 30.9375H27.75V47.7084C39.2236 45.908 48 35.9789 48 24Z\" fill=\"black\"/>\n</svg>"
},
{
"title": "",
"url": "https://cssigniter.com",
"icon": "<svg width=\"48\" height=\"40\" viewBox=\"0 0 48 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.1003 39.5001C33.2091 39.5001 43.1166 24.4935 43.1166 11.4838C43.1166 11.0619 43.1072 10.6307 43.0884 10.2088C45.0157 8.81501 46.679 7.0886 48 5.11068C46.205 5.90929 44.2993 6.43085 42.3478 6.65756C44.4026 5.4259 45.9411 3.49103 46.6781 1.21162C44.7451 2.3572 42.6312 3.16531 40.4269 3.60131C38.9417 2.02321 36.978 0.97832 34.8394 0.62819C32.7008 0.278059 30.5064 0.642189 28.5955 1.66428C26.6846 2.68637 25.1636 4.3095 24.2677 6.28271C23.3718 8.25592 23.1509 10.4693 23.6391 12.5807C19.725 12.3843 15.8959 11.3675 12.4 9.59628C8.90405 7.82507 5.81939 5.33896 3.34594 2.29912C2.0888 4.46657 1.70411 7.03138 2.27006 9.47227C2.83601 11.9132 4.31013 14.047 6.39281 15.4401C4.82926 15.3904 3.29995 14.9694 1.93125 14.2119V14.3338C1.92985 16.6084 2.7162 18.8133 4.15662 20.5736C5.59704 22.334 7.60265 23.5412 9.8325 23.9901C8.38411 24.3863 6.86396 24.4441 5.38969 24.1588C6.01891 26.115 7.24315 27.8259 8.89154 29.0528C10.5399 30.2796 12.5302 30.9613 14.5847 31.0026C11.0968 33.7423 6.78835 35.2283 2.35313 35.2213C1.56657 35.2201 0.780798 35.1719 0 35.0769C4.50571 37.9676 9.74706 39.5029 15.1003 39.5001Z\" fill=\"black\"/>\n</svg>"
},
{
"title": "Another title",
"url": "https://cssigniter.com",
"icon": ""
}
]
'
></div> ></div>
</body> </body>
</html> </html>

View File

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { createRoot } from 'react-dom/client';
import 'es6-promise/auto';
import 'whatwg-fetch';
import App from './App'; import App from './App';
@ -35,7 +33,9 @@ function renderApp(node) {
const type = node.getAttribute('data-player-type'); const type = node.getAttribute('data-player-type');
const props = { const props = {
playerId: node.getAttribute('id'),
tracksUrl: node.getAttribute('data-tracks-url'), tracksUrl: node.getAttribute('data-tracks-url'),
track: node.getAttribute('data-track'),
displayTracklistCovers: JSON.parse( displayTracklistCovers: JSON.parse(
node.getAttribute('data-display-tracklist-covers'), node.getAttribute('data-display-tracklist-covers'),
), ),
@ -82,9 +82,12 @@ function renderApp(node) {
countdownTimerByDefault: JSON.parse( countdownTimerByDefault: JSON.parse(
node.getAttribute('data-timer-countdown'), node.getAttribute('data-timer-countdown'),
), ),
rememberLastPosition: JSON.parse(node.getAttribute('data-remember-last')),
playerButtons: JSON.parse(node.getAttribute('data-player-buttons')),
}; };
render(<App type={type} {...props} />, node); const root = createRoot(node);
root.render(<App type={type} {...props} />);
} }
Array.prototype.slice.call(nodes).forEach(node => { Array.prototype.slice.call(nodes).forEach(node => {

View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react'; import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Sound from 'react-sound'; import Sound from 'react-sound';
import { sprintf } from 'sprintf-js'; import { sprintf } from 'sprintf-js';
@ -22,269 +22,9 @@ import {
} from './components/Icons'; } from './components/Icons';
import { AppContext } from '../App'; import { AppContext } from '../App';
import typographyDisabled from '../utils/typography-disabled'; import typographyDisabled from '../utils/typography-disabled';
import PlayerButtons from './components/PlayerButtons';
class GlobalFooterPlayer extends React.Component { const propTypes = {
constructor(props) {
super(props);
this.state = {
isTrackListOpen: this.props.displayTracklist,
};
this.toggleTracklist = this.toggleTracklist.bind(this);
}
toggleTracklist() {
this.setState(state => ({
isTrackListOpen: !state.isTrackListOpen,
}));
}
render() {
const { isTrackListOpen } = this.state;
const {
tracks,
playStatus,
activeIndex,
volume,
position,
duration,
playbackRate,
currentTrack,
playTrack,
togglePlay,
nextTrack,
prevTrack,
setPosition,
setVolume,
toggleTracklistCycling,
cycleTracks,
setTrackCycling,
setPlaybackRate,
allowPlaybackRate,
allowTracklistToggle,
allowTracklistLoop,
allowTrackLoop,
reverseTrackOrder,
displayTrackNo,
displayTracklistCovers,
displayActiveCover,
limitTracklistHeight,
tracklistHeight,
displayBuyButtons,
buyButtonsTarget,
displayArtistNames,
repeatingTrackIndex,
skipAmount,
skipPosition,
countdownTimerByDefault,
buffering,
} = this.props;
const classes = classNames({
'ai-wrap': true,
'ai-type-global-footer': true,
'ai-is-loading': !tracks.length,
'ai-with-typography': !typographyDisabled(),
});
const audioControlClasses = classNames({
'ai-audio-control': true,
'ai-audio-playing': playStatus === Sound.status.PLAYING,
'ai-audio-loading': buffering,
});
return (
<div
ref={ref => (this.root = ref)} // eslint-disable-line no-return-assign
className={classes}
>
<div className="ai-control-wrap">
{displayActiveCover && (
<Cover
className="ai-thumb ai-control-wrap-thumb"
src={currentTrack.cover}
alt={currentTrack.title}
/>
)}
<div className="ai-control-wrap-controls">
<ProgressBar
setPosition={setPosition}
duration={duration}
position={position}
/>
<div className="ai-audio-controls-main">
<Button
onClick={togglePlay}
className={audioControlClasses}
ariaLabel={
playStatus === Sound.status.PLAYING
? sprintf(aiStrings.pause_title, currentTrack.title)
: sprintf(aiStrings.play_title, currentTrack.title)
}
ariaPressed={playStatus === Sound.status.PLAYING}
>
{playStatus === Sound.status.PLAYING ? (
<PauseIcon />
) : (
<PlayIcon />
)}
<span className="ai-control-spinner" />
</Button>
<div className="ai-audio-controls-meta">
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-prev"
onClick={prevTrack}
ariaLabel={aiStrings.previous}
>
<PreviousIcon />
</Button>
)}
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-next"
onClick={nextTrack}
ariaLabel={aiStrings.next}
>
<NextIcon />
</Button>
)}
<VolumeControl
volume={volume}
// eslint-disable-next-line no-shadow
setVolume={setVolume}
/>
{allowTracklistLoop && (
<Button
className={`ai-btn ai-btn-repeat ${cycleTracks &&
'ai-btn-active'}`}
onClick={toggleTracklistCycling}
ariaLabel={aiStrings.toggle_list_repeat}
>
<RefreshIcon />
</Button>
)}
{allowPlaybackRate && (
<Button
className="ai-btn ai-btn-playback-rate"
onClick={setPlaybackRate}
ariaLabel={aiStrings.set_playback_rate}
>
<Fragment>&times;{playbackRate}</Fragment>
</Button>
)}
{skipAmount > 0 && (
<Fragment>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(-1)}
ariaLabel={aiStrings.skip_backward}
>
-{skipAmount}s
</Button>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(1)}
ariaLabel={aiStrings.skip_forward}
>
+{skipAmount}s
</Button>
</Fragment>
)}
{currentTrack && currentTrack.lyrics && !isTrackListOpen && (
<AppContext.Consumer>
{({ toggleLyricsModal }) => (
<Button
className="ai-btn ai-lyrics"
onClick={() => toggleLyricsModal(true, currentTrack)}
ariaLabel={aiStrings.open_track_lyrics}
title={aiStrings.open_track_lyrics}
>
<LyricsIcon />
</Button>
)}
</AppContext.Consumer>
)}
</div>
<div className="ai-track-info">
<p className="ai-track-title">
<span>{currentTrack.title}</span>
</p>
{(tracks.length === 0 || currentTrack.subtitle) &&
displayArtistNames && (
<p className="ai-track-subtitle">
<span>{currentTrack.subtitle}</span>
</p>
)}
</div>
<div className="ai-audio-controls-meta-right">
<Time
duration={duration}
position={position}
countdown={countdownTimerByDefault}
/>
{allowTracklistToggle && (
<Button
className="ai-btn ai-tracklist-toggle"
onClick={this.toggleTracklist}
ariaLabel={aiStrings.toggle_list_visible}
>
<PlaylistIcon />
</Button>
)}
</div>
</div>
</div>
</div>
<div
className={`ai-tracklist-wrap ${
isTrackListOpen ? 'ai-tracklist-open' : ''
}`}
style={{ display: isTrackListOpen ? 'block' : 'none' }}
>
<TracklistWrap
className="ai-tracklist"
trackClassName="ai-track"
tracks={tracks}
activeTrackIndex={activeIndex}
isOpen={isTrackListOpen}
displayTrackNo={displayTrackNo}
displayCovers={displayTracklistCovers}
displayBuyButtons={displayBuyButtons}
buyButtonsTarget={buyButtonsTarget}
displayArtistNames={displayArtistNames}
reverseTrackOrder={reverseTrackOrder}
limitTracklistHeight={limitTracklistHeight}
tracklistHeight={tracklistHeight}
onTrackClick={playTrack}
onTrackLoop={allowTrackLoop ? setTrackCycling : undefined}
repeatingTrackIndex={repeatingTrackIndex}
/>
</div>
</div>
);
}
}
GlobalFooterPlayer.propTypes = {
tracks: PropTypes.arrayOf(PropTypes.object), tracks: PropTypes.arrayOf(PropTypes.object),
playStatus: PropTypes.oneOf([ playStatus: PropTypes.oneOf([
Sound.status.PLAYING, Sound.status.PLAYING,
@ -304,11 +44,11 @@ GlobalFooterPlayer.propTypes = {
setVolume: PropTypes.func.isRequired, setVolume: PropTypes.func.isRequired,
toggleTracklistCycling: PropTypes.func.isRequired, toggleTracklistCycling: PropTypes.func.isRequired,
cycleTracks: PropTypes.bool.isRequired, cycleTracks: PropTypes.bool.isRequired,
displayTracklist: PropTypes.bool,
allowTracklistToggle: PropTypes.bool, allowTracklistToggle: PropTypes.bool,
allowTracklistLoop: PropTypes.bool, allowTracklistLoop: PropTypes.bool,
reverseTrackOrder: PropTypes.bool, reverseTrackOrder: PropTypes.bool,
displayTrackNo: PropTypes.bool, displayTrackNo: PropTypes.bool,
displayTracklist: PropTypes.bool,
displayActiveCover: PropTypes.bool, displayActiveCover: PropTypes.bool,
displayTracklistCovers: PropTypes.bool, displayTracklistCovers: PropTypes.bool,
limitTracklistHeight: PropTypes.bool, limitTracklistHeight: PropTypes.bool,
@ -326,8 +66,262 @@ GlobalFooterPlayer.propTypes = {
countdownTimerByDefault: PropTypes.bool, countdownTimerByDefault: PropTypes.bool,
allowPlaybackRate: PropTypes.bool, allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool, buffering: PropTypes.bool,
playerButtons: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string,
url: PropTypes.string,
icon: PropTypes.string,
}).isRequired,
),
}; };
const GlobalFooterPlayer = ({
tracks,
playStatus,
activeIndex,
volume,
position,
duration,
playbackRate,
currentTrack,
playTrack,
togglePlay,
nextTrack,
prevTrack,
setPosition,
setVolume,
toggleTracklistCycling,
cycleTracks,
setTrackCycling,
setPlaybackRate,
allowPlaybackRate,
allowTracklistToggle,
allowTracklistLoop,
allowTrackLoop,
reverseTrackOrder,
displayTracklist,
displayTrackNo,
displayTracklistCovers,
displayActiveCover,
limitTracklistHeight,
tracklistHeight,
displayBuyButtons,
buyButtonsTarget,
displayArtistNames,
repeatingTrackIndex,
skipAmount,
skipPosition,
countdownTimerByDefault,
buffering,
playerButtons,
}) => {
const [isTrackListOpen, setTracklistOpen] = useState(displayTracklist);
const toggleTracklist = () => {
setTracklistOpen(x => !x);
};
const classes = classNames({
'ai-wrap': true,
'ai-type-global-footer': true,
'ai-is-loading': !tracks.length,
'ai-with-typography': !typographyDisabled(),
});
const audioControlClasses = classNames({
'ai-audio-control': true,
'ai-audio-playing': playStatus === Sound.status.PLAYING,
'ai-audio-loading': buffering,
});
return (
<div className={classes}>
<div className="ai-control-wrap">
{displayActiveCover && (
<Cover
className="ai-thumb ai-control-wrap-thumb"
src={currentTrack.cover}
alt={currentTrack.title}
/>
)}
<div className="ai-control-wrap-controls">
<ProgressBar
setPosition={setPosition}
duration={duration}
position={position}
/>
<div className="ai-audio-controls-main">
<Button
onClick={togglePlay}
className={audioControlClasses}
ariaLabel={
playStatus === Sound.status.PLAYING
? sprintf(aiStrings.pause_title, currentTrack.title)
: sprintf(aiStrings.play_title, currentTrack.title)
}
ariaPressed={playStatus === Sound.status.PLAYING}
>
{playStatus === Sound.status.PLAYING ? (
<PauseIcon />
) : (
<PlayIcon />
)}
<span className="ai-control-spinner" />
</Button>
<div className="ai-audio-controls-meta">
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-prev"
onClick={prevTrack}
ariaLabel={aiStrings.previous}
>
<PreviousIcon />
</Button>
)}
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-next"
onClick={nextTrack}
ariaLabel={aiStrings.next}
>
<NextIcon />
</Button>
)}
<VolumeControl
volume={volume}
// eslint-disable-next-line no-shadow
setVolume={setVolume}
/>
{allowTracklistLoop && (
<Button
className={`ai-btn ai-btn-repeat ${cycleTracks &&
'ai-btn-active'}`}
onClick={toggleTracklistCycling}
ariaLabel={aiStrings.toggle_list_repeat}
>
<RefreshIcon />
</Button>
)}
{allowPlaybackRate && (
<Button
className="ai-btn ai-btn-playback-rate"
onClick={setPlaybackRate}
ariaLabel={aiStrings.set_playback_rate}
>
<Fragment>&times;{playbackRate}</Fragment>
</Button>
)}
{skipAmount > 0 && (
<Fragment>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(-1)}
ariaLabel={aiStrings.skip_backward}
>
-{skipAmount}s
</Button>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(1)}
ariaLabel={aiStrings.skip_forward}
>
+{skipAmount}s
</Button>
</Fragment>
)}
{currentTrack && currentTrack.lyrics && !isTrackListOpen && (
<AppContext.Consumer>
{({ toggleLyricsModal }) => (
<Button
className="ai-btn ai-lyrics"
onClick={() => toggleLyricsModal(true, currentTrack)}
ariaLabel={aiStrings.open_track_lyrics}
title={aiStrings.open_track_lyrics}
>
<LyricsIcon />
</Button>
)}
</AppContext.Consumer>
)}
</div>
<div className="ai-track-info">
<p className="ai-track-title">
<span>{currentTrack.title}</span>
</p>
{(tracks.length === 0 || currentTrack.subtitle) &&
displayArtistNames && (
<p className="ai-track-subtitle">
<span>{currentTrack.subtitle}</span>
</p>
)}
</div>
<div className="ai-audio-controls-meta-right">
<Time
duration={duration}
position={position}
countdown={countdownTimerByDefault}
/>
{allowTracklistToggle && (
<Button
className="ai-btn ai-tracklist-toggle"
onClick={toggleTracklist}
ariaLabel={aiStrings.toggle_list_visible}
>
<PlaylistIcon />
</Button>
)}
</div>
</div>
</div>
</div>
<div
className={`ai-tracklist-wrap ${
isTrackListOpen ? 'ai-tracklist-open' : ''
}`}
style={{ display: isTrackListOpen ? 'block' : 'none' }}
>
<TracklistWrap
className="ai-tracklist"
trackClassName="ai-track"
tracks={tracks}
activeTrackIndex={activeIndex}
isOpen={isTrackListOpen}
displayTrackNo={displayTrackNo}
displayCovers={displayTracklistCovers}
displayBuyButtons={displayBuyButtons}
buyButtonsTarget={buyButtonsTarget}
displayArtistNames={displayArtistNames}
reverseTrackOrder={reverseTrackOrder}
limitTracklistHeight={limitTracklistHeight}
tracklistHeight={tracklistHeight}
onTrackClick={playTrack}
onTrackLoop={allowTrackLoop ? setTrackCycling : undefined}
repeatingTrackIndex={repeatingTrackIndex}
/>
{playerButtons?.length > 0 && <PlayerButtons buttons={playerButtons} />}
</div>
</div>
);
};
GlobalFooterPlayer.propTypes = propTypes;
export default soundProvider(GlobalFooterPlayer, { export default soundProvider(GlobalFooterPlayer, {
onFinishedPlaying(props) { onFinishedPlaying(props) {
const { const {

View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react'; import React, { Fragment, useState, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Sound from 'react-sound'; import Sound from 'react-sound';
import { sprintf } from 'sprintf-js'; import { sprintf } from 'sprintf-js';
@ -23,309 +23,10 @@ import {
import soundProvider from './soundProvider'; import soundProvider from './soundProvider';
import { AppContext } from '../App'; import { AppContext } from '../App';
import typographyDisabled from '../utils/typography-disabled'; import typographyDisabled from '../utils/typography-disabled';
import useComponentSize from '../utils/useComponentSize';
import PlayerButtons from './components/PlayerButtons';
class Player extends React.Component { const propTypes = {
constructor(props) {
super(props);
this.state = {
isTrackListOpen: this.props.displayTracklist,
};
this.toggleTracklist = this.toggleTracklist.bind(this);
this.isNarrowContext = this.isNarrowContext.bind(this);
}
isNarrowContext() {
return this.root && this.root.offsetWidth < 480 && window.innerWidth > 480;
}
toggleTracklist() {
this.setState(state => ({
isTrackListOpen: !state.isTrackListOpen,
}));
}
render() {
const { isTrackListOpen } = this.state;
const {
tracks,
playStatus,
activeIndex,
volume,
position,
duration,
playbackRate,
shuffle,
shuffleEnabled,
currentTrack,
playTrack,
togglePlay,
nextTrack,
prevTrack,
setPosition,
setVolume,
setPlaybackRate,
toggleTracklistCycling,
cycleTracks,
toggleShuffle,
allowTracklistToggle,
allowTracklistLoop,
allowPlaybackRate,
allowTrackLoop,
setTrackCycling,
reverseTrackOrder,
displayTrackNo,
displayTracklistCovers,
displayActiveCover,
displayCredits,
limitTracklistHeight,
tracklistHeight,
displayBuyButtons,
buyButtonsTarget,
displayArtistNames,
maxWidth,
repeatingTrackIndex,
skipAmount,
skipPosition,
countdownTimerByDefault,
buffering,
} = this.props;
const classes = classNames({
'ai-wrap': true,
'ai-type-full': true,
'ai-is-loading': !tracks.length,
'ai-narrow': this.isNarrowContext(),
'ai-with-typography': !typographyDisabled(),
});
const audioControlClasses = classNames({
'ai-audio-control': true,
'ai-audio-playing': playStatus === Sound.status.PLAYING,
'ai-audio-loading': buffering,
});
return (
<div
ref={ref => (this.root = ref)} // eslint-disable-line no-return-assign
className={classes}
style={{ maxWidth }}
>
<div className="ai-control-wrap">
{displayActiveCover && (
<Cover
className="ai-thumb ai-control-wrap-thumb"
src={currentTrack.cover}
alt={currentTrack.title}
/>
)}
<div className="ai-control-wrap-controls">
<div className="ai-audio-controls-main">
<Button
onClick={togglePlay}
className={audioControlClasses}
ariaLabel={
playStatus === Sound.status.PLAYING
? sprintf(aiStrings.pause_title, currentTrack.title)
: sprintf(aiStrings.play_title, currentTrack.title)
}
ariaPressed={playStatus === Sound.status.PLAYING}
>
{playStatus === Sound.status.PLAYING ? (
<PauseIcon />
) : (
<PlayIcon />
)}
<span className="ai-control-spinner" />
</Button>
<div className="ai-track-info">
<p className="ai-track-title">
<span>{currentTrack.title}</span>
</p>
{(tracks.length === 0 || currentTrack.subtitle) &&
displayArtistNames && (
<p className="ai-track-subtitle">
<span>{currentTrack.subtitle}</span>
</p>
)}
</div>
</div>
<div className="ai-audio-controls-progress">
<ProgressBar
setPosition={setPosition}
duration={duration}
position={position}
/>
<Time
duration={duration}
position={position}
countdown={countdownTimerByDefault}
/>
</div>
<div className="ai-audio-controls-meta">
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-prev"
onClick={prevTrack}
ariaLabel={aiStrings.previous}
title={aiStrings.previous}
>
<PreviousIcon />
</Button>
)}
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-next"
onClick={nextTrack}
ariaLabel={aiStrings.next}
title={aiStrings.next}
>
<NextIcon />
</Button>
)}
<VolumeControl
volume={volume}
// eslint-disable-next-line no-shadow
setVolume={setVolume}
/>
{allowTracklistLoop && (
<Button
className={`ai-btn ai-btn-repeat ${cycleTracks &&
'ai-btn-active'}`}
onClick={toggleTracklistCycling}
ariaLabel={aiStrings.toggle_list_repeat}
>
<RefreshIcon />
</Button>
)}
{shuffleEnabled && (
<Button
className={`ai-btn ai-btn-shuffle ${shuffle &&
'ai-btn-active'}`}
onClick={toggleShuffle}
ariaLabel={aiStrings.shuffle}
>
<ShuffleIcon />
</Button>
)}
{allowPlaybackRate && (
<Button
className="ai-btn ai-btn-playback-rate"
onClick={setPlaybackRate}
ariaLabel={aiStrings.set_playback_rate}
>
<Fragment>&times;{playbackRate}</Fragment>
</Button>
)}
{skipAmount > 0 && (
<Fragment>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(-1)}
ariaLabel={aiStrings.skip_backward}
>
-{skipAmount}s
</Button>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(1)}
ariaLabel={aiStrings.skip_forward}
>
+{skipAmount}s
</Button>
</Fragment>
)}
{currentTrack && currentTrack.lyrics && !isTrackListOpen && (
<AppContext.Consumer>
{({ toggleLyricsModal }) => (
<Button
className="ai-btn ai-lyrics"
onClick={() => toggleLyricsModal(true, currentTrack)}
ariaLabel={aiStrings.open_track_lyrics}
title={aiStrings.open_track_lyrics}
>
<LyricsIcon />
</Button>
)}
</AppContext.Consumer>
)}
{allowTracklistToggle && (
<Button
className="ai-btn ai-tracklist-toggle"
onClick={this.toggleTracklist}
ariaLabel={aiStrings.toggle_list_visible}
ariaExpanded={isTrackListOpen}
>
<PlaylistIcon />
</Button>
)}
</div>
</div>
</div>
<div
className={`ai-tracklist-wrap ${
isTrackListOpen ? 'ai-tracklist-open' : ''
}`}
>
<TracklistWrap
className="ai-tracklist"
trackClassName="ai-track"
tracks={tracks}
activeTrackIndex={activeIndex}
isOpen={isTrackListOpen}
displayTrackNo={displayTrackNo}
displayCovers={displayTracklistCovers}
displayBuyButtons={displayBuyButtons}
buyButtonsTarget={buyButtonsTarget}
displayArtistNames={displayArtistNames}
reverseTrackOrder={reverseTrackOrder}
limitTracklistHeight={limitTracklistHeight}
tracklistHeight={tracklistHeight}
onTrackClick={playTrack}
onTrackLoop={allowTrackLoop ? setTrackCycling : undefined}
repeatingTrackIndex={repeatingTrackIndex}
/>
</div>
{displayCredits && (
<div className="ai-footer">
<p>
Powered by{' '}
<a
href="https://www.cssigniter.com/plugins/audioigniter?utm_source=player&utm_medium=link&utm_content=audioigniter&utm_campaign=footer-link"
target="_blank"
rel="noopener noreferrer"
>
AudioIgniter
</a>
</p>
</div>
)}
</div>
);
}
}
Player.propTypes = {
tracks: PropTypes.arrayOf(PropTypes.object), tracks: PropTypes.arrayOf(PropTypes.object),
playStatus: PropTypes.oneOf([ playStatus: PropTypes.oneOf([
Sound.status.PLAYING, Sound.status.PLAYING,
@ -372,8 +73,303 @@ Player.propTypes = {
shuffleEnabled: PropTypes.bool, shuffleEnabled: PropTypes.bool,
shuffle: PropTypes.bool, shuffle: PropTypes.bool,
toggleShuffle: PropTypes.func.isRequired, toggleShuffle: PropTypes.func.isRequired,
playerButtons: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string,
url: PropTypes.string,
icon: PropTypes.string,
}).isRequired,
),
}; };
const Player = ({
tracks,
playStatus,
activeIndex,
volume,
position,
duration,
playbackRate,
shuffle,
shuffleEnabled,
currentTrack,
playTrack,
togglePlay,
nextTrack,
prevTrack,
setPosition,
setVolume,
setPlaybackRate,
toggleTracklistCycling,
cycleTracks,
toggleShuffle,
allowTracklistToggle,
allowTracklistLoop,
allowPlaybackRate,
allowTrackLoop,
setTrackCycling,
reverseTrackOrder,
displayTrackNo,
displayTracklist,
displayTracklistCovers,
displayActiveCover,
displayCredits,
limitTracklistHeight,
tracklistHeight,
displayBuyButtons,
buyButtonsTarget,
displayArtistNames,
maxWidth,
repeatingTrackIndex,
skipAmount,
skipPosition,
countdownTimerByDefault,
buffering,
playerButtons,
}) => {
const ref = useRef(null);
const [isTrackListOpen, setTracklistOpen] = useState(displayTracklist);
const { width } = useComponentSize(ref);
const isNarrowContext = () => {
return width != null && width < 480 && window.innerWidth > 480;
};
const toggleTracklist = () => {
setTracklistOpen(x => !x);
};
const classes = classNames({
'ai-wrap': true,
'ai-type-full': true,
'ai-is-loading': !tracks.length,
'ai-narrow': isNarrowContext(),
'ai-with-typography': !typographyDisabled(),
});
const audioControlClasses = classNames({
'ai-audio-control': true,
'ai-audio-playing': playStatus === Sound.status.PLAYING,
'ai-audio-loading': buffering,
});
return (
<div ref={ref} className={classes} style={{ maxWidth }}>
<div className="ai-control-wrap">
{displayActiveCover && (
<Cover
className="ai-thumb ai-control-wrap-thumb"
src={currentTrack.cover}
alt={currentTrack.title}
/>
)}
<div className="ai-control-wrap-controls">
<div className="ai-audio-controls-main">
<Button
onClick={togglePlay}
className={audioControlClasses}
ariaLabel={
playStatus === Sound.status.PLAYING
? sprintf(aiStrings.pause_title, currentTrack.title)
: sprintf(aiStrings.play_title, currentTrack.title)
}
ariaPressed={playStatus === Sound.status.PLAYING}
>
{playStatus === Sound.status.PLAYING ? (
<PauseIcon />
) : (
<PlayIcon />
)}
<span className="ai-control-spinner" />
</Button>
<div className="ai-track-info">
<p className="ai-track-title">
<span>{currentTrack.title}</span>
</p>
{(tracks.length === 0 || currentTrack.subtitle) &&
displayArtistNames && (
<p className="ai-track-subtitle">
<span>{currentTrack.subtitle}</span>
</p>
)}
</div>
</div>
<div className="ai-audio-controls-progress">
<ProgressBar
setPosition={setPosition}
duration={duration}
position={position}
/>
<Time
duration={duration}
position={position}
countdown={countdownTimerByDefault}
/>
</div>
<div className="ai-audio-controls-meta">
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-prev"
onClick={prevTrack}
ariaLabel={aiStrings.previous}
title={aiStrings.previous}
>
<PreviousIcon />
</Button>
)}
{tracks.length > 1 && (
<Button
className="ai-btn ai-tracklist-next"
onClick={nextTrack}
ariaLabel={aiStrings.next}
title={aiStrings.next}
>
<NextIcon />
</Button>
)}
<VolumeControl
volume={volume}
// eslint-disable-next-line no-shadow
setVolume={setVolume}
/>
{allowTracklistLoop && (
<Button
className={`ai-btn ai-btn-repeat ${cycleTracks &&
'ai-btn-active'}`}
onClick={toggleTracklistCycling}
ariaLabel={aiStrings.toggle_list_repeat}
>
<RefreshIcon />
</Button>
)}
{shuffleEnabled && (
<Button
className={`ai-btn ai-btn-shuffle ${shuffle &&
'ai-btn-active'}`}
onClick={toggleShuffle}
ariaLabel={aiStrings.shuffle}
>
<ShuffleIcon />
</Button>
)}
{allowPlaybackRate && (
<Button
className="ai-btn ai-btn-playback-rate"
onClick={setPlaybackRate}
ariaLabel={aiStrings.set_playback_rate}
>
<Fragment>&times;{playbackRate}</Fragment>
</Button>
)}
{skipAmount > 0 && (
<Fragment>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(-1)}
ariaLabel={aiStrings.skip_backward}
>
-{skipAmount}s
</Button>
<Button
className="ai-btn ai-btn-skip-position"
onClick={() => skipPosition(1)}
ariaLabel={aiStrings.skip_forward}
>
+{skipAmount}s
</Button>
</Fragment>
)}
{currentTrack && currentTrack.lyrics && !isTrackListOpen && (
<AppContext.Consumer>
{({ toggleLyricsModal }) => (
<Button
className="ai-btn ai-lyrics"
onClick={() => toggleLyricsModal(true, currentTrack)}
ariaLabel={aiStrings.open_track_lyrics}
title={aiStrings.open_track_lyrics}
>
<LyricsIcon />
</Button>
)}
</AppContext.Consumer>
)}
{allowTracklistToggle && (
<Button
className="ai-btn ai-tracklist-toggle"
onClick={toggleTracklist}
ariaLabel={aiStrings.toggle_list_visible}
ariaExpanded={isTrackListOpen}
>
<PlaylistIcon />
</Button>
)}
</div>
</div>
</div>
<div
className={`ai-tracklist-wrap ${
isTrackListOpen ? 'ai-tracklist-open' : ''
}`}
>
<TracklistWrap
className="ai-tracklist"
trackClassName="ai-track"
tracks={tracks}
activeTrackIndex={activeIndex}
isOpen={isTrackListOpen}
displayTrackNo={displayTrackNo}
displayCovers={displayTracklistCovers}
displayBuyButtons={displayBuyButtons}
buyButtonsTarget={buyButtonsTarget}
displayArtistNames={displayArtistNames}
reverseTrackOrder={reverseTrackOrder}
limitTracklistHeight={limitTracklistHeight}
tracklistHeight={tracklistHeight}
onTrackClick={playTrack}
onTrackLoop={allowTrackLoop ? setTrackCycling : undefined}
repeatingTrackIndex={repeatingTrackIndex}
/>
</div>
{playerButtons?.length > 0 && <PlayerButtons buttons={playerButtons} />}
{displayCredits && (
<div className="ai-footer">
<p>
Powered by{' '}
<a
href="https://www.cssigniter.com/plugins/audioigniter?utm_source=player&utm_medium=link&utm_content=audioigniter&utm_campaign=footer-link"
target="_blank"
rel="noopener noreferrer"
>
AudioIgniter
</a>
</p>
</div>
)}
</div>
);
};
Player.propTypes = propTypes;
export default soundProvider(Player, { export default soundProvider(Player, {
onFinishedPlaying(props) { onFinishedPlaying(props) {
const { const {

View File

@ -6,6 +6,43 @@ import classNames from 'classnames';
import soundProvider from './soundProvider'; import soundProvider from './soundProvider';
import Tracklist from './components/Tracklist'; import Tracklist from './components/Tracklist';
import typographyDisabled from '../utils/typography-disabled'; import typographyDisabled from '../utils/typography-disabled';
import PlayerButtons from './components/PlayerButtons';
const propTypes = {
tracks: PropTypes.arrayOf(PropTypes.object),
playStatus: PropTypes.oneOf([
Sound.status.PLAYING,
Sound.status.PAUSED,
Sound.status.STOPPED,
]),
activeIndex: PropTypes.number,
position: PropTypes.number,
duration: PropTypes.number,
setPosition: PropTypes.func.isRequired,
togglePlay: PropTypes.func.isRequired,
setTrackCycling: PropTypes.func.isRequired,
allowTrackLoop: PropTypes.bool,
maxWidth: PropTypes.string,
reverseTrackOrder: PropTypes.bool,
displayTrackNo: PropTypes.bool,
buyButtonsTarget: PropTypes.bool,
displayArtistNames: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
displayCredits: PropTypes.bool,
repeatingTrackIndex: PropTypes.number,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool,
playerButtons: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string,
url: PropTypes.string,
icon: PropTypes.string,
}).isRequired,
),
};
const SimplePlayer = props => { const SimplePlayer = props => {
const { playStatus } = props; const { playStatus } = props;
@ -48,6 +85,10 @@ const SimplePlayer = props => {
/> />
</div> </div>
{props.playerButtons?.length > 0 && (
<PlayerButtons buttons={props.playerButtons} />
)}
{props.displayCredits && ( {props.displayCredits && (
<div className="ai-footer"> <div className="ai-footer">
<p> <p>
@ -66,34 +107,7 @@ const SimplePlayer = props => {
); );
}; };
SimplePlayer.propTypes = { SimplePlayer.propTypes = propTypes;
tracks: PropTypes.arrayOf(PropTypes.object),
playStatus: PropTypes.oneOf([
Sound.status.PLAYING,
Sound.status.PAUSED,
Sound.status.STOPPED,
]),
activeIndex: PropTypes.number,
position: PropTypes.number,
duration: PropTypes.number,
setPosition: PropTypes.func.isRequired,
togglePlay: PropTypes.func.isRequired,
setTrackCycling: PropTypes.func.isRequired,
allowTrackLoop: PropTypes.bool,
maxWidth: PropTypes.string,
reverseTrackOrder: PropTypes.bool,
displayTrackNo: PropTypes.bool,
buyButtonsTarget: PropTypes.bool,
displayArtistNames: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
displayCredits: PropTypes.bool,
repeatingTrackIndex: PropTypes.number,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool,
};
export default soundProvider(SimplePlayer, { export default soundProvider(SimplePlayer, {
onFinishedPlaying(props) { onFinishedPlaying(props) {

View File

@ -1,6 +1,16 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const propTypes = {
className: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node,
ariaLabel: PropTypes.string,
ariaPressed: PropTypes.bool,
ariaExpanded: PropTypes.bool,
ariaControls: PropTypes.string,
};
const Button = ({ const Button = ({
className, className,
onClick, onClick,
@ -22,14 +32,6 @@ const Button = ({
</button> </button>
); );
Button.propTypes = { Button.propTypes = propTypes;
className: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node,
ariaLabel: PropTypes.string,
ariaPressed: PropTypes.bool,
ariaExpanded: PropTypes.bool,
ariaControls: PropTypes.string,
};
export default Button; export default Button;

View File

@ -1,7 +1,15 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { MusicNoteIcon } from './Icons'; import { MusicNoteIcon } from './Icons';
const propTypes = {
className: PropTypes.string,
title: PropTypes.string,
src: PropTypes.string,
onClick: PropTypes.func,
};
const Cover = ({ className, title, src, onClick }) => ( const Cover = ({ className, title, src, onClick }) => (
<div <div
className={className + (src ? '' : ' ai-track-no-thumb')} className={className + (src ? '' : ' ai-track-no-thumb')}
@ -11,11 +19,6 @@ const Cover = ({ className, title, src, onClick }) => (
</div> </div>
); );
Cover.propTypes = { Cover.propTypes = propTypes;
className: PropTypes.string,
title: PropTypes.string,
src: PropTypes.string,
onClick: PropTypes.func,
};
export default Cover; export default Cover;

View File

@ -0,0 +1,44 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const propTypes = {
className: PropTypes.string,
button: PropTypes.shape({
title: PropTypes.string,
url: PropTypes.string,
icon: PropTypes.string,
}).isRequired,
};
const PlayerButton = ({ className, button }) => {
const classes = classNames({
'ai-btn': true,
'ai-player-button': true,
'ai-player-button-icon-only': !button.title,
[className]: !!className,
});
return (
<a
href={button.url}
className={classes}
target="_blank"
rel="noopener noreferrer"
>
{button.icon && (
<span
className="ai-player-button-icon"
dangerouslySetInnerHTML={{ __html: button.icon }}
/>
)}
{button.title && (
<span className="ai-player-button-title">{button.title}</span>
)}
</a>
);
};
PlayerButton.propTypes = propTypes;
export default PlayerButton;

View File

@ -0,0 +1,35 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import PlayerButton from './PlayerButton';
const propTypes = {
className: PropTypes.string,
buttons: PropTypes.arrayOf(
PropTypes.shape({
title: PropTypes.string,
url: PropTypes.string,
icon: PropTypes.string,
}).isRequired,
).isRequired,
};
const PlayerButtons = ({ className, buttons }) => {
const classes = classNames({
'ai-player-buttons': true,
[className]: !!className,
});
return (
<div className={classes}>
{buttons.map((button, index) => {
return <PlayerButton key={index} button={button} />;
})}
</div>
);
};
PlayerButtons.propTypes = propTypes;
export default PlayerButtons;

View File

@ -1,15 +1,14 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
export default class ProgressBar extends React.Component { const propTypes = {
constructor() { setPosition: PropTypes.func,
super(); position: PropTypes.number.isRequired,
this.handleClick = this.handleClick.bind(this); duration: PropTypes.number.isRequired,
} };
handleClick(event) {
const { duration, setPosition } = this.props;
const ProgressBar = ({ position, duration, setPosition }) => {
const handleClick = event => {
if (setPosition == null) { if (setPosition == null) {
return; return;
} }
@ -19,24 +18,18 @@ export default class ProgressBar extends React.Component {
const posX = offsetX / event.currentTarget.offsetWidth; const posX = offsetX / event.currentTarget.offsetWidth;
setPosition(posX * duration); setPosition(posX * duration);
} };
render() { return (
const { position, duration } = this.props; <span onClick={handleClick} className="ai-track-progress-bar">
<span
return ( className="ai-track-progress"
<span onClick={this.handleClick} className="ai-track-progress-bar"> style={{ width: `${(position * 100) / duration}%` }}
<span />
className="ai-track-progress" </span>
style={{ width: `${(position * 100) / duration}%` }} );
/>
</span>
);
}
}
ProgressBar.propTypes = {
setPosition: PropTypes.func,
position: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
}; };
ProgressBar.propTypes = propTypes;
export default ProgressBar;

View File

@ -1,28 +1,21 @@
import React from 'react'; import React, { useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
export default class Time extends React.Component { const propTypes = {
constructor(props) { position: PropTypes.number.isRequired,
super(props); duration: PropTypes.number.isRequired,
countdown: PropTypes.bool.isRequired,
};
const { countdown } = this.props; const Time = ({ countdown, position, duration }) => {
const [showRemaining, setShowRemaining] = useState(countdown || false);
this.state = {
showRemaining: countdown || false,
};
this.handleClick = this.handleClick.bind(this);
}
/** /**
* Pretty prints time remaining/elapsed * Pretty prints time remaining/elapsed
* *
* @param {number} position - Track position in milliseconds
* @param {number} duration - Track duration in milliseconds
* @returns {string} - Time pretty formatted * @returns {string} - Time pretty formatted
*/ */
formatTime(position, duration) { const renderFormattedTime = () => {
const { showRemaining } = this.state;
const positionInSeconds = showRemaining const positionInSeconds = showRemaining
? (duration - position) / 1000 ? (duration - position) / 1000
: position / 1000; : position / 1000;
@ -34,7 +27,7 @@ export default class Time extends React.Component {
min = min >= 10 ? min : `0${min}`; min = min >= 10 ? min : `0${min}`;
sec = sec >= 10 ? sec : `0${sec}`; sec = sec >= 10 ? sec : `0${sec}`;
if (!isNaN(sec)) { if (!Number.isNaN(sec)) {
if (hours) { if (hours) {
time = `${hours}:${min}:${sec}`; time = `${hours}:${min}:${sec}`;
} else { } else {
@ -43,26 +36,19 @@ export default class Time extends React.Component {
} }
return showRemaining ? `-${time}` : time; return showRemaining ? `-${time}` : time;
} };
handleClick() { const handleClick = () => {
const { showRemaining } = this.state; setShowRemaining(x => !x);
this.setState({ showRemaining: !showRemaining }); };
}
render() { return (
const { position, duration } = this.props; <span className="ai-track-time" onClick={handleClick}>
{renderFormattedTime()}
return ( </span>
<span className="ai-track-time" onClick={this.handleClick}> );
{this.formatTime(position, duration)}
</span>
);
}
}
Time.propTypes = {
position: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
countdown: PropTypes.bool.isRequired,
}; };
Time.propTypes = propTypes;
export default Time;

View File

@ -11,6 +11,43 @@ import ProgressBar from './ProgressBar';
import { PlayIcon, PauseIcon } from './Icons'; import { PlayIcon, PauseIcon } from './Icons';
import { AppContext } from '../../App'; import { AppContext } from '../../App';
const propTypes = {
track: PropTypes.shape({
audio: PropTypes.string,
buyUrl: PropTypes.string,
cover: PropTypes.string,
title: PropTypes.string,
subtitle: PropTypes.string,
lyrics: PropTypes.string,
downloadUrl: PropTypes.string,
downloadFilename: PropTypes.string,
}),
index: PropTypes.number.isRequired,
trackNo: PropTypes.number,
isActive: PropTypes.bool,
position: PropTypes.number,
duration: PropTypes.number,
setPosition: PropTypes.func,
playStatus: PropTypes.oneOf([
Sound.status.PLAYING,
Sound.status.PAUSED,
Sound.status.STOPPED,
]),
onTrackClick: PropTypes.func.isRequired,
onTrackLoop: PropTypes.func,
className: PropTypes.string.isRequired,
isStandalone: PropTypes.bool,
buyButtonsTarget: PropTypes.bool,
displayArtistNames: PropTypes.bool,
displayCovers: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
isLooping: PropTypes.bool,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool,
};
const Track = ({ const Track = ({
track, track,
index, index,
@ -114,40 +151,6 @@ const Track = ({
); );
}; };
Track.propTypes = { Track.propTypes = propTypes;
track: PropTypes.shape({
audio: PropTypes.string,
buyUrl: PropTypes.string,
cover: PropTypes.string,
title: PropTypes.string,
subtitle: PropTypes.string,
lyrics: PropTypes.string,
downloadUrl: PropTypes.string,
}),
index: PropTypes.number.isRequired,
trackNo: PropTypes.number,
isActive: PropTypes.bool,
position: PropTypes.number,
duration: PropTypes.number,
setPosition: PropTypes.func,
playStatus: PropTypes.oneOf([
Sound.status.PLAYING,
Sound.status.PAUSED,
Sound.status.STOPPED,
]),
onTrackClick: PropTypes.func.isRequired,
onTrackLoop: PropTypes.func,
className: PropTypes.string.isRequired,
isStandalone: PropTypes.bool,
buyButtonsTarget: PropTypes.bool,
displayArtistNames: PropTypes.bool,
displayCovers: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
isLooping: PropTypes.bool,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool,
};
export default Track; export default Track;

View File

@ -1,7 +1,23 @@
import React, { Fragment } from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { CartIcon, DownloadIcon, LyricsIcon, RefreshIcon } from './Icons'; import { CartIcon, DownloadIcon, LyricsIcon, RefreshIcon } from './Icons';
const propTypes = {
buyButtonsTarget: PropTypes.bool,
buyUrl: PropTypes.string,
downloadUrl: PropTypes.string,
downloadFilename: PropTypes.string,
onTrackLoop: PropTypes.func,
isLooping: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
onOpenTrackLyrics: PropTypes.func,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
isPlaying: PropTypes.bool,
};
const TrackButtons = ({ const TrackButtons = ({
buyButtonsTarget, buyButtonsTarget,
buyUrl, buyUrl,
@ -28,6 +44,7 @@ const TrackButtons = ({
return ( return (
<div className="ai-track-control-buttons"> <div className="ai-track-control-buttons">
{buyUrl && displayBuyButtons && ( {buyUrl && displayBuyButtons && (
// eslint-disable-next-line react/jsx-no-target-blank
<a <a
href={buyUrl} href={buyUrl}
className="ai-track-btn" className="ai-track-btn"
@ -83,7 +100,7 @@ const TrackButtons = ({
setPlaybackRate(); setPlaybackRate();
}} }}
> >
<Fragment>&times;{playbackRate}</Fragment> &times;{playbackRate}
</a> </a>
)} )}
@ -113,19 +130,6 @@ const TrackButtons = ({
); );
}; };
TrackButtons.propTypes = { TrackButtons.propTypes = propTypes;
buyButtonsTarget: PropTypes.bool,
buyUrl: PropTypes.string,
downloadUrl: PropTypes.string,
downloadFilename: PropTypes.string,
onTrackLoop: PropTypes.func,
isLooping: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
onOpenTrackLyrics: PropTypes.func,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
isPlaying: PropTypes.bool,
};
export default TrackButtons; export default TrackButtons;

View File

@ -6,6 +6,12 @@ if (document.querySelector('.audioigniter-root')) {
Modal.setAppElement('.audioigniter-root'); Modal.setAppElement('.audioigniter-root');
} }
const propTypes = {
isOpen: PropTypes.bool,
closeModal: PropTypes.func.isRequired,
children: PropTypes.any,
};
const TrackLyricsModal = ({ isOpen, closeModal, children }) => { const TrackLyricsModal = ({ isOpen, closeModal, children }) => {
return ( return (
<Modal <Modal
@ -32,12 +38,6 @@ const TrackLyricsModal = ({ isOpen, closeModal, children }) => {
); );
}; };
const propTypes = {
isOpen: PropTypes.bool,
closeModal: PropTypes.func.isRequired,
children: PropTypes.any,
};
TrackLyricsModal.propTypes = propTypes; TrackLyricsModal.propTypes = propTypes;
export default TrackLyricsModal; export default TrackLyricsModal;

View File

@ -1,6 +1,14 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const propTypes = {
track: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
trackNo: PropTypes.number,
style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
className: PropTypes.string,
displayArtistNames: PropTypes.bool,
};
const TrackTitle = ({ const TrackTitle = ({
className, className,
style, style,
@ -25,12 +33,6 @@ const TrackTitle = ({
); );
}; };
TrackTitle.propTypes = { TrackTitle.propTypes = propTypes;
track: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
trackNo: PropTypes.number,
style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
className: PropTypes.string,
displayArtistNames: PropTypes.bool,
};
export default TrackTitle; export default TrackTitle;

View File

@ -1,13 +1,43 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Sound from 'react-sound'; import Sound from 'react-sound';
import Track from './Track'; import Track from './Track';
const propTypes = {
tracks: PropTypes.arrayOf(PropTypes.object).isRequired,
playStatus: PropTypes.oneOf([
Sound.status.PLAYING,
Sound.status.PAUSED,
Sound.status.STOPPED,
]),
activeTrackIndex: PropTypes.number,
position: PropTypes.number,
duration: PropTypes.number,
setPosition: PropTypes.func,
standaloneTracks: PropTypes.bool,
onTrackClick: PropTypes.func.isRequired,
onTrackLoop: PropTypes.func,
className: PropTypes.string,
trackClassName: PropTypes.string,
reverseTrackOrder: PropTypes.bool,
displayTrackNo: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
buyButtonsTarget: PropTypes.bool,
displayCovers: PropTypes.bool,
displayArtistNames: PropTypes.bool,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool,
repeatingTrackIndex: PropTypes.bool,
};
const Tracklist = ({ ...props }) => { const Tracklist = ({ ...props }) => {
const { tracks } = props; const { tracks } = props;
return ( return (
<ul className={props.className} aria-expanded="true"> <ul className={props.className}>
{tracks && {tracks &&
tracks.map((track, index) => { tracks.map((track, index) => {
const trackNo = props.reverseTrackOrder const trackNo = props.reverseTrackOrder
@ -46,32 +76,6 @@ const Tracklist = ({ ...props }) => {
); );
}; };
Tracklist.propTypes = { Tracklist.propTypes = propTypes;
tracks: PropTypes.arrayOf(PropTypes.object).isRequired,
playStatus: PropTypes.oneOf([
Sound.status.PLAYING,
Sound.status.PAUSED,
Sound.status.STOPPED,
]),
activeTrackIndex: PropTypes.number,
position: PropTypes.number,
duration: PropTypes.number,
setPosition: PropTypes.func,
standaloneTracks: PropTypes.bool,
onTrackClick: PropTypes.func.isRequired,
onTrackLoop: PropTypes.func,
className: PropTypes.string,
trackClassName: PropTypes.string,
reverseTrackOrder: PropTypes.bool,
displayTrackNo: PropTypes.bool,
displayBuyButtons: PropTypes.bool,
buyButtonsTarget: PropTypes.bool,
displayCovers: PropTypes.bool,
displayArtistNames: PropTypes.bool,
playbackRate: PropTypes.number,
setPlaybackRate: PropTypes.func,
allowPlaybackRate: PropTypes.bool,
buffering: PropTypes.bool,
};
export default Tracklist; export default Tracklist;

View File

@ -1,81 +1,10 @@
import React from 'react'; import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Scrollbars } from 'react-custom-scrollbars'; import { Scrollbars } from 'react-custom-scrollbars';
import Tracklist from './Tracklist'; import Tracklist from './Tracklist';
export default class TracklistWrap extends React.Component { const propTypes = {
componentWillReceiveProps(nextProps) {
const { activeTrackIndex, limitTracklistHeight } = this.props;
if (
activeTrackIndex !== nextProps.activeTrackIndex &&
limitTracklistHeight
) {
this.scrollToTrack(nextProps.activeTrackIndex);
}
}
scrollToTrack(trackIndex) {
const { tracks } = this.props;
const trackHeight = this.scrollbarsRef.getScrollHeight() / tracks.length;
if (!this.isTrackVisible(trackIndex)) {
this.scrollbarsRef.scrollTop(trackHeight * trackIndex);
}
}
isTrackVisible(trackIndex) {
const { tracks } = this.props;
const trackHeight = this.scrollbarsRef.getScrollHeight() / tracks.length;
const trackPosition = trackHeight * trackIndex;
const scrollTop = this.scrollbarsRef.getScrollTop();
const scrollBottom = scrollTop + this.scrollbarsRef.getClientHeight();
return !(trackPosition < scrollTop || trackPosition > scrollBottom);
}
renderTracklist() {
return (
<Tracklist
tracks={this.props.tracks}
activeTrackIndex={this.props.activeTrackIndex}
onTrackClick={this.props.onTrackClick}
className={this.props.className}
trackClassName={this.props.trackClassName}
reverseTrackOrder={this.props.reverseTrackOrder}
displayTrackNo={this.props.displayTrackNo}
displayBuyButtons={this.props.displayBuyButtons}
buyButtonsTarget={this.props.buyButtonsTarget}
displayCovers={this.props.displayCovers}
displayArtistNames={this.props.displayArtistNames}
onTrackLoop={this.props.onTrackLoop}
repeatingTrackIndex={this.props.repeatingTrackIndex}
/>
);
}
render() {
const { isOpen, limitTracklistHeight, tracklistHeight } = this.props;
return (
<div id="tracklisting" style={{ display: isOpen ? 'block' : 'none' }}>
{limitTracklistHeight ? (
<Scrollbars
className="ai-scroll-wrap"
ref={ref => (this.scrollbarsRef = ref)} // eslint-disable-line no-return-assign
style={{ height: tracklistHeight }}
>
{this.renderTracklist()}
</Scrollbars>
) : (
this.renderTracklist()
)}
</div>
);
}
}
TracklistWrap.propTypes = {
tracks: PropTypes.arrayOf(PropTypes.object).isRequired, tracks: PropTypes.arrayOf(PropTypes.object).isRequired,
activeTrackIndex: PropTypes.number.isRequired, activeTrackIndex: PropTypes.number.isRequired,
onTrackClick: PropTypes.func.isRequired, onTrackClick: PropTypes.func.isRequired,
@ -93,3 +22,87 @@ TracklistWrap.propTypes = {
onTrackLoop: PropTypes.func, onTrackLoop: PropTypes.func,
repeatingTrackIndex: PropTypes.number, repeatingTrackIndex: PropTypes.number,
}; };
const TracklistWrap = ({
isOpen,
limitTracklistHeight,
tracklistHeight,
tracks,
activeTrackIndex,
onTrackClick,
onTrackLoop,
className,
reverseTrackOrder,
trackClassName,
displayTrackNo,
displayBuyButtons,
buyButtonsTarget,
displayCovers,
displayArtistNames,
repeatingTrackIndex,
}) => {
const scrollbarRef = useRef(null);
const isTrackVisible = trackIndex => {
const trackHeight = scrollbarRef.current.getScrollHeight() / tracks.length;
const trackPosition = trackHeight * trackIndex;
const scrollTop = scrollbarRef.current.getScrollTop();
const scrollBottom = scrollTop + scrollbarRef.current.getClientHeight();
return !(trackPosition < scrollTop || trackPosition > scrollBottom);
};
const scrollToTrack = trackIndex => {
const trackHeight = scrollbarRef.current.getScrollHeight() / tracks.length;
if (!isTrackVisible(trackIndex)) {
scrollbarRef.current.scrollTop(trackHeight * trackIndex);
}
};
useEffect(() => {
if (limitTracklistHeight) {
scrollToTrack(activeTrackIndex);
}
}, [activeTrackIndex, limitTracklistHeight]);
const renderTracklist = () => {
return (
<Tracklist
tracks={tracks}
activeTrackIndex={activeTrackIndex}
onTrackClick={onTrackClick}
className={className}
trackClassName={trackClassName}
reverseTrackOrder={reverseTrackOrder}
displayTrackNo={displayTrackNo}
displayBuyButtons={displayBuyButtons}
buyButtonsTarget={buyButtonsTarget}
displayCovers={displayCovers}
displayArtistNames={displayArtistNames}
onTrackLoop={onTrackLoop}
repeatingTrackIndex={repeatingTrackIndex}
/>
);
};
return (
<div id="tracklisting" style={{ display: isOpen ? 'block' : 'none' }}>
{limitTracklistHeight ? (
<Scrollbars
className="ai-scroll-wrap"
ref={scrollbarRef} // eslint-disable-line no-return-assign
style={{ height: tracklistHeight }}
>
{renderTracklist()}
</Scrollbars>
) : (
renderTracklist()
)}
</div>
);
};
TracklistWrap.propTypes = propTypes;
export default TracklistWrap;

View File

@ -1,12 +1,16 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Button from './Button'; import Button from './Button';
import { VolumeUpIcon, VolumeDownIcon } from './Icons'; import { VolumeUpIcon, VolumeDownIcon } from './Icons';
export default class VolumeControl extends React.Component { const propTypes = {
renderVolumeBars() { volume: PropTypes.number.isRequired,
const { volume, setVolume } = this.props; setVolume: PropTypes.func.isRequired,
};
const VolumeControl = ({ volume, setVolume }) => {
const renderVolumeBars = () => {
return Array(...Array(11)).map((bar, i) => ( return Array(...Array(11)).map((bar, i) => (
<span <span
key={i} // eslint-disable-line react/no-array-index-key key={i} // eslint-disable-line react/no-array-index-key
@ -16,37 +20,32 @@ export default class VolumeControl extends React.Component {
onClick={() => setVolume(i * 10)} onClick={() => setVolume(i * 10)}
/> />
)); ));
} };
render() { return (
const { volume, setVolume } = this.props; <div className="ai-audio-volume-control">
<div className="ai-audio-volume-bars">{renderVolumeBars()}</div>
return ( <div className="ai-audio-volume-control-btns">
<div className="ai-audio-volume-control"> <Button
<div className="ai-audio-volume-bars">{this.renderVolumeBars()}</div> className="ai-btn"
onClick={() => setVolume(volume >= 100 ? volume : volume + 10)}
<div className="ai-audio-volume-control-btns"> aria-label={aiStrings.volume_up}
<Button >
className="ai-btn" <VolumeUpIcon />
onClick={() => setVolume(volume >= 100 ? volume : volume + 10)} </Button>
aria-label={aiStrings.volume_up} <Button
> className="ai-btn"
<VolumeUpIcon /> onClick={() => setVolume(volume <= 0 ? volume : volume - 10)}
</Button> aria-label={aiStrings.volume_down}
<Button >
className="ai-btn" <VolumeDownIcon />
onClick={() => setVolume(volume <= 0 ? volume : volume - 10)} </Button>
aria-label={aiStrings.volume_down}
>
<VolumeDownIcon />
</Button>
</div>
</div> </div>
); </div>
} );
}
VolumeControl.propTypes = {
volume: PropTypes.number.isRequired,
setVolume: PropTypes.func.isRequired,
}; };
VolumeControl.propTypes = propTypes;
export default VolumeControl;

View File

@ -5,6 +5,7 @@ import Sound from 'react-sound';
import SoundCloud from '../utils/soundcloud'; import SoundCloud from '../utils/soundcloud';
import multiSoundDisabled from '../utils/multi-sound-disabled'; import multiSoundDisabled from '../utils/multi-sound-disabled';
import { getInitialTrackQueueAndIndex } from '../utils/getInitialTrackIndex'; import { getInitialTrackQueueAndIndex } from '../utils/getInitialTrackIndex';
import playerStorage from '../utils/playerStorage';
const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2, 3]; const PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
@ -14,12 +15,15 @@ const soundProvider = (Player, events) => {
super(props); super(props);
const { const {
playerId,
volume, volume,
cycleTracks, cycleTracks,
defaultShuffle, defaultShuffle,
shuffleEnabled, shuffleEnabled,
} = this.props; } = this.props;
const initialData = playerStorage.get(playerId);
this.state = { this.state = {
tracks: [], tracks: [],
activeIndex: 0, // Determine active track by index activeIndex: 0, // Determine active track by index
@ -30,7 +34,7 @@ const soundProvider = (Player, events) => {
// [4, 2, 0, ...] will play the 5th track first, 3rd second, then the 1st, etc. // [4, 2, 0, ...] will play the 5th track first, 3rd second, then the 1st, etc.
trackQueue: [], trackQueue: [],
playStatus: Sound.status.STOPPED, playStatus: Sound.status.STOPPED,
position: 0, position: initialData?.position ?? 0,
duration: 0, duration: 0,
playbackRate: 1, playbackRate: 1,
volume: volume == null ? 100 : volume, volume: volume == null ? 100 : volume,
@ -61,19 +65,39 @@ const soundProvider = (Player, events) => {
componentDidMount() { componentDidMount() {
const { const {
playerId,
tracksUrl, tracksUrl,
soundcloudClientId, soundcloudClientId,
reverseTrackOrder, reverseTrackOrder,
initialTrack, initialTrack,
rememberLastPosition,
track,
} = this.props; } = this.props;
const { shuffle } = this.state; const { shuffle } = this.state;
const initialData = playerStorage.get(playerId);
// We have a standalone track (from the shortcode).
if (track) {
try {
this.setState({
tracks: [JSON.parse(track)],
});
return;
// eslint-disable-next-line no-empty
} catch {}
}
const tracksPromised = fetch(tracksUrl).then(res => res.json()); const tracksPromised = fetch(tracksUrl).then(res => res.json());
if (!soundcloudClientId) { if (!soundcloudClientId) {
tracksPromised.then(tracks => { tracksPromised.then(tracks => {
const { trackQueue, activeIndex } = getInitialTrackQueueAndIndex({ const { trackQueue, activeIndex } = getInitialTrackQueueAndIndex({
tracks, tracks,
initialTrack, initialTrack:
initialData?.activeIndex && rememberLastPosition
? initialData.activeIndex + 1
: initialTrack,
reverseTrackOrder, reverseTrackOrder,
shuffle, shuffle,
}); });
@ -139,12 +163,23 @@ const soundProvider = (Player, events) => {
// Events // Events
onPlaying({ duration, position }) { onPlaying({ duration, position }) {
const { activeIndex } = this.state;
const { playerId, rememberLastPosition } = this.props;
this.setState( this.setState(
() => ({ duration, position }), () => ({ duration, position }),
() => { () => {
if (events && events.onPlaying) { if (events && events.onPlaying) {
events.onPlaying(this.getFinalProps()); events.onPlaying(this.getFinalProps());
} }
// Store last position every 5 seconds
if (playerId && rememberLastPosition && position % 5000 < 300) {
playerStorage.set(playerId, {
position,
activeIndex,
});
}
}, },
); );
} }
@ -399,9 +434,11 @@ const soundProvider = (Player, events) => {
} }
EnhancedPlayer.propTypes = { EnhancedPlayer.propTypes = {
playerId: PropTypes.string,
volume: PropTypes.number, volume: PropTypes.number,
cycleTracks: PropTypes.bool, cycleTracks: PropTypes.bool,
tracksUrl: PropTypes.string, tracksUrl: PropTypes.string,
track: PropTypes.string,
soundcloudClientId: PropTypes.string, soundcloudClientId: PropTypes.string,
reverseTrackOrder: PropTypes.bool, reverseTrackOrder: PropTypes.bool,
skipAmount: PropTypes.number, skipAmount: PropTypes.number,
@ -410,6 +447,7 @@ const soundProvider = (Player, events) => {
initialTrack: PropTypes.number, initialTrack: PropTypes.number,
shuffleEnabled: PropTypes.bool, shuffleEnabled: PropTypes.bool,
defaultShuffle: PropTypes.bool, defaultShuffle: PropTypes.bool,
rememberLastPosition: PropTypes.bool,
}; };
return EnhancedPlayer; return EnhancedPlayer;

View File

@ -0,0 +1,39 @@
/**
* Very basic local storage facade with the ability to store objects.
*
* @type {{set: playerStorage.set, get: ((function(*): (undefined))|*)}}
*/
const playerStorage = {
set: (key, value) => {
if (!key || !value) {
return;
}
if (typeof value === 'object') {
window.localStorage.setItem(key, JSON.stringify(value));
} else {
window.localStorage.setItem(key, value);
}
},
get: key => {
const value = localStorage.getItem(key);
if (!value) {
return undefined;
}
try {
const parsed = JSON.parse(value);
if (parsed && typeof parsed === 'object') {
return parsed;
}
} catch {
return value;
}
return value;
},
};
export default playerStorage;

View File

@ -0,0 +1,62 @@
/**
* @file React hook for determining the size of a component.
*
* Forked from https://github.com/rehooks/component-size.
*/
import { useCallback, useState, useLayoutEffect } from 'react';
const getSize = el => {
if (!el) {
return {
width: 0,
height: 0,
};
}
return {
width: el.offsetWidth,
height: el.offsetHeight,
};
};
const useComponentSize = ref => {
const [ComponentSize, setComponentSize] = useState(
getSize(ref ? ref.current : {}),
);
const handleResize = useCallback(() => {
if (ref.current) {
setComponentSize(getSize(ref.current));
}
}, [ref]);
useLayoutEffect(() => {
if (!ref.current) {
return undefined;
}
handleResize();
if (typeof ResizeObserver === 'function') {
// eslint-disable-next-line no-undef
let resizeObserver = new ResizeObserver(() => handleResize());
resizeObserver.observe(ref.current);
return () => {
resizeObserver.disconnect(ref.current);
resizeObserver = null;
};
}
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [ref.current]);
return ComponentSize;
};
export default useComponentSize;

View File

@ -597,6 +597,52 @@ $screen-xs-max: 320px !default;
} }
} }
//
// Player buttons
//
.ai-player-buttons {
display: flex;
align-items: center;
flex-wrap: wrap;
line-height: normal;
grid-gap: calc($spacing / 2);
margin-top: $spacing;
}
.ai-player-button {
display: flex;
align-items: center;
justify-content: center;
grid-gap: 6px;
font-size: 13px;
color: currentColor;
width: auto;
padding-left: 15px;
padding-right: 15px;
}
.ai-player-button-icon-only {
padding: 0;
width: 32px;
}
.ai-player-button-icon {
width: 18px;
height: 18px;
display: block;
svg {
width: 100%;
height: 100%;
fill: currentColor;
rect,
path {
fill: currentColor;
}
}
}
// //
// Footer // Footer
// //
@ -979,16 +1025,16 @@ $screen-xs-max: 320px !default;
} }
.ai-audio-controls-main { .ai-audio-controls-main {
padding-left: $spacing / 2; padding-left: calc($spacing / 2);
padding-right: $spacing / 2; padding-right: calc($spacing / 2);
} }
.ai-track-info { .ai-track-info {
padding-left: $spacing / 2; padding-left: calc($spacing / 2);
} }
.ai-audio-controls-meta { .ai-audio-controls-meta {
margin-left: $spacing / 2; margin-left: calc($spacing / 2);
} }
} }

View File

@ -28,7 +28,9 @@ const common = {
}), }),
], ],
devServer: { devServer: {
contentBase: path.resolve('assets'), static: {
directory: path.resolve('assets'),
},
}, },
resolve: { resolve: {
extensions: ['.js', '.jsx'], extensions: ['.js', '.jsx'],
@ -37,7 +39,8 @@ const common = {
rules: [ rules: [
{ {
test: /\.jsx?$/, test: /\.jsx?$/,
use: ['babel-loader?cacheDirectory'], exclude: /node_modules/,
loader: 'babel-loader',
}, },
], ],
}, },
@ -51,6 +54,7 @@ switch (TARGET) {
config = merge( config = merge(
common, common,
{ {
mode: 'production',
resolve: { resolve: {
modules: [path.resolve(__dirname), 'node_modules'], modules: [path.resolve(__dirname), 'node_modules'],
extensions: ['.js', '.jsx'], extensions: ['.js', '.jsx'],
@ -66,6 +70,7 @@ switch (TARGET) {
config = merge( config = merge(
common, common,
{ {
mode: 'development',
devtool: 'eval-source-map', devtool: 'eval-source-map',
}, },
parts.setupSass(PATHS.style), parts.setupSass(PATHS.style),

View File

@ -1,5 +1,6 @@
const webpack = require('webpack'); const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
exports.setupSass = paths => ({ exports.setupSass = paths => ({
@ -19,48 +20,34 @@ exports.extractCSS = paths => ({
rules: [ rules: [
{ {
test: /\.scss$/, test: /\.scss$/,
use: ExtractTextPlugin.extract({ use: [
fallback: 'style-loader', MiniCssExtractPlugin.loader,
use: [ {
{ loader: 'css-loader',
loader: 'css-loader', },
options: { {
minimize: true, loader: 'postcss-loader',
}, options: {
}, postcssOptions: {
{ plugins: [
loader: 'postcss-loader',
options: {
plugins: () => [
autoprefixer({ autoprefixer({
browsers: [ browsers: ['last 2 versions', '>1%'],
'Chrome >= 46',
'Firefox ESR',
'Edge >= 12',
'Explorer >= 9',
'iOS >= 8',
'Safari >= 8',
'Android >= 4',
],
cascade: false, cascade: false,
}), }),
], ],
}, },
}, },
{ },
loader: 'sass-loader', {
options: { loader: 'sass-loader',
outputStyle: 'expanded', },
}, ],
},
],
}),
include: paths, include: paths,
}, },
], ],
}, },
plugins: [ plugins: [
new ExtractTextPlugin({ new MiniCssExtractPlugin({
filename: '[name].css', filename: '[name].css',
}), }),
], ],
@ -68,33 +55,25 @@ exports.extractCSS = paths => ({
exports.devServer = options => ({ exports.devServer = options => ({
devServer: { devServer: {
contentBase: __dirname, static:{
directory: __dirname,
},
historyApiFallback: true, historyApiFallback: true,
hot: false, hot: false,
inline: true,
stats: 'errors-only',
host: options.host, host: options.host,
port: options.port, port: options.port,
overlay: {
warnings: true,
errors: true,
},
}, },
}); });
exports.minify = () => ({ exports.minify = () => ({
plugins: [ optimization: {
new webpack.optimize.UglifyJsPlugin({ minimize: true,
compress: { minimizer: [
warnings: false, new TerserPlugin({
drop_console: true, parallel: false,
screw_ie8: true, }),
}, ],
output: { },
comments: false,
},
}),
],
}); });
exports.setFreeVariable = (key, value) => { exports.setFreeVariable = (key, value) => {

File diff suppressed because it is too large Load Diff

View File

@ -2,8 +2,8 @@
Contributors: cssigniterteam, anastis, silencerius, tsiger Contributors: cssigniterteam, anastis, silencerius, tsiger
Tags: audio, podcast, audio player, html5 player, mp3 player, music player, music, radio stream, radio player, sound player, player, podcast player Tags: audio, podcast, audio player, html5 player, mp3 player, music player, music, radio stream, radio player, sound player, player, podcast player
Requires at least: 5.0 Requires at least: 5.0
Tested up to: 5.9 Tested up to: 6.0
Stable tag: 1.7.3 Stable tag: 1.9.0
License: GPLv2 or later License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html License URI: http://www.gnu.org/licenses/gpl-2.0.html
@ -84,6 +84,10 @@ A [Pro version](https://www.cssigniter.com/plugins/audioigniter) is also availab
* Customize the colors through the Customizer * Customize the colors through the Customizer
* Custom block for the Gutenberg Block Editor (With the ability to change colors per player) * Custom block for the Gutenberg Block Editor (With the ability to change colors per player)
* Widget & Shortcode available * Widget & Shortcode available
* Streaming service button links
* Sync download URL with audio URL automatically
* Standalone shortcode for single tracks (without the need to create a playlist)
* Remember last played track and position
**PREMIUM SUPPORT** **PREMIUM SUPPORT**
You can expect the same level of support for both the free and pro version of our plugin. Average response time: 24 hours. You can expect the same level of support for both the free and pro version of our plugin. Average response time: 24 hours.
@ -102,6 +106,21 @@ You can expect the same level of support for both the free and pro version of ou
== Changelog == == Changelog ==
= 1.9.0 =
* Fixed a JavaScript error in the admin when selecting an image without thumbnails.
* Show the playlist shortcode metabox on the side.
* Show the playlist shortcode on the admin playlists listing page.
* Action 'audioigniter_metabox_tracks_field_controls' now passes $location and $post_id parameters.
* Repeatable fields overhaul.
* Underlying support for new Pro functionality (Use track as download url, player buttons, single track shortcode).
= 1.8.0 =
* General performance updates.
* Upgrade of base libraries.
* Drop support for Internet Explorer.
* Removed unneeded nonce.
* The playlists' shortcode meta box now has a 'low' priority so that it's displayed last.
= 1.7.3 = = 1.7.3 =
* Top "Add Track" prepends a track, and bottom "Add Track" appends a track. * Top "Add Track" prepends a track, and bottom "Add Track" appends a track.