jamtrack player WIP
This commit is contained in:
parent
a3c511d2b0
commit
5b750cc3d9
|
|
@ -3299,6 +3299,18 @@
|
|||
"requires": {
|
||||
"css-mediaquery": "^0.1.2",
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
|
|
@ -3349,6 +3361,18 @@
|
|||
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fullcalendar/bootstrap": {
|
||||
|
|
@ -3782,6 +3806,16 @@
|
|||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
|
||||
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -8264,6 +8298,18 @@
|
|||
"requires": {
|
||||
"@babel/runtime": "^7.0.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"emoji-regex": {
|
||||
|
|
@ -8961,6 +9007,17 @@
|
|||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"resolve": {
|
||||
"version": "2.0.0-next.3",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
|
||||
|
|
@ -16453,13 +16510,13 @@
|
|||
}
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.7.2",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
|
||||
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.8.1"
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"prr": {
|
||||
|
|
@ -16675,6 +16732,18 @@
|
|||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-app-polyfill": {
|
||||
|
|
@ -16726,6 +16795,18 @@
|
|||
"requires": {
|
||||
"lodash": "^4.17.19",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-cookie": {
|
||||
|
|
@ -16746,6 +16827,18 @@
|
|||
"countup.js": "^1.9.3",
|
||||
"prop-types": "^15.7.2",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-datetime": {
|
||||
|
|
@ -16763,6 +16856,23 @@
|
|||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
|
||||
"integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -16976,6 +17086,18 @@
|
|||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"scheduler": "^0.19.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-dom-factories": {
|
||||
|
|
@ -16990,6 +17112,18 @@
|
|||
"requires": {
|
||||
"classnames": "^2.2.5",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-dropzone": {
|
||||
|
|
@ -17000,6 +17134,18 @@
|
|||
"attr-accept": "^2.0.0",
|
||||
"file-selector": "^0.1.12",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-error-overlay": {
|
||||
|
|
@ -17024,6 +17170,18 @@
|
|||
"@babel/runtime": "^7.2.0",
|
||||
"prop-types": "^15.6.0",
|
||||
"warning": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-flatpickr": {
|
||||
|
|
@ -17033,6 +17191,18 @@
|
|||
"requires": {
|
||||
"flatpickr": "^4.6.2",
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-hook-form": {
|
||||
|
|
@ -17046,6 +17216,18 @@
|
|||
"integrity": "sha512-HWN/Ftgi31W2OAFVNo5BO1n8C9D2W0L+sque20dKuwh51hQuMwK4bMAtdrYAmapfGGh+53zQ1NsrSacVS1Q/mw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-i18next": {
|
||||
|
|
@ -17074,6 +17256,18 @@
|
|||
"requires": {
|
||||
"prop-types": "^15.6.2",
|
||||
"react-modal": "^3.8.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-image-video-lightbox": {
|
||||
|
|
@ -17096,6 +17290,18 @@
|
|||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
|
|
@ -17107,6 +17313,18 @@
|
|||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17117,6 +17335,18 @@
|
|||
"integrity": "sha512-nL9uS7jEs/zu8sqwFE5MAPx6pPkNAriACQ2rGLlqmKr2sPGtN7TXTyDdQt4lbNXVx7Uzadb40x8qotIuru6Rhg==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
|
|
@ -17140,6 +17370,16 @@
|
|||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
|
||||
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -17190,6 +17430,16 @@
|
|||
"resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.0.tgz",
|
||||
"integrity": "sha512-GHqzxLYImx1iKN1jJURcuRoA/0ygCcNhfGw1IT8nPIMzarmKQ3Nc+JcG0gi8JXQzuh0C5ShE4npMIoqNin40hg=="
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"react-simple-code-editor": {
|
||||
"version": "0.10.0",
|
||||
"resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz",
|
||||
|
|
@ -17215,6 +17465,18 @@
|
|||
"prop-types": "^15.5.10",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-onclickoutside": {
|
||||
|
|
@ -17229,6 +17491,18 @@
|
|||
"requires": {
|
||||
"popper.js": "^1.14.1",
|
||||
"prop-types": "^15.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-quill": {
|
||||
|
|
@ -17242,6 +17516,18 @@
|
|||
"prop-types": "^15.5.10",
|
||||
"quill": "^1.3.7",
|
||||
"react-dom-factories": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-rating": {
|
||||
|
|
@ -17276,6 +17562,18 @@
|
|||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-is": "^16.13.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
|
|
@ -17293,6 +17591,18 @@
|
|||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-bootstrap": {
|
||||
|
|
@ -17301,6 +17611,18 @@
|
|||
"integrity": "sha512-/22eqxjn6Zv5fvY2rZHn57SKmjmJfK7xzJ6/G1OgxAjLtKVfWgV5sn41W2yiqzbtV5eE4/i4LeDLBGYTqx7jbA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.5.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
|
|
@ -17315,6 +17637,18 @@
|
|||
"react-router": "5.2.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
|
|
@ -17404,6 +17738,16 @@
|
|||
"xregexp": "^4.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.20.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
|
||||
|
|
@ -17424,6 +17768,18 @@
|
|||
"requires": {
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"prop-types": "^15.7.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-scrollbars-custom": {
|
||||
|
|
@ -17460,6 +17816,16 @@
|
|||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
|
|
@ -17490,6 +17856,26 @@
|
|||
"resize-observer-polyfill": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"react-slider": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.6.tgz",
|
||||
"integrity": "sha512-gJxG1HwmuMTJ+oWIRCmVWvgwotNCbByTwRkFZC6U4MBsHqJBmxwbYRJUmxy4Tke1ef8r9jfXjgkmY/uHOCEvbA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-timeago": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-timeago/-/react-timeago-6.2.1.tgz",
|
||||
|
|
@ -17515,6 +17901,16 @@
|
|||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
|
|
@ -17537,6 +17933,18 @@
|
|||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-typed": {
|
||||
|
|
@ -17546,6 +17954,18 @@
|
|||
"requires": {
|
||||
"prop-types": "^15.6.0",
|
||||
"typed.js": "^2.0.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"reactstrap": {
|
||||
|
|
@ -17560,6 +17980,16 @@
|
|||
"react-transition-group": "^2.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
},
|
||||
"react-popper": {
|
||||
"version": "1.3.11",
|
||||
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz",
|
||||
|
|
@ -19799,6 +20229,18 @@
|
|||
"is-function": "^1.0.1",
|
||||
"is-plain-object": "^2.0.1",
|
||||
"prop-types": "^15.5.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.13.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"throat": {
|
||||
|
|
|
|||
|
|
@ -77,6 +77,7 @@
|
|||
"react-select": "^3.1.0",
|
||||
"react-simple-code-editor": "^0.9.15",
|
||||
"react-slick": "^0.25.2",
|
||||
"react-slider": "^2.0.6",
|
||||
"react-timeago": "^6.2.1",
|
||||
"react-toastify": "^5.5.0",
|
||||
"react-typed": "^1.2.0",
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -124,3 +124,50 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//jamtrack slider
|
||||
.horizontal-slider {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
// height: 100vh;
|
||||
// margin: auto;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.jamtrack-thumb {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
background: #ffffff;
|
||||
border: 5px solid #3774ff;
|
||||
border-radius: 100%;
|
||||
display: block;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
|
||||
.jamtrack-thumb.active {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.jamtrack-track {
|
||||
position: relative;
|
||||
background: #ddd;
|
||||
}
|
||||
|
||||
.jamtrack-track.jamtrack-track-0 {
|
||||
background: #83a9ff;
|
||||
}
|
||||
|
||||
.horizontal-slider .jamtrack-track {
|
||||
top: 10px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.horizontal-slider .jamtrack-thumb {
|
||||
top: 7px;
|
||||
width: 10px;
|
||||
outline: none;
|
||||
height: 10px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const JKJamTrack = () => {
|
|||
<Card className="mx-auto mb-4">
|
||||
<FalconCardHeader title={t('jamtrack.player.title')} titleClass="font-weight-semi-bold" />
|
||||
<CardBody className="pt-3">
|
||||
<JKJamTrackPlayer jamTrack={jamTrack} />
|
||||
{jamTrack && <JKJamTrackPlayer jamTrack={jamTrack} />}
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mx-auto">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import Select from 'react-select';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Row, Col, Progress } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import { markMixdownActive } from '../../helpers/rest';
|
||||
import useBrowserMedia from '../../hooks/useBrowserMedia';
|
||||
import JKProgressSlider from './JKProgressSlider';
|
||||
|
||||
const JKJamTrackPlayer = ({ jamTrack }) => {
|
||||
const [mixes, setMixes] = useState([]);
|
||||
const [selectedMix, setSelectedMix] = useState(null);
|
||||
const { play, stop, pause, loading, loaded, playing, paused, loadError, playPosition } = useBrowserMedia(jamTrack);
|
||||
|
||||
const handleChange = selectedOption => {
|
||||
//console.log('selectedOption', selectedOption);
|
||||
setSelectedMix(selectedOption);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (jamTrack) {
|
||||
const mixes = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name, mix }));
|
||||
mixes.unshift({ value: 'original', label: 'Original', jamTrack });
|
||||
setMixes(mixes);
|
||||
}
|
||||
}, [jamTrack]);
|
||||
|
||||
const trackDuration = useMemo(() => {
|
||||
if (jamTrack && jamTrack.duration) {
|
||||
return (jamTrack.duration/60).toFixed(2);
|
||||
}
|
||||
}, [jamTrack]);
|
||||
|
||||
const trackCurrentTime = useMemo(() => {
|
||||
if (playPosition) {
|
||||
return (playPosition/60).toFixed(2);
|
||||
}else{
|
||||
return '0.00';
|
||||
}
|
||||
}, [playPosition]);
|
||||
|
||||
useEffect(() => {
|
||||
if(!selectedMix) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePlayOriginal = async () => {
|
||||
console.log('playing original');
|
||||
await markMixdownActive({id: selectedMix.jamTrack.id, mixdown_id: null});
|
||||
}
|
||||
|
||||
const handlePlayMix = async () => {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
await markMixdownActive({id: selectedMix.jamTrack.id, mixdown_id: selectedMix.value});
|
||||
}
|
||||
|
||||
|
||||
if(selectedMix.value === 'original') {
|
||||
console.log('playing original');
|
||||
handlePlayOriginal();
|
||||
} else {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
handlePlayMix();
|
||||
}
|
||||
}, [selectedMix]);
|
||||
|
||||
const playAudio = () => {
|
||||
console.log('playing');
|
||||
play();
|
||||
}
|
||||
|
||||
const stopAudio = () => {
|
||||
console.log('stopping');
|
||||
stop();
|
||||
}
|
||||
|
||||
const pauseAudio = () => {
|
||||
console.log('pausing');
|
||||
pause();
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select options={mixes} placeholder="Select Mix" onChange={handleChange} />
|
||||
{/* <Row className="mt-2 align-items-center">
|
||||
<Col className="col-md-2">
|
||||
<div className="d-flex">
|
||||
{ playing && <FontAwesomeIcon icon="pause-circle" size="2x" onClick={pauseAudio} /> }
|
||||
{ !playing && <FontAwesomeIcon icon="play-circle" size="2x" onClick={playAudio} /> }
|
||||
<FontAwesomeIcon icon="stop-circle" size="2x" onClick={stopAudio} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col>
|
||||
<div className='d-flex'>
|
||||
<span>{trackCurrentTime}</span>
|
||||
<JKProgressSlider />
|
||||
<span>{trackDuration}</span>
|
||||
</div>
|
||||
|
||||
</Col>
|
||||
</Row> */}
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
JKJamTrackPlayer.propTypes = {
|
||||
jamTrack: PropTypes.object.isRequired,
|
||||
|
||||
};
|
||||
|
||||
export default JKJamTrackPlayer;
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import Select from 'react-select';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Row, Col, Progress } from 'reactstrap';
|
||||
import { Row, Col } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import { markMixdownActive } from '../../helpers/rest';
|
||||
import useBrowserMedia from '../../hooks/useBrowserMedia';
|
||||
import useJamTrackAudio from '../../hooks/useJamTrackAudio';
|
||||
|
||||
const JKJamTrackPlayer = ({ jamTrack }) => {
|
||||
const [mixes, setMixes] = useState([]);
|
||||
const [selectedMix, setSelectedMix] = useState(null);
|
||||
const { play, stop, pause, loading, loaded, playing, paused, loadError } = useBrowserMedia(jamTrack);
|
||||
const { audioUrls } = useJamTrackAudio(jamTrack);
|
||||
|
||||
const handleChange = selectedOption => {
|
||||
//console.log('selectedOption', selectedOption);
|
||||
setSelectedMix(selectedOption);
|
||||
};
|
||||
|
||||
|
|
@ -21,75 +20,57 @@ const JKJamTrackPlayer = ({ jamTrack }) => {
|
|||
const mixes = jamTrack.mixdowns.map(mix => ({ value: mix.id, label: mix.name, mix }));
|
||||
mixes.unshift({ value: 'original', label: 'Original', jamTrack });
|
||||
setMixes(mixes);
|
||||
|
||||
//set the default mix to the original
|
||||
setSelectedMix(mixes[0]);
|
||||
}
|
||||
}, [jamTrack]);
|
||||
|
||||
const activateMasterTrack = async () => {
|
||||
console.log('playing original');
|
||||
await markMixdownActive({ id: selectedMix.jamTrack.id, mixdown_id: null });
|
||||
};
|
||||
|
||||
const activateCustomMix = async () => {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
await markMixdownActive({ id: selectedMix.jamTrack.id, mixdown_id: selectedMix.value });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(!selectedMix) {
|
||||
if (!selectedMix) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePlayOriginal = async () => {
|
||||
console.log('playing original');
|
||||
await markMixdownActive({id: selectedMix.jamTrack.id, mixdown_id: null});
|
||||
}
|
||||
|
||||
const handlePlayMix = async () => {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
await markMixdownActive({id: selectedMix.jamTrack.id, mixdown_id: selectedMix.value});
|
||||
}
|
||||
|
||||
|
||||
if(selectedMix.value === 'original') {
|
||||
console.log('playing original');
|
||||
handlePlayOriginal();
|
||||
|
||||
if (selectedMix.value === 'original') {
|
||||
console.log('activating master track');
|
||||
activateMasterTrack().then(() => {
|
||||
//TODO: commiunicate with the client back end. Following is copied from the Rails front end
|
||||
//SessionActions.mixdownActive({id:null})
|
||||
});
|
||||
} else {
|
||||
console.log('playing mix', selectedMix.value);
|
||||
handlePlayMix();
|
||||
console.log('activating custom mix:', selectedMix.value);
|
||||
activateCustomMix().then(() => {
|
||||
//TODO: commiunicate with the client back end. Following is copied from the Rails front end
|
||||
//context.jamClient.JamTrackStopPlay();
|
||||
//SessionActions.mixdownActive(mixdown)
|
||||
});
|
||||
}
|
||||
}, [selectedMix]);
|
||||
|
||||
const playAudio = () => {
|
||||
console.log('playing');
|
||||
play();
|
||||
}
|
||||
|
||||
const stopAudio = () => {
|
||||
console.log('stopping');
|
||||
stop();
|
||||
}
|
||||
|
||||
const pauseAudio = () => {
|
||||
console.log('pausing');
|
||||
pause();
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select options={mixes} placeholder="Select Mix" onChange={handleChange} />
|
||||
<Row className="mt-2 align-items-center">
|
||||
<Col className="col-md-2">
|
||||
<div className="d-flex">
|
||||
{ playing && <FontAwesomeIcon icon="pause-circle" size="2x" onClick={pauseAudio} /> }
|
||||
{ !playing && <FontAwesomeIcon icon="play-circle" size="2x" onClick={playAudio} /> }
|
||||
<FontAwesomeIcon icon="stop-circle" size="2x" onClick={stopAudio} />
|
||||
</div>
|
||||
</Col>
|
||||
<Select options={mixes} placeholder="Select Mix" onChange={handleChange} value={selectedMix} />
|
||||
<Row className='mt-2'>
|
||||
<Col>
|
||||
<Row className="mt-3">
|
||||
<Col>
|
||||
<Progress color="secondary" value={0} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span>0:00</span>
|
||||
<span>3:00</span>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
{audioUrls.length > 0 && (
|
||||
<figure>
|
||||
<audio controls style={{ width: '100%'}}>
|
||||
{audioUrls.map((url, index) => (
|
||||
<source key={index} src={url} type={`audio/${url.split('.').pop()}`} />
|
||||
))}
|
||||
</audio>
|
||||
</figure>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
|
|
@ -97,8 +78,7 @@ const JKJamTrackPlayer = ({ jamTrack }) => {
|
|||
};
|
||||
|
||||
JKJamTrackPlayer.propTypes = {
|
||||
jamTrack: PropTypes.object.isRequired,
|
||||
|
||||
jamTrack: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default JKJamTrackPlayer;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import ReactSlider from "react-slider";
|
||||
|
||||
const JKProgressSlider = () => {
|
||||
return (
|
||||
<ReactSlider
|
||||
className="horizontal-slider"
|
||||
thumbClassName="jamtrack-thumb"
|
||||
trackClassName="jamtrack-track"
|
||||
onSliderClick={(value) => console.log(value)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default JKProgressSlider
|
||||
|
|
@ -9,6 +9,7 @@ const useBrowserMedia = (jamTrack) => {
|
|||
const [playing, setPlaying] = useState(false);
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [loadError, setLoadError] = useState(false);
|
||||
const [playPosition, setPlayPosition] = useState(0);
|
||||
//const [error, setError] = useState(null);
|
||||
const preLoad = true;
|
||||
|
||||
|
|
@ -36,6 +37,22 @@ const useBrowserMedia = (jamTrack) => {
|
|||
|
||||
}, [jamTrack]);
|
||||
|
||||
useEffect(() => {
|
||||
if (playing) {
|
||||
const interval = setInterval(() => {
|
||||
if (audio) {
|
||||
const position = audio.seek();
|
||||
if(position === audio) {
|
||||
setPlayPosition(0);
|
||||
}else{
|
||||
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
return () => clearInterval(interval);
|
||||
}
|
||||
}, [playing]);
|
||||
|
||||
const loadMedia = (urls) => {
|
||||
if (audio) {
|
||||
audio.unload();
|
||||
|
|
@ -107,7 +124,7 @@ const useBrowserMedia = (jamTrack) => {
|
|||
}
|
||||
}
|
||||
|
||||
return { play, stop, pause, loading, loaded, playing, paused, loadError};
|
||||
return { play, stop, pause, loading, loaded, playing, paused, loadError, playPosition };
|
||||
};
|
||||
|
||||
export default useBrowserMedia;
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
|
||||
const useJamTrackAudio = (jamTrack) => {
|
||||
const [audioUrls, setAudioUrls] = useState([]);
|
||||
|
||||
const loadMedia = () => {
|
||||
const activeMixdown = jamTrack.mixdowns.find(mixdown => mixdown.id === jamTrack.last_mixdown_id)
|
||||
const activeStem = jamTrack.tracks.find(stem => stem.id === jamTrack.last_stem_id);
|
||||
|
||||
if ( activeStem ) {
|
||||
} else if ( activeMixdown ) {
|
||||
|
||||
} else if (jamTrack) {
|
||||
const masterTrack = jamTrack.tracks.find(track => track.track_type === 'Master');
|
||||
if (masterTrack) {
|
||||
setAudioUrls([masterTrack.preview_mp3_url]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!jamTrack) {
|
||||
return;
|
||||
}
|
||||
loadMedia();
|
||||
|
||||
}, [jamTrack]);
|
||||
|
||||
return { audioUrls };
|
||||
};
|
||||
|
||||
export default useJamTrackAudio;
|
||||
|
|
@ -308,21 +308,25 @@
|
|||
return;
|
||||
}
|
||||
if (options.mediaActions) {
|
||||
console.log("CASE 0", playbackMonitorMode)
|
||||
options.mediaActions.positionUpdate(playbackMonitorMode)
|
||||
}
|
||||
else {
|
||||
if (playbackMonitorMode == PLAYBACK_MONITOR_MODE.JAMTRACK) {
|
||||
console.log("CASE 1")
|
||||
var positionMs = context.jamClient.SessionCurrrentJamTrackPlayPosMs();
|
||||
var duration = context.jamClient.SessionGetJamTracksPlayDurationMs();
|
||||
var durationMs = duration.media_len;
|
||||
var isPlaying = context.jamClient.isSessionTrackPlaying();
|
||||
}
|
||||
else if(playbackMonitorMode == PLAYBACK_MONITOR_MODE.BROWSER_MEDIA) {
|
||||
console.log("CASE 2")
|
||||
var positionMs = BrowserMediaStore.onGetPlayPosition() || 0
|
||||
var durationMs = BrowserMediaStore.onGetPlayDuration() || 0;
|
||||
var isPlaying = BrowserMediaStore.playing;
|
||||
}
|
||||
else {
|
||||
console.log("CASE 3")
|
||||
var positionMs = context.jamClient.SessionCurrrentPlayPosMs();
|
||||
var durationMs = context.jamClient.SessionGetTracksPlayDurationMs();
|
||||
var isPlaying = context.jamClient.isSessionTrackPlaying();
|
||||
|
|
|
|||
Loading…
Reference in New Issue