Home Explore Help
Sign In
bachir
/
performance-art.fr
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

testing https://github.com/OpenA/soundcloud-pure-player

bach 1 year ago
parent
378985b8db
commit
b9e038615c
31 changed files with 3544 additions and 12 deletions
Split View Show Diff Stats
  1. 1 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/.gitignore
  2. 79 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/README.md
  3. 13 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/artwork-qm.svg
  4. 10 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/gradient-glass.svg
  5. 6 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/info-modern.svg
  6. 6 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/pause-modern.svg
  7. 6 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/play-modern.svg
  8. 256 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/sc-player-modern.css
  9. 163 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/colors-blue.css
  10. 166 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/colors-green.css
  11. 180 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/colors-orange.css
  12. 29 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/img/pause-standart.svg
  13. 18 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/img/play-standart.svg
  14. 193 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/structure-horizontal.css
  15. 210 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/structure-super.css
  16. 190 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/structure-vertical.css
  17. 9 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/sc-player-modern.html
  18. 69 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/sc-player-standard.html
  19. 156 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-blue.css
  20. 159 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-green.css
  21. 193 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-horizontal.css
  22. 26 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-modern.css
  23. 173 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-orange.css
  24. 59 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-standard.css
  25. 210 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-super.css
  26. 190 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-vertical.css
  27. BIN
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/js/player_mp3_js.swf
  28. 751 0
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/js/sc-player.js
  29. 5 3
      sites/all/themes/gui/perfarttimeline/js/libs/soundcloudcustomplayer/js/pa-sc-player.js
  30. 12 6
      sites/all/themes/gui/perfarttimeline/js/script.js
  31. 6 3
      sites/all/themes/gui/perfarttimeline/perfarttimeline.info

+ 1 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/.gitignore
View File 

@@ -0,0 +1 @@
 
+.DS_Store

+ 79 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/README.md
View File 

@@ -0,0 +1,79 @@
 
+# SoundCloud Pure Player
 
+The project to rewrite [SoundCloud jQuery Player Plugin](https://github.com/soundcloud/soundcloud-custom-player) (© Matas Petrikas, MIT) on a pure js code.
 
+
 
+Using example (add players automatically):
 
+```html
 
+<head>
 
+   ...
 
+   <link rel="stylesheet" href="/css/sc-player-standard/structure-horizontal.css" type="text/css">
 
+   <link rel="stylesheet" href="/css/sc-player-standard/colors-orange.css" type="text/css">
 
+   <script type="text/javascript" src="/js/sc-player.js"></script>
 
+</head>
 
+<body>
 
+   ...
 
+   <!-- for each single link -->
 
+   <a class="sc-player" href="https://soundcloud.com/mau5trap/deadmau5-feat-chris-james-the">The Veldt</a>
 
+   <!-- or creating a Group -->
 
+   <div class="sc-player">
 
+      <a href="https://soundcloud.com/kike-digital/lost-in-las-vegas-two-steps">Lost In Las Vegas</a>
 
+      <a href="https://soundcloud.com/will_rp/revelation">Revelation</a>
 
+      <a href="https://soundcloud.com/overwerk/daybreak">Daybreak</a>
 
+   </div>
 
+   ...
 
+</body>
 
+```
 
+
 
+Manually adding:
 
+```javascript
 
+var links = document.querySelectorAll('a[href^="https://soundcloud.com/"]');
 
+
 
+/* add players for each link */
 
+for ( var i = 0; i < links.length; i++ ) {
 
+    links[i].parentNode.replaceChild(
 
+        SCPurePlayer.create(links[i]), links[i]
 
+    );
 
+}
 
+
 
+/* or creating a Group */
 
+links[0].parentNode.insertBefore(
 
+    SCPurePlayer.createGroup(links), links[0]
 
+);
 
+links.forEach(function(lnk) {
 
+    lnk.remove();
 
+});
 
+```
 
+
 
+Settings:
 
+```javascript
 
+var SC = {
 
+   'API': new SoundCloudAPI,
 
+   'Global': false,   // {true: all players share common global params (volume), false: each player uses his own params (volume, timeline) }
 
+   'Volume': 0.8,     // default volume slider position (0.8 = 80%; 0.425 = 42.5%; 1 = 100%; 0.07 = 7%; etc.)
 
+  /* ... */
 
+}
 
+```
 
+
 
+Event listeners:
 
+```javascript
 
+var link = document.querySelector('a[href^="https://soundcloud.com/"]'),
 
+  player = SCPurePlayer.create(link); //-> return custom player element
 
+  
+  // possible media event type: ['play', 'pause', 'ended', 'timeupdate', 'volumechange', 'seeking', 'seeked', 'error']
 
+  player.addEventListener('play', function(event) {
 
+    /*
 
+      the event argument[0] is a CustomEvent object https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent
 
+      who includes 'detail' property with two custom keys:
 
+        device: { just audio element backend },
 
+        track: { current track info object }
 
+     */
 
+  }, false);
 
+
 
+link.parentNode.replaceChild(
 
+    player, link
 
+);
 
+```
 
+
 
+## Browser compatible
 
+Should work on IE9+ / Opera 12.18+
 
+
 
+For the browsers with no support audio/mpeg or html5 audio, player uses small and fast [Flash MP3 Player with JS API](http://flash-mp3-player.net/players/js/) (© Neolao Production, MIT)

File diff suppressed because it is too large
+ 13 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/artwork-qm.svg


+ 10 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/gradient-glass.svg
View File 

@@ -0,0 +1,10 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<svg xmlns="http://www.w3.org/2000/svg">
 
+	<defs>
 
+		<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
 
+			<stop offset="50%" stop-color="rgba(255, 255, 255, 0.15)" />
 
+			<stop offset="50%" stop-color="rgba(255, 255, 255, 0)" />
 
+		</linearGradient>
 
+	</defs>
 
+	<rect width="100%" height="100%" style="fill:url(#grad);" />
 
+</svg>

File diff suppressed because it is too large
+ 6 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/info-modern.svg


+ 6 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/pause-modern.svg
View File 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<svg width="22px" height="26px" viewBox="0 0 22 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 
+	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 
+		<path d="M1,1 L1,25 L8,25 L8,1 L1,1 L1,1 Z M14,1 L14,25 L21,25 L21,1 L14,1 L14,1 Z" id="Stop" stroke="#DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#DDD" sketch:type="MSShapeGroup"></path>
 
+	</g>
 
+</svg>

+ 6 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/img/play-modern.svg
View File 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 
+	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 
+		<path d="M14.0745834,2.9480787 L25.141492,20.994029 L3.00767503,20.994029 L14.0745834,2.9480787 L14.0745834,2.9480787 Z" id="Play" stroke="#DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="#DDD" sketch:type="MSShapeGroup" transform="translate(14.007675, 11.948079) rotate(90.000000) translate(-14.007675, -11.948079) "></path>
 
+	</g>
 
+</svg>

+ 256 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-modern/sc-player-modern.css
View File 

@@ -0,0 +1,256 @@
 
+.sc-player {
 
+	width: 200px;
 
+	height: 200px;
 
+	position: relative;
 
+	margin: 5px;
 
+	font: .6em Arial,sans-serif;
 
+	background-color: #eee;
 
+	color: #ddd;
 
+	line-height: 1.6em;
 
+	text-shadow: none;
 
+	display: inline-block;
 
+}
 
+.sc-player a {
 
+	text-decoration: none;
 
+}
 
+.sc-player ol, .sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+}
 
+
 
+/*******************************/
 
+/*********** Artwork ***********/
 
+/*******************************/
 
+.sc-artwork-list {
 
+	width: 100%;
 
+	height: 100%;
 
+	background: url('img/artwork-qm.svg') no-repeat center;
 
+	background-size: 100%;
 
+	list-style-type: none;
 
+	position: relative;
 
+	box-sizing: border-box;
 
+	-moz-box-sizing: border-box;
 
+	box-shadow: rgba(0, 0, 0, .35) 0 1px 5px;
 
+	float: left;
 
+	margin: 0 10px 30px 0;
 
+}
 
+.sc-artwork-list::after {
 
+	position: absolute;
 
+	top: 0; left: 0; right: 0; bottom: -1px;
 
+	content: " ";
 
+	background: url('img/gradient-glass.svg');
 
+	background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
 
+	background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
 
+	background: -o-linear-gradient(-45deg, rgba(255, 255, 255, .15) 50%, transparent 50%);
 
+	box-shadow: rgba(255, 255, 255, .1) 0 1px 0 inset;
 
+}
 
+.sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+.sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+.sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+/*******************************/
 
+/********** Controls ***********/
 
+/*******************************/
 
+.sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	margin-left: -25px;
 
+	margin-top: -25px;
 
+	top: 50%;
 
+	left: 50%;
 
+	border: 2px solid #ddd;
 
+	border-radius: 100%;
 
+	background-color: #333;
 
+	opacity: .8;
 
+}
 
+.sc-controls:hover{
 
+	background-color: #333;
 
+	opacity: .9;
 
+}
 
+.sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	color: transparent;
 
+	cursor: pointer;
 
+}
 
+.sc-play {
 
+	background: url('img/play-modern.svg') no-repeat center;
 
+}
 
+.sc-pause {
 
+	background: url('img/pause-modern.svg') no-repeat center;
 
+}
 
+
 
+/*******************************/
 
+/*********** Scrubber **********/
 
+/*******************************/
 
+.sc-scrubber {
 
+	position: absolute;
 
+	bottom: 0px;
 
+	height: 10px;
 
+	width: 200px;
 
+	border-radius: 8px;
 
+	visibility: hidden;
 
+}
 
+.sc-time-span {
 
+	position: relative;
 
+}
 
+.sc-buffer, .sc-played {
 
+	height: 9px;
 
+	position: absolute;
 
+	top: 0;
 
+}
 
+.sc-played {
 
+	background-color: rgba(0,0,0,.5);
 
+	border: 1px groove #ddd;
 
+	opacity: .7;
 
+}
 
+.sc-time-indicators {
 
+	position: absolute;
 
+	right: 5px;
 
+	top: 5px;
 
+	background-color: rgba(0,0,0,.4);
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	visibility: hidden;
 
+}
 
+.sc-waveform-container {
 
+	height: 10px;
 
+	width: 200px;
 
+	position: absolute;
 
+}
 
+.sc-player.played .sc-scrubber, .sc-player.paused .sc-scrubber, .sc-player.played .sc-time-indicators, .sc-player.paused .sc-time-indicators {
 
+	visibility: visible;
 
+}
 
+
 
+/*******************************/
 
+/********** Trackslist *********/
 
+/*******************************/
 
+.sc-trackslist {
 
+	position: absolute;
 
+	width: 100%;
 
+	max-height: 30%;
 
+	bottom: 0;
 
+	overflow: auto;
 
+	background-color: rgba(0, 0, 0, .5);
 
+	opacity: 0;
 
+}
 
+.sc-trackslist li {
 
+	position: relative;
 
+	cursor: pointer;
 
+	margin: 1px 5px;
 
+	padding: 3px 30px 3px 5px;
 
+}
 
+.sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+.sc-trackslist li:hover {
 
+	background-color: rgba(99, 99, 99, .9);
 
+}
 
+.sc-trackslist li.active {
 
+	background-color: rgba(77, 77, 77, .7);
 
+}
 
+.sc-trackslist li.active a, .sc-trackslist li a {
 
+	color: #ddd;
 
+}
 
+.sc-trackslist:hover, .sc-trackslist:focus {
 
+	opacity: 1;
 
+	z-index: 1;
 
+}
 
+
 
+/*******************************/
 
+/************ Info *************/
 
+/*******************************/
 
+.sc-info {
 
+	position: absolute;
 
+	top: 0px;
 
+	width: 190px;
 
+	height: 190px;
 
+	z-index: 1;
 
+	padding: 5px;
 
+	background-color: rgba(0, 0, 0, .9);
 
+	overflow: auto;
 
+}
 
+.sc-info-toggle {
 
+	position: absolute;
 
+	top: 9px;
 
+	left: 9px;
 
+	width: 17px;
 
+	height: 17px;
 
+	color: transparent;
 
+	cursor: pointer;
 
+}
 
+.sc-info-toggle:hover, .sc-player:focus .sc-info-toggle {
 
+	background: url('img/info-modern.svg') no-repeat center;
 
+	color: transparent;
 
+}
 
+.sc-info-close {
 
+	position: absolute;
 
+	top: 5px;
 
+	right: 5px;
 
+	padding: 1px 4px;
 
+	color: gray;
 
+	cursor: pointer;
 
+}
 
+.sc-info-close:hover {
 
+	color: white;
 
+}
 
+.sc-info a {
 
+	color: #95bcce;
 
+}
 
+.sc-info a:hover {
 
+	color: #5e7681;
 
+}
 
+.sc-info p a {
 
+	text-decoration: underline;
 
+}
 
+.sc-info, .sc-info-toggle.active {
 
+	visibility: hidden;
 
+}
 
+.sc-info.active {
 
+	visibility: visible;
 
+}
 
+
 
+/*******************************/
 
+/************ Volume ***********/
 
+/*******************************/
 
+.sc-volume-slider {
 
+	top: -25px;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+}
 
+.sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+	background-color: #666;
 
+	border-right: 1px solid #f6a400;
 
+}
 
+
 
+/*******************************/
 
+.sc-volume-slider,
 
+.sc-player .hidden,
 
+.sc-waveform-container img,
 
+.sc-no-artwork {
 
+	display: none;
 
+}

+ 163 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/colors-blue.css
View File 

@@ -0,0 +1,163 @@
 
+/* ----------< Standart blue color >---------------- */
 
+
 
+.sc-player {
 
+	font: .7em Arial, sans-serif;
 
+	background-color: #eee;
 
+	background:      linear-gradient( 165deg, black, #eee 0%, #fff );
 
+	background:   -o-linear-gradient( 165deg, black, #eee 0%, #fff );
 
+	background: -moz-linear-gradient( 165deg, black, #eee 0%, #fff );
 
+	background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff));
 
+	color: #333;
 
+	line-height: 1.6em;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.sc-player a {
 
+	text-decoration: none;
 
+	color: #2955ac;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.sc-artwork-list {
 
+	background: #eee;
 
+	background:      linear-gradient( left bottom, #eee, #333 );
 
+	background:   -o-linear-gradient( left bottom, #eee, #333 );
 
+	background: -moz-linear-gradient( left bottom, #eee, #333 );
 
+	background: -webkit-gradient(linear, left bottom, right top, from(#eee), to(#333));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.sc-scrubber {
 
+	background-color: #e5e5e5;
 
+	border-radius: 8px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.sc-time-span {
 
+	background-color: #666;
 
+}
 
+
 
+.sc-buffer,
 
+.sc-played {
 
+	background-color: #999;
 
+	position: absolute;
 
+}
 
+
 
+.sc-played {
 
+	background-color: #039;
 
+	background:      linear-gradient( top, black, #039, #5d95d2 90% );
 
+	background:   -o-linear-gradient( top, black, #039, #5d95d2 90% );
 
+	background: -moz-linear-gradient( top, black, #039, #5d95d2 90% );
 
+	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #039), to(#5d95d2));
 
+}
 
+
 
+.sc-waveform-container {
 
+	width: 100%;
 
+	position: absolute;
 
+}
 
+
 
+/* Controls */
 
+
 
+.sc-controls {
 
+	border-radius: 100%;
 
+	border: 2px solid white;
 
+	background-color: #039;
 
+	background:      linear-gradient( 135deg, #a1b8e4, #039 70% );
 
+	background:   -o-linear-gradient( 135deg, #a1b8e4, #039 70% );
 
+	background: -moz-linear-gradient( 135deg, #a1b8e4, #039 70% );
 
+	background: -webkit-gradient(linear, left top, 30% 90%, from(#a1b8e4), color-stop(70%, #039), to(#039));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.sc-controls:hover {
 
+	background:      linear-gradient( 45deg, #a1b8e4, #039 70% );
 
+	background:   -o-linear-gradient( 45deg, #a1b8e4, #039 70% );
 
+	background: -moz-linear-gradient( 45deg, #a1b8e4, #039 70% );
 
+	background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a1b8e4), color-stop(70%, #039), to(#039));
 
+}
 
+
 
+.sc-controls > * {
 
+	color: transparent;
 
+}
 
+
 
+.sc-play {
 
+	background: url('img/play-standart.svg') no-repeat center center / 30%;
 
+}
 
+.sc-pause {
 
+	background: url('img/pause-standart.svg') no-repeat center center / 30%;
 
+}
 
+
 
+/* Track list */
 
+
 
+.sc-trackslist li.active,
 
+.sc-trackslist li:hover {
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.sc-trackslist li.active a {
 
+	color: #fff;
 
+}
 
+
 
+.sc-trackslist li.active {
 
+	background-color: #2955ac;
 
+	color: #ddd;
 
+}
 
+
 
+.sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.sc-info.active {
 
+	background: #fff;
 
+	opacity: .9;
 
+}
 
+
 
+.sc-info p a {
 
+	text-decoration: underline;
 
+}
 
+
 
+.sc-info a:hover {
 
+	color: #039;
 
+}
 
+
 
+.sc-info-toggle,
 
+.sc-time-indicators,
 
+.sc-info-close {
 
+	background: #fff;
 
+	color: #2955ac;
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.sc-info-toggle:hover,
 
+.sc-info-close:hover {
 
+	background: #2955ac;
 
+	color: #eee;
 
+}
 
+
 
+.sc-info-close {
 
+	padding: 2px 4px;
 
+	font-weight: bold;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.sc-volume-slider {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.sc-volume-slider .sc-volume-status {
 
+	background-color: #666;
 
+	border-right: 1px solid #039;
 
+}

+ 166 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/colors-green.css
View File 

@@ -0,0 +1,166 @@
 
+/* ----------< Standart color green >---------------- */
 
+
 
+.sc-player {
 
+	font: .7em Arial, sans-serif;
 
+	background-color: #333;
 
+	color: #fff;
 
+	line-height: 1.6em;
 
+	box-shadow: 1px 1px 4px #333;
 
+}
 
+
 
+.sc-player a {
 
+	text-decoration: none;
 
+	color: #fff;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.sc-artwork-list {
 
+	background: #eee;
 
+	background:      linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background:   -o-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -webkit-gradient(linear, left bottom, right top, from(#eee), color-stop(50%, #888), to(#333));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.sc-scrubber {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+}
 
+
 
+.sc-time-span {
 
+	background-color: #666;
 
+}
 
+
 
+.sc-waveform-container {
 
+	width: 100%;
 
+	position: absolute;
 
+}
 
+
 
+.sc-buffer,
 
+.sc-played {
 
+	background-color: #333;
 
+	position: absolute;
 
+}
 
+
 
+.sc-played {
 
+	background: #22B573;
 
+	background:      linear-gradient( top, black, #22B573 0, #7decba 90% );
 
+	background:   -o-linear-gradient( top, black, #22B573 0, #7decba 90% );
 
+	background: -moz-linear-gradient( top, black, #22B573 0, #7decba 90% );
 
+	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));
 
+}
 
+
 
+/* Controls */
 
+
 
+.sc-controls {
 
+	border-radius: 100%;
 
+	border: 2px solid white;
 
+	background: #22B573;
 
+	background:      linear-gradient( 135deg, #fff, #22B573 50% );
 
+	background:   -o-linear-gradient( 135deg, #fff, #22B573 50% );
 
+	background: -moz-linear-gradient( 135deg, #fff, #22B573 50% );
 
+	background: -webkit-gradient(linear, left top, 30% 90%, from(#fff), color-stop(50%, #22B573), to(#22B573));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-controls > * {
 
+	color: transparent;
 
+}
 
+
 
+.sc-controls:hover {
 
+	background:      linear-gradient( 45deg, #a8e2ca, #22B573 70% );
 
+	background:   -o-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
 
+	background: -moz-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
 
+	background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a8e2ca), color-stop(70%, #22B573), to(#22B573));
 
+}
 
+
 
+.sc-time-indicators {
 
+	background: #22B573;
 
+	color: #fff;
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-play {
 
+	background: url('img/play-standart.svg') no-repeat center center / 30%;
 
+}
 
+.sc-pause {
 
+	background: url('img/pause-standart.svg') no-repeat center center / 30%;
 
+}
 
+
 
+/* Track list */
 
+
 
+.sc-trackslist li {
 
+	background: #333;
 
+	color: #b8e9d3;
 
+	border-radius: 4px;
 
+	transition: background 0.3s ease-in;
 
+}
 
+
 
+.sc-trackslist li:hover {
 
+	background: #22B573;
 
+}
 
+
 
+.sc-trackslist li.active {
 
+	background: #22B573;
 
+	border-radius: 4px;
 
+}
 
+
 
+.sc-trackslist li.active a {
 
+	color: #fff;
 
+}
 
+
 
+/* Track info */
 
+
 
+.sc-info.active,
 
+.sc-info-close:hover,
 
+.sc-info-toggle:hover {
 
+	background: #333;
 
+	color: #fff;
 
+}
 
+
 
+.sc-info.active {
 
+	opacity: .9;
 
+}
 
+
 
+.sc-info a {
 
+	color: #b1e8cc;
 
+}
 
+
 
+.sc-info a:hover {
 
+	color: #e1f7ee;
 
+}
 
+
 
+.sc-info-toggle {
 
+	background: #22B573;
 
+	color: #fff;
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-info-close {
 
+	background: #22B573;
 
+	color: #fff;
 
+	border-radius: 4px;
 
+	padding: 2px 4px;
 
+	font-weight: bold;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.sc-volume-slider {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-volume-slider .sc-volume-status {
 
+	background-color: #666;
 
+	border-right: 1px solid #22B573;
 
+}

+ 180 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/colors-orange.css
View File 

@@ -0,0 +1,180 @@
 
+/* ----------< Standart color orange >---------------- */
 
+
 
+.sc-player {
 
+	font: .7em Arial, sans-serif;
 
+	background-color: #eee;
 
+	background:      linear-gradient( top, black, #ccc 0%, #fff 70%);
 
+	background:   -o-linear-gradient( top, black, #ccc 0%, #fff 70%);
 
+	background: -moz-linear-gradient( top, black, #ccc 0%, #fff 70%);
 
+	background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff));
 
+	color: #333;
 
+	line-height: 1.6em;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-player a {
 
+	text-decoration: none;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.sc-artwork-list {
 
+	background-color: #eee;
 
+	background:      linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background:   -o-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee));
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.sc-scrubber {
 
+	background-color: #e5e5e5;
 
+	border-radius: 8px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-time-span {
 
+	background-color: #ddd;
 
+}
 
+
 
+.sc-buffer,
 
+.sc-played {
 
+	background-color: #adadad;
 
+	position: absolute;
 
+}
 
+
 
+.sc-played {
 
+	background-color: #e74c14;
 
+	background:      linear-gradient( top, black, #e74c14 0, #f6a400 90% );
 
+	background:   -o-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
 
+	background: -moz-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
 
+	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400));
 
+}
 
+
 
+.sc-waveform-container {
 
+	position: absolute;
 
+	width: 100%;
 
+}
 
+
 
+/* Controls */
 
+
 
+.sc-controls {
 
+	border-radius: 100%;
 
+	border: 2px solid white;
 
+	background-color: #f6a400;
 
+	background:      linear-gradient( 45deg, #e74c14, #f6a400 );
 
+	background:   -o-linear-gradient( 45deg, #e74c14, #f6a400 );
 
+	background: -moz-linear-gradient( 45deg, #e74c14, #f6a400 );
 
+	background: -webkit-gradient(linear, left bottom, top right, from(#e74c14), to(#f6a400));
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-controls:hover {
 
+	background:      linear-gradient( 225deg, #e74c14, #f6a400 );
 
+	background:   -o-linear-gradient( 225deg, #e74c14, #f6a400 );
 
+	background: -moz-linear-gradient( 225deg, #e74c14, #f6a400 );
 
+	background: -webkit-gradient(linear, top right, left bottom, from(#e74c14), to(#f6a400));
 
+}
 
+
 
+.sc-controls > * {
 
+	color: transparent;
 
+}
 
+
 
+.sc-play {
 
+	background: url('img/play-standart.svg') no-repeat center center / 30%;
 
+}
 
+.sc-pause {
 
+	background: url('img/pause-standart.svg') no-repeat center center / 30%;
 
+}
 
+
 
+/* Track list */
 
+
 
+.sc-trackslist li.active {
 
+	color: #fff;
 
+	background: #e74c14;
 
+}
 
+
 
+.sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+}
 
+
 
+.sc-trackslist li.active,
 
+.sc-trackslist li:hover {
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-trackslist li:hover {
 
+	background-color: #f6a400;
 
+}
 
+
 
+.sc-trackslist li.active a {
 
+	color: #fff;
 
+}
 
+
 
+.sc-trackslist li a {
 
+	color: #333;
 
+}
 
+
 
+/* Track info */
 
+
 
+.sc-info.active {
 
+	background: #fff;
 
+	opacity: .9;
 
+}
 
+
 
+.sc-info a {
 
+	color: #e74c14;
 
+}
 
+
 
+.sc-info p a {
 
+	text-decoration: underline;
 
+}
 
+
 
+.sc-info a:hover {
 
+	color: #f6a400;
 
+}
 
+
 
+.sc-info-toggle,
 
+.sc-time-indicators {
 
+	background: #f6a400;
 
+	color: #ab3104;
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+	padding: 4px;
 
+}
 
+.sc-info-close,
 
+.sc-info-close:hover {
 
+	padding: 2px 4px;
 
+	font-weight: bold;
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-info-close:hover {
 
+	background: #f6a400;
 
+	color: #ab3104;
 
+}
 
+
 
+.sc-info-toggle:hover,
 
+.sc-info-close {
 
+	background: #fff;
 
+	color: #e74c14;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.sc-volume-slider {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.sc-volume-slider .sc-volume-status {
 
+	background-color: #666;
 
+	border-right: 1px solid #f6a400;
 
+}

+ 29 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/img/pause-standart.svg
View File 

@@ -0,0 +1,29 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<svg width="136px" height="173px" viewBox="0 0 136 173" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 
+	<defs>
 
+		<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
 
+			<feOffset dx="15" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
 
+			<feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
 
+			<feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
 
+			<feMerge>
 
+				<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
 
+				<feMergeNode in="SourceGraphic"></feMergeNode>
 
+			</feMerge>
 
+		</filter>
 
+		<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
 
+			<feOffset dx="-15" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
 
+			<feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
 
+			<feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
 
+			<feMerge>
 
+				<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
 
+				<feMergeNode in="SourceGraphic"></feMergeNode>
 
+			</feMerge>
 
+		</filter>
 
+	</defs>
 
+	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 
+		<g id="Rectangle-1-+-Rectangle-2" sketch:type="MSLayerGroup" fill="#FFFFFF">
 
+			<rect id="Rectangle-1" filter="url(#filter-1)" sketch:type="MSShapeGroup" x="0" y="0" width="40" height="173"></rect>
 
+			<rect id="Rectangle-2" filter="url(#filter-2)" sketch:type="MSShapeGroup" x="96" y="0" width="40" height="173"></rect>
 
+		</g>
 
+	</g>
 
+</svg>

+ 18 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/img/play-standart.svg
View File 

@@ -0,0 +1,18 @@
 
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 
+<svg width="164px" height="222px" viewBox="0 0 164 222" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
 
+	<defs>
 
+		<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
 
+			<feMorphology radius="5" in="SourceAlpha" operator="dilate" result="shadowSpreadOuter1"></feMorphology>
 
+			<feOffset dx="-2" dy="1" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
 
+			<feGaussianBlur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
 
+			<feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.35 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
 
+			<feMerge>
 
+				<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
 
+				<feMergeNode in="SourceGraphic"></feMergeNode>
 
+			</feMerge>
 
+		</filter>
 
+	</defs>
 
+	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 
+		<path d="M54.9296875,109.011719 L8,4.62890625 L160.359375,109.011719 L8,216 L54.9296875,109.011719 Z" id="Triangle-1" fill="#FFFFFF" filter="url(#filter-1)" sketch:type="MSShapeGroup"></path>
 
+	</g>
 
+</svg>

+ 193 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/structure-horizontal.css
View File 

@@ -0,0 +1,193 @@
 
+/* ----------< Standart structure horizontal >---------------- */
 
+
 
+.sc-player {
 
+	width: 540px;
 
+	height: 270px;
 
+	position: relative;
 
+	margin: 5px;
 
+}
 
+
 
+.sc-player ol,
 
+.sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style-position: inside;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.sc-artwork-list {
 
+	width: 50%;
 
+	height: 100%;
 
+	list-style-type: none;
 
+	position: relative;
 
+}
 
+
 
+.sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+
 
+.sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+
 
+.sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.sc-no-artwork {
 
+	display: none;
 
+}
 
+
 
+/* Controls */
 
+
 
+.sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	margin-left: -25px;
 
+	margin-top: -25px;
 
+	top: 50%;
 
+	left: 25%;
 
+}
 
+
 
+.sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	cursor: pointer;
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.sc-scrubber {
 
+	position: absolute;
 
+	left: 10px;
 
+	bottom: 10px;
 
+	height: 40px;
 
+	width: 250px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+	display: block;
 
+}
 
+
 
+.sc-time-span {
 
+	height: 30px;
 
+	margin: 5px;
 
+	position: relative;
 
+}
 
+
 
+.sc-buffer,
 
+.sc-played {
 
+	position: absolute;
 
+	height: 30px;
 
+	top: 0;
 
+}
 
+
 
+.sc-time-span img {
 
+	height: 30px;
 
+	width: 100%;
 
+}
 
+
 
+.sc-time-indicators {
 
+	position: absolute;
 
+	right: 280px;
 
+	bottom: 10px;
 
+}
 
+
 
+.sc-player.played .sc-time-indicators,
 
+.sc-player.paused .sc-time-indicators {
 
+	bottom: 55px;
 
+}
 
+
 
+/* Track list */
 
+
 
+.sc-trackslist {
 
+	position: absolute;
 
+	width: 50%;
 
+	height: 260px;
 
+	top: 5px;
 
+	left: 50%;
 
+	overflow: auto;
 
+}
 
+
 
+.sc-trackslist li {
 
+	cursor: pointer;
 
+	margin: 1px 5px;
 
+	padding: 3px 30px 3px 5px;
 
+	position: relative;
 
+}
 
+
 
+.sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.sc-info {
 
+	position: absolute;
 
+	top: 0px;
 
+	width: 260px;
 
+	height: 260px;
 
+	padding: 5px;
 
+	z-index: 1;
 
+	overflow: auto;
 
+	opacity: 0.9;
 
+}
 
+
 
+.sc-info-toggle {
 
+	position: absolute;
 
+	top: 10px;
 
+	left: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.sc-info-close {
 
+	position: absolute;
 
+	top: 10px;
 
+	right: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.sc-info,
 
+.sc-info-toggle.active,
 
+.sc-player .sc-scrubber {
 
+	visibility: hidden;
 
+}
 
+
 
+.sc-info.active,
 
+.sc-player.played .sc-scrubber,
 
+.sc-player.paused .sc-scrubber {
 
+	visibility: visible;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.sc-volume-slider {
 
+	top: -25px;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: white;
 
+}
 
+
 
+.sc-volume-slider .sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+}
 
+
 
+/* --- */
 
+
 
+.sc-player .hidden {
 
+	display: none;
 
+}

+ 210 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/structure-super.css
View File 

@@ -0,0 +1,210 @@
 
+/* ----------< Standart structure super >---------------- */
 
+
 
+.sc-player {
 
+	width: 160px;
 
+	height: 160px;
 
+	position: relative;
 
+	margin: 5px;
 
+}
 
+
 
+.sc-player ol,
 
+.sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style-position: inside;
 
+}
 
+
 
+.sc-artwork-list {
 
+	width: 160px;
 
+	height: 160px;
 
+	list-style-type: none;
 
+	position: relative;
 
+}
 
+
 
+.sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+
 
+.sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+
 
+.sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.sc-no-artwork {
 
+	display: none;
 
+}
 
+
 
+/* Controls */
 
+
 
+.sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	top: 10px;
 
+	left: 180px
 
+}
 
+
 
+.sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	cursor: pointer;
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.sc-scrubber {
 
+	position: absolute;
 
+	top: 80px;
 
+	height: 70px;
 
+	width: 600px;
 
+	left: 180px;
 
+	display: block;
 
+}
 
+
 
+.sc-time-span {
 
+	height: 60px;
 
+	margin: 5px;
 
+	position: relative;
 
+}
 
+
 
+.sc-buffer, .sc-played {
 
+	height: 60px;
 
+	position: absolute;
 
+	top: 0;
 
+}
 
+
 
+.sc-time-span img {
 
+	height: 60px;
 
+	width: 100%;
 
+}
 
+
 
+.sc-time-indicators {
 
+	position: absolute;
 
+	left: 700px;
 
+}
 
+
 
+.sc-time-indicators {
 
+	top: 43px;
 
+}
 
+
 
+/* Track list */
 
+
 
+.sc-trackslist {
 
+	width: 780px;
 
+	min-height: 50%;
 
+	overflow: auto;
 
+}
 
+
 
+.sc-trackslist li {
 
+	cursor: pointer;
 
+	margin: 5px;
 
+	padding: 3px 30px 3px 5px;
 
+	position: relative;
 
+}
 
+
 
+.sc-track-duration {
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.sc-info {
 
+	position: absolute;
 
+	padding: 0 5px;
 
+	min-height: 100%;
 
+	width: 774px;
 
+	top: 0;
 
+	z-index: -1;
 
+}
 
+
 
+.sc-info.active {
 
+	overflow: auto;
 
+	z-index: 1;
 
+}
 
+
 
+.sc-info p {
 
+	position: relative;
 
+	text-align: center;
 
+	top: 50px;
 
+}
 
+
 
+.sc-info-toggle {
 
+	position: absolute;
 
+	top: 43px;
 
+	left: 670px;
 
+	cursor: pointer;
 
+}
 
+
 
+.sc-info-close {
 
+	position: absolute;
 
+	top: 10px;
 
+	right: 20px;
 
+	cursor: pointer;
 
+}
 
+
 
+.sc-info h3 {
 
+	position: absolute;
 
+	width: 420px;
 
+	left: 240px;
 
+	text-align: left;
 
+	top: 30px;
 
+}
 
+
 
+.sc-info h4 {
 
+	position: absolute;
 
+	width: 420px;
 
+	left: 240px;
 
+	opacity: 0.5;
 
+}
 
+
 
+.sc-download {
 
+	position: absolute;
 
+	top: 10px;
 
+	left: 20px;
 
+}
 
+
 
+.sc-info p,
 
+.sc-info .sc-info-close,
 
+.sc-info .sc-download {
 
+	visibility: hidden;
 
+}
 
+
 
+.sc-info.active p,
 
+.sc-info.active .sc-info-close,
 
+.sc-info.active .sc-download {
 
+	visibility: visible;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.sc-volume-slider {
 
+	top: -60px;
 
+	right: 0;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: white;
 
+}
 
+
 
+.sc-volume-slider .sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+}
 
+
 
+/* --- */
 
+
 
+.sc-player .hidden {
 
+	display: none;
 
+}

+ 190 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/css/sc-player-standard/structure-vertical.css
View File 

@@ -0,0 +1,190 @@
 
+/* ----------< Standart structure vertical >---------------- */
 
+
 
+.sc-player {
 
+	width: 270px;
 
+	height: 540px;
 
+	position: relative;
 
+	margin: 5px;
 
+}
 
+
 
+.sc-player ol,
 
+.sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style-position: inside;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.sc-artwork-list {
 
+	width: 100%;
 
+	height: 50%;
 
+	list-style-type: none;
 
+	position: relative;
 
+}
 
+
 
+.sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+
 
+.sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+
 
+.sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.sc-no-artwork {
 
+	display: none;
 
+}
 
+
 
+/* Controls */
 
+
 
+.sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	margin-left: -25px;
 
+	margin-top: -25px;
 
+	top: 25%;
 
+	left: 50%;
 
+}
 
+
 
+.sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	cursor: pointer;
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.sc-scrubber {
 
+	position: absolute;
 
+	bottom: 280px;
 
+	height: 40px;
 
+	width: 250px;
 
+	left: 10px;
 
+	display: block;
 
+}
 
+
 
+.sc-time-span {
 
+	height: 30px;
 
+	margin: 5px;
 
+	position: relative;
 
+}
 
+
 
+.sc-buffer,
 
+.sc-played {
 
+	height: 30px;
 
+	position: absolute;
 
+	top: 0;
 
+}
 
+
 
+.sc-time-span img {
 
+	height: 30px;
 
+	width: 100%;
 
+}
 
+
 
+.sc-time-indicators {
 
+	position: absolute;
 
+	right: 10px;
 
+	top: 235px;
 
+}
 
+
 
+.sc-player.played .sc-time-indicators,
 
+.sc-player.paused .sc-time-indicators {
 
+	top: 190px;
 
+}
 
+
 
+/* Track list */
 
+
 
+.sc-trackslist {
 
+	position: absolute;
 
+	width: 100%;
 
+	height: 50%;
 
+	top: 50%;
 
+	left: 0;
 
+	overflow: auto;
 
+}
 
+
 
+.sc-trackslist li {
 
+	cursor: pointer;
 
+	margin: 5px;
 
+	padding: 3px 30px 3px 5px;
 
+	position: relative;
 
+}
 
+
 
+.sc-track-duration {
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.sc-info {
 
+	position: absolute;
 
+	top: 0px;
 
+	width: 260px;
 
+	height: 260px;
 
+	padding: 5px;
 
+	z-index: 1;
 
+	overflow: auto;
 
+	opacity: 0.9;
 
+}
 
+
 
+.sc-info-toggle {
 
+	position: absolute;
 
+	top: 10px;
 
+	left: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.sc-info-close {
 
+	position: absolute;
 
+	top: 10px;
 
+	right: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.sc-info,
 
+.sc-info-toggle.active,
 
+.sc-player .sc-scrubber {
 
+	visibility: hidden;
 
+}
 
+
 
+.sc-info.active,
 
+.sc-player.played .sc-scrubber,
 
+.sc-player.paused .sc-scrubber {
 
+	visibility: visible;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.sc-volume-slider {
 
+	top: -25px;
 
+	left: 0px;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: white;
 
+}
 
+
 
+.sc-volume-slider .sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+}
 
+
 
+/* --- */
 
+
 
+.sc-player .hidden {
 
+	display: none;
 
+}

File diff suppressed because it is too large
+ 9 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/sc-player-modern.html


+ 69 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/sc-player-standard.html
View File 

@@ -0,0 +1,69 @@
 
+<!DOCTYPE html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title>SC player example: Standard Skin</title>
 
+		<link rel="stylesheet" href="styles/sc-player-standard.css" type="text/css">
 
+		<link rel="stylesheet" href="styles/sc-player-horizontal.css" type="text/css">
 
+		<link rel="stylesheet" href="styles/sc-player-vertical.css" type="text/css">
 
+		<link rel="stylesheet" href="styles/sc-player-super.css" type="text/css">
 
+		<link rel="stylesheet" href="styles/sc-player-green.css" type="text/css">
 
+		<link rel="stylesheet" href="styles/sc-player-blue.css" type="text/css">
 
+		<link rel="stylesheet" href="styles/sc-player-orange.css" type="text/css">
 
+		<script type="text/javascript" src="../js/sc-player.js"></script>
 
+		<script type="text/javascript">
 
+			window.onclick = function(e) {
 
+				if (e.target.id && e.target.id.slice(0, 5) === 'style' && e.target.className.indexOf('selected') === -1) {
 
+					var name       = e.target.id.split('_'), sel = ' selected',
 
+						classList  = e.target.className.split(' '),
 
+						prevSelect = e.target.parentNode.querySelector('.selected');
 
+					e.target.parentNode.nextElementSibling.className = name[1] +' '+ name[2];
 
+					
+					if (prevSelect) {
 
+						prevSelect.className = prevSelect.className.substring(0, prevSelect.className.length - sel.length);
 
+					}
 
+					e.target.className += sel;
 
+				}
 
+			}
 
+		</script>
 
+	</head>
 
+	<body>
 
+		<a href="sc-player-modern.html">Modern Player</a>
 
+		<h1>Standart Skin</h1>
 
+		<div class="post">
 
+			<h2>horizontal <span id="style_horizontal_green" class="option-green selected">green</span> <span id="style_horizontal_blue" class="option-blue">blue</span> <span id="style_horizontal_orange" class="option-orange">orange</span></h2>
 
+			<div class="horizontal green">
 
+				<a href="https://soundcloud.com/tunguska-ems" class="sc-player">Tunguska Electronic Music Society</a>
 
+			</div>
 
+			<h2>vertical <span id="style_vertical_green" class="option-green">green</span> <span id="style_vertical_blue" class="option-blue selected">blue</span> <span id="style_vertical_orange" class="option-orange">orange</span></h2>
 
+			<div class="vertical blue">
 
+				<a href="https://soundcloud.com/hitboxx" class="sc-player">The Nth °</a>
 
+			</div>
 
+		</div>
 
+		<div class="sidebar">
 
+			<h2>super <span id="style_super_green" class="option-green">green</span> <span id="style_super_blue" class="option-blue">blue</span> <span id="style_super_orange" class="option-orange selected">orange</span></h2>
 
+			<div class="super orange">
 
+				<div class="sc-player">
 
+					<a href="https://soundcloud.com/aethernaut/final-frontier">Final Frontier</a>
 
+					<a href="https://soundcloud.com/chibinoize/technicolor">Technicolor</a>
 
+					<a href="https://soundcloud.com/anzomusic/castlevania-bloody-tears-anzo">Castlevania - Bloody Tears (Anzo Cover)</a>
 
+					<a href="https://soundcloud.com/fuskasker/fusk-asker-bully-original-mix">Fusk Asker - Bully (Original Mix)</a>
 
+					<a href="https://soundcloud.com/ensnare-1/there-is-always-love">There Is Always Love</a>
 
+					<a href="https://soundcloud.com/dubmood/dubmood-chiptune">Dubmood - Chiptune</a>
 
+					<a href="https://soundcloud.com/protoflight/post">Post</a>
 
+					<a href="https://soundcloud.com/fantomenk/fantomenk-a-tiny-spaceships">A Tiny Spaceship's Final Mission</a>
 
+					<a href="https://soundcloud.com/aethernaut/shine-get">Shine Get</a>
 
+					<a href="https://soundcloud.com/tastyselection/demon-groove-saturate-teaser">Demon Groove - Saturate</a>
 
+					<a href="https://soundcloud.com/tastyselection/demon-groove-lenningrad-2034">Demon Groove - Lenningrad 2034</a>
 
+					<a href="https://soundcloud.com/bossfightswe/dr-wilys-castle-stage-1">Dr. Wily's Castle: Stage 1</a>
 
+					<a href="https://soundcloud.com/ensnare-1/yes-we-have-made-it-to-the">Yes, We Have Made it to the Dungeon Of Tropes</a>
 
+					<a href="https://soundcloud.com/shawndaley/in-brightest-day">In Brightest Day</a>
 
+					<a href="https://soundcloud.com/shawndaley/a-hero-stands-tall">A Hero Stands Tall</a>
 
+					<a href="https://soundcloud.com/myuu/lavender-town-pokemon-cover">Lavender Town (Pokémon Cover)</a>
 
+					<a href="https://soundcloud.com/sirrus-3/the-xx-intro-dream-city-remix">XX Intro Dream</a>
 
+				</div>
 
+			</div>
 
+		</div>
 
+		<div class="footer">2017</div>
 
+	</body>
 
+</html>

+ 156 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-blue.css
View File 

@@ -0,0 +1,156 @@
 
+/* ----------< .blue >---------------- */
 
+
 
+.blue .sc-player {
 
+	font: .7em Arial, sans-serif;
 
+	background-color: #eee;
 
+	background:      linear-gradient( 165deg, black, #eee 0%, #fff );
 
+	background:   -o-linear-gradient( 165deg, black, #eee 0%, #fff );
 
+	background: -moz-linear-gradient( 165deg, black, #eee 0%, #fff );
 
+	background: -webkit-gradient(linear, left top, left 50%, from(black), color-stop(0%, #eee), to(#fff));
 
+	color: #333;
 
+	line-height: 1.6em;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.blue .sc-player a {
 
+	text-decoration: none;
 
+	color: #2955ac;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.blue .sc-artwork-list {
 
+	background: #eee;
 
+	background:      linear-gradient( left bottom, #eee, #333 );
 
+	background:   -o-linear-gradient( left bottom, #eee, #333 );
 
+	background: -moz-linear-gradient( left bottom, #eee, #333 );
 
+	background: -webkit-gradient(linear, left bottom, right top, from(#eee), to(#333));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.blue .sc-scrubber {
 
+	background-color: #e5e5e5;
 
+	border-radius: 8px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.blue .sc-time-span {
 
+	background-color: #666;
 
+}
 
+
 
+.blue .sc-buffer,
 
+.blue .sc-played {
 
+	background-color: #999;
 
+	position: absolute;
 
+}
 
+
 
+.blue .sc-played {
 
+	background-color: #039;
 
+	background:      linear-gradient( top, black, #039, #5d95d2 90% );
 
+	background:   -o-linear-gradient( top, black, #039, #5d95d2 90% );
 
+	background: -moz-linear-gradient( top, black, #039, #5d95d2 90% );
 
+	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #039), to(#5d95d2));
 
+}
 
+
 
+.blue .sc-waveform-container {
 
+	width: 100%;
 
+	position: absolute;
 
+}
 
+
 
+/* Controls */
 
+
 
+.blue .sc-controls {
 
+	border-radius: 100%;
 
+	border: 2px solid white;
 
+	background-color: #039;
 
+	background:      linear-gradient( 135deg, #a1b8e4, #039 70% );
 
+	background:   -o-linear-gradient( 135deg, #a1b8e4, #039 70% );
 
+	background: -moz-linear-gradient( 135deg, #a1b8e4, #039 70% );
 
+	background: -webkit-gradient(linear, left top, 30% 90%, from(#a1b8e4), color-stop(70%, #039), to(#039));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.blue .sc-controls:hover {
 
+	background:      linear-gradient( 45deg, #a1b8e4, #039 70% );
 
+	background:   -o-linear-gradient( 45deg, #a1b8e4, #039 70% );
 
+	background: -moz-linear-gradient( 45deg, #a1b8e4, #039 70% );
 
+	background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a1b8e4), color-stop(70%, #039), to(#039));
 
+}
 
+
 
+.blue .sc-controls > * {
 
+	color: transparent;
 
+}
 
+
 
+/* Track list */
 
+
 
+.blue .sc-trackslist li.active,
 
+.blue .sc-trackslist li:hover {
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.blue .sc-trackslist li.active a {
 
+	color: #fff;
 
+}
 
+
 
+.blue .sc-trackslist li.active {
 
+	background-color: #2955ac;
 
+	color: #ddd;
 
+}
 
+
 
+.blue .sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.blue .sc-info.active {
 
+	background: #fff;
 
+	opacity: .9;
 
+}
 
+
 
+.blue .sc-info p a {
 
+	text-decoration: underline;
 
+}
 
+
 
+.blue .sc-info a:hover {
 
+	color: #039;
 
+}
 
+
 
+.blue .sc-info-toggle,
 
+.blue .sc-time-indicators,
 
+.blue .sc-info-close {
 
+	background: #fff;
 
+	color: #2955ac;
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.blue .sc-info-toggle:hover,
 
+.blue .sc-info-close:hover {
 
+	background: #2955ac;
 
+	color: #eee;
 
+}
 
+
 
+.blue .sc-info-close {
 
+	padding: 2px 4px;
 
+	font-weight: bold;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.blue .sc-volume-slider {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+}
 
+
 
+.blue .sc-volume-slider .sc-volume-status {
 
+	background-color: #666;
 
+	border-right: 1px solid #039;
 
+}

+ 159 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-green.css
View File 

@@ -0,0 +1,159 @@
 
+/* ----------< .green >---------------- */
 
+
 
+.green .sc-player {
 
+	font: .7em Arial, sans-serif;
 
+	background-color: #333;
 
+	color: #fff;
 
+	line-height: 1.6em;
 
+	box-shadow: 1px 1px 4px #333;
 
+}
 
+
 
+.green .sc-player a {
 
+	text-decoration: none;
 
+	color: #fff;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.green .sc-artwork-list {
 
+	background: #eee;
 
+	background:      linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background:   -o-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -webkit-gradient(linear, left bottom, right top, from(#eee), color-stop(50%, #888), to(#333));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.green .sc-scrubber {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+}
 
+
 
+.green .sc-time-span {
 
+	background-color: #666;
 
+}
 
+
 
+.green .sc-waveform-container {
 
+	width: 100%;
 
+	position: absolute;
 
+}
 
+
 
+.green .sc-buffer,
 
+.green .sc-played {
 
+	background-color: #333;
 
+	position: absolute;
 
+}
 
+
 
+.green .sc-played {
 
+	background: #22B573;
 
+	background:      linear-gradient( top, black, #22B573 0, #7decba 90% );
 
+	background:   -o-linear-gradient( top, black, #22B573 0, #7decba 90% );
 
+	background: -moz-linear-gradient( top, black, #22B573 0, #7decba 90% );
 
+	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #22B573), to(#7decba));
 
+}
 
+
 
+/* Controls */
 
+
 
+.green .sc-controls {
 
+	border-radius: 100%;
 
+	border: 2px solid white;
 
+	background: #22B573;
 
+	background:      linear-gradient( 135deg, #fff, #22B573 50% );
 
+	background:   -o-linear-gradient( 135deg, #fff, #22B573 50% );
 
+	background: -moz-linear-gradient( 135deg, #fff, #22B573 50% );
 
+	background: -webkit-gradient(linear, left top, 30% 90%, from(#fff), color-stop(50%, #22B573), to(#22B573));
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.green .sc-controls > * {
 
+	color: transparent;
 
+}
 
+
 
+.green .sc-controls:hover {
 
+	background:      linear-gradient( 45deg, #a8e2ca, #22B573 70% );
 
+	background:   -o-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
 
+	background: -moz-linear-gradient( 45deg, #a8e2ca, #22B573 70% );
 
+	background: -webkit-gradient(linear, left bottom, 90% 30%, from(#a8e2ca), color-stop(70%, #22B573), to(#22B573));
 
+}
 
+
 
+.green .sc-time-indicators {
 
+	background: #22B573;
 
+	color: #fff;
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+/* Track list */
 
+
 
+.green .sc-trackslist li {
 
+	background: #333;
 
+	color: #b8e9d3;
 
+	border-radius: 4px;
 
+	transition: background 0.3s ease-in;
 
+}
 
+
 
+.green .sc-trackslist li:hover {
 
+	background: #22B573;
 
+}
 
+
 
+.green .sc-trackslist li.active {
 
+	background: #22B573;
 
+	border-radius: 4px;
 
+}
 
+
 
+.green .sc-trackslist li.active a {
 
+	color: #fff;
 
+}
 
+
 
+/* Track info */
 
+
 
+.green .sc-info.active,
 
+.green .sc-info-close:hover,
 
+.green .sc-info-toggle:hover {
 
+	background: #333;
 
+	color: #fff;
 
+}
 
+
 
+.green .sc-info.active {
 
+	opacity: .9;
 
+}
 
+
 
+.green .sc-info a {
 
+	color: #b1e8cc;
 
+}
 
+
 
+.green .sc-info a:hover {
 
+	color: #e1f7ee;
 
+}
 
+
 
+.green .sc-info-toggle {
 
+	background: #22B573;
 
+	color: #fff;
 
+	border-radius: 4px;
 
+	padding: 4px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.green .sc-info-close {
 
+	background: #22B573;
 
+	color: #fff;
 
+	border-radius: 4px;
 
+	padding: 2px 4px;
 
+	font-weight: bold;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.green .sc-volume-slider {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.2);
 
+}
 
+
 
+.green .sc-volume-slider .sc-volume-status {
 
+	background-color: #666;
 
+	border-right: 1px solid #22B573;
 
+}

+ 193 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-horizontal.css
View File 

@@ -0,0 +1,193 @@
 
+/* ----------< .horizontal >---------------- */
 
+
 
+.horizontal .sc-player {
 
+	width: 540px;
 
+	height: 270px;
 
+	position: relative;
 
+	margin: 5px;
 
+}
 
+
 
+.horizontal .sc-player ol,
 
+.horizontal .sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style-position: inside;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.horizontal .sc-artwork-list {
 
+	width: 50%;
 
+	height: 100%;
 
+	list-style-type: none;
 
+	position: relative;
 
+}
 
+
 
+.horizontal .sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+
 
+.horizontal .sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+
 
+.horizontal .sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.horizontal .sc-no-artwork {
 
+	display: none;
 
+}
 
+
 
+/* Controls */
 
+
 
+.horizontal .sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	margin-left: -25px;
 
+	margin-top: -25px;
 
+	top: 50%;
 
+	left: 25%;
 
+}
 
+
 
+.horizontal .sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	cursor: pointer;
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.horizontal .sc-scrubber {
 
+	position: absolute;
 
+	left: 10px;
 
+	bottom: 10px;
 
+	height: 40px;
 
+	width: 250px;
 
+	box-shadow: 1px 1px 4px rgba(0,0,0,.3);
 
+	display: block;
 
+}
 
+
 
+.horizontal .sc-time-span {
 
+	height: 30px;
 
+	margin: 5px;
 
+	position: relative;
 
+}
 
+
 
+.horizontal .sc-buffer,
 
+.horizontal .sc-played {
 
+	position: absolute;
 
+	height: 30px;
 
+	top: 0;
 
+}
 
+
 
+.horizontal .sc-time-span img {
 
+	height: 30px;
 
+	width: 100%;
 
+}
 
+
 
+.horizontal .sc-time-indicators {
 
+	position: absolute;
 
+	right: 280px;
 
+	bottom: 10px;
 
+}
 
+
 
+.horizontal .sc-player.played .sc-time-indicators,
 
+.horizontal .sc-player.paused .sc-time-indicators {
 
+	bottom: 55px;
 
+}
 
+
 
+/* Track list */
 
+
 
+.horizontal .sc-trackslist {
 
+	position: absolute;
 
+	width: 50%;
 
+	height: 260px;
 
+	top: 5px;
 
+	left: 50%;
 
+	overflow: auto;
 
+}
 
+
 
+.horizontal .sc-trackslist li {
 
+	cursor: pointer;
 
+	margin: 1px 5px;
 
+	padding: 3px 30px 3px 5px;
 
+	position: relative;
 
+}
 
+
 
+.horizontal .sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.horizontal .sc-info {
 
+	position: absolute;
 
+	top: 0px;
 
+	width: 260px;
 
+	height: 260px;
 
+	padding: 5px;
 
+	z-index: 1;
 
+	overflow: auto;
 
+	opacity: 0.9;
 
+}
 
+
 
+.horizontal .sc-info-toggle {
 
+	position: absolute;
 
+	top: 10px;
 
+	left: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.horizontal .sc-info-close {
 
+	position: absolute;
 
+	top: 10px;
 
+	right: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.horizontal .sc-info,
 
+.horizontal .sc-info-toggle.active,
 
+.horizontal .sc-player .sc-scrubber {
 
+	visibility: hidden;
 
+}
 
+
 
+.horizontal .sc-info.active,
 
+.horizontal .sc-player.played .sc-scrubber,
 
+.horizontal .sc-player.paused .sc-scrubber {
 
+	visibility: visible;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.horizontal .sc-volume-slider {
 
+	top: -25px;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: white;
 
+}
 
+
 
+.horizontal .sc-volume-slider .sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+}
 
+
 
+/* --- */
 
+
 
+.horizontal .sc-player .hidden {
 
+	display: none;
 
+}

File diff suppressed because it is too large
+ 26 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-modern.css


+ 173 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-orange.css
View File 

@@ -0,0 +1,173 @@
 
+/* ----------< .orange >---------------- */
 
+
 
+.orange .sc-player {
 
+	font: .7em Arial, sans-serif;
 
+	background-color: #eee;
 
+	background:      linear-gradient( top, black, #ccc 0%, #fff 70%);
 
+	background:   -o-linear-gradient( top, black, #ccc 0%, #fff 70%);
 
+	background: -moz-linear-gradient( top, black, #ccc 0%, #fff 70%);
 
+	background: -webkit-gradient(linear, left top, left 70%, from(black), color-stop(0%, #ccc), to(#fff));
 
+	color: #333;
 
+	line-height: 1.6em;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.orange .sc-player a {
 
+	text-decoration: none;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.orange .sc-artwork-list {
 
+	background-color: #eee;
 
+	background:      linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background:   -o-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -moz-linear-gradient( left bottom, #eee 20px, #333 350px );
 
+	background: -webkit-gradient(linear, right top, left bottom, from(#333), to(#eee));
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.orange .sc-scrubber {
 
+	background-color: #e5e5e5;
 
+	border-radius: 8px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.orange .sc-time-span {
 
+	background-color: #ddd;
 
+}
 
+
 
+.orange .sc-buffer,
 
+.orange .sc-played {
 
+	background-color: #adadad;
 
+	position: absolute;
 
+}
 
+
 
+.orange .sc-played {
 
+	background-color: #e74c14;
 
+	background:      linear-gradient( top, black, #e74c14 0, #f6a400 90% );
 
+	background:   -o-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
 
+	background: -moz-linear-gradient( top, black, #e74c14 0, #f6a400 90% );
 
+	background: -webkit-gradient(linear, left top, left 90%, from(black), color-stop(0%, #e74c14), to(#f6a400));
 
+}
 
+
 
+.orange .sc-waveform-container {
 
+	position: absolute;
 
+	width: 100%;
 
+}
 
+
 
+/* Controls */
 
+
 
+.orange .sc-controls {
 
+	border-radius: 100%;
 
+	border: 2px solid white;
 
+	background-color: #f6a400;
 
+	background:      linear-gradient( 45deg, #e74c14, #f6a400 );
 
+	background:   -o-linear-gradient( 45deg, #e74c14, #f6a400 );
 
+	background: -moz-linear-gradient( 45deg, #e74c14, #f6a400 );
 
+	background: -webkit-gradient(linear, left bottom, top right, from(#e74c14), to(#f6a400));
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.orange .sc-controls:hover {
 
+	background:      linear-gradient( 225deg, #e74c14, #f6a400 );
 
+	background:   -o-linear-gradient( 225deg, #e74c14, #f6a400 );
 
+	background: -moz-linear-gradient( 225deg, #e74c14, #f6a400 );
 
+	background: -webkit-gradient(linear, top right, left bottom, from(#e74c14), to(#f6a400));
 
+}
 
+
 
+.orange .sc-controls > * {
 
+	color: transparent;
 
+}
 
+
 
+/* Track list */
 
+
 
+.orange .sc-trackslist li.active {
 
+	color: #fff;
 
+	background: #e74c14;
 
+}
 
+
 
+.orange .sc-track-duration {
 
+	text-align: right;
 
+	padding: 0 5px;
 
+	margin-left: 5px;
 
+}
 
+
 
+.orange .sc-trackslist li.active,
 
+.orange .sc-trackslist li:hover {
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.orange .sc-trackslist li:hover {
 
+	background-color: #f6a400;
 
+}
 
+
 
+.orange .sc-trackslist li.active a {
 
+	color: #fff;
 
+}
 
+
 
+.orange .sc-trackslist li a {
 
+	color: #333;
 
+}
 
+
 
+/* Track info */
 
+
 
+.orange .sc-info.active {
 
+	background: #fff;
 
+	opacity: .9;
 
+}
 
+
 
+.orange .sc-info a {
 
+	color: #e74c14;
 
+}
 
+
 
+.orange .sc-info p a {
 
+	text-decoration: underline;
 
+}
 
+
 
+.orange .sc-info a:hover {
 
+	color: #f6a400;
 
+}
 
+
 
+.orange .sc-info-toggle,
 
+.orange .sc-time-indicators {
 
+	background: #f6a400;
 
+	color: #ab3104;
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+	padding: 4px;
 
+}
 
+.orange .sc-info-close,
 
+.orange .sc-info-close:hover {
 
+	padding: 2px 4px;
 
+	font-weight: bold;
 
+	border-radius: 4px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.orange .sc-info-close:hover {
 
+	background: #f6a400;
 
+	color: #ab3104;
 
+}
 
+
 
+.orange .sc-info-toggle:hover,
 
+.orange .sc-info-close {
 
+	background: #fff;
 
+	color: #e74c14;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.orange .sc-volume-slider {
 
+	background-color: #e5e5e5;
 
+	border-radius: 2px;
 
+	box-shadow: 1px 1px 3px rgba(0,0,0,.2);
 
+}
 
+
 
+.orange .sc-volume-slider .sc-volume-status {
 
+	background-color: #666;
 
+	border-right: 1px solid #f6a400;
 
+}

File diff suppressed because it is too large
+ 59 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-standard.css


+ 210 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-super.css
View File 

@@ -0,0 +1,210 @@
 
+/* ----------< .super >---------------- */
 
+
 
+.super .sc-player {
 
+	width: 160px;
 
+	height: 160px;
 
+	position: relative;
 
+	margin: 5px;
 
+}
 
+
 
+.super .sc-player ol,
 
+.super .sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style-position: inside;
 
+}
 
+
 
+.super .sc-artwork-list {
 
+	width: 160px;
 
+	height: 160px;
 
+	list-style-type: none;
 
+	position: relative;
 
+}
 
+
 
+.super .sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+
 
+.super .sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+
 
+.super .sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.super .sc-no-artwork {
 
+	display: none;
 
+}
 
+
 
+/* Controls */
 
+
 
+.super .sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	top: 10px;
 
+	left: 180px
 
+}
 
+
 
+.super .sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	cursor: pointer;
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.super .sc-scrubber {
 
+	position: absolute;
 
+	top: 80px;
 
+	height: 70px;
 
+	width: 600px;
 
+	left: 180px;
 
+	display: block;
 
+}
 
+
 
+.super .sc-time-span {
 
+	height: 60px;
 
+	margin: 5px;
 
+	position: relative;
 
+}
 
+
 
+.super .sc-buffer, .super .sc-played {
 
+	height: 60px;
 
+	position: absolute;
 
+	top: 0;
 
+}
 
+
 
+.super .sc-time-span img {
 
+	height: 60px;
 
+	width: 100%;
 
+}
 
+
 
+.super .sc-time-indicators {
 
+	position: absolute;
 
+	left: 700px;
 
+}
 
+
 
+.super .sc-time-indicators {
 
+	top: 43px;
 
+}
 
+
 
+/* Track list */
 
+
 
+.super .sc-trackslist {
 
+	width: 780px;
 
+	min-height: 50%;
 
+	overflow: auto;
 
+}
 
+
 
+.super .sc-trackslist li {
 
+	cursor: pointer;
 
+	margin: 5px;
 
+	padding: 3px 30px 3px 5px;
 
+	position: relative;
 
+}
 
+
 
+.super .sc-track-duration {
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.super .sc-info {
 
+	position: absolute;
 
+	padding: 0 5px;
 
+	min-height: 100%;
 
+	width: 774px;
 
+	top: 0;
 
+	z-index: -1;
 
+}
 
+
 
+.super .sc-info.active {
 
+	overflow: auto;
 
+	z-index: 1;
 
+}
 
+
 
+.super .sc-info p {
 
+	position: relative;
 
+	text-align: center;
 
+	top: 50px;
 
+}
 
+
 
+.super .sc-info-toggle {
 
+	position: absolute;
 
+	top: 43px;
 
+	left: 670px;
 
+	cursor: pointer;
 
+}
 
+
 
+.super .sc-info-close {
 
+	position: absolute;
 
+	top: 10px;
 
+	right: 20px;
 
+	cursor: pointer;
 
+}
 
+
 
+.super .sc-info h3 {
 
+	position: absolute;
 
+	width: 420px;
 
+	left: 240px;
 
+	text-align: left;
 
+	top: 30px;
 
+}
 
+
 
+.super .sc-info h4 {
 
+	position: absolute;
 
+	width: 420px;
 
+	left: 240px;
 
+	opacity: 0.5;
 
+}
 
+
 
+.super .sc-download {
 
+	position: absolute;
 
+	top: 10px;
 
+	left: 20px;
 
+}
 
+
 
+.super .sc-info p,
 
+.super .sc-info .sc-info-close,
 
+.super .sc-info .sc-download {
 
+	visibility: hidden;
 
+}
 
+
 
+.super .sc-info.active p,
 
+.super .sc-info.active .sc-info-close,
 
+.super .sc-info.active .sc-download {
 
+	visibility: visible;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.super .sc-volume-slider {
 
+	top: -60px;
 
+	right: 0;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: white;
 
+}
 
+
 
+.super .sc-volume-slider .sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+}
 
+
 
+/* --- */
 
+
 
+.horizontal .sc-player .hidden {
 
+	display: none;
 
+}

+ 190 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/examples/styles/sc-player-vertical.css
View File 

@@ -0,0 +1,190 @@
 
+/* ----------< .vertical >---------------- */
 
+
 
+.vertical .sc-player {
 
+	width: 270px;
 
+	height: 540px;
 
+	position: relative;
 
+	margin: 5px;
 
+}
 
+
 
+.vertical .sc-player ol,
 
+.vertical .sc-player li {
 
+	margin: 0;
 
+	padding: 0;
 
+	list-style-position: inside;
 
+}
 
+
 
+/* Artworks */
 
+
 
+.vertical .sc-artwork-list {
 
+	width: 100%;
 
+	height: 50%;
 
+	list-style-type: none;
 
+	position: relative;
 
+}
 
+
 
+.vertical .sc-artwork-list li {
 
+	list-style-type: none;
 
+	display: none;
 
+}
 
+
 
+.vertical .sc-artwork-list li.active {
 
+	list-style-type: none;
 
+	display: block;
 
+}
 
+
 
+.vertical .sc-artwork-list img {
 
+	list-style-type: none;
 
+	width: 100%;
 
+	height: 100%;
 
+}
 
+
 
+.vertical .sc-no-artwork {
 
+	display: none;
 
+}
 
+
 
+/* Controls */
 
+
 
+.vertical .sc-controls {
 
+	position: absolute;
 
+	width: 50px;
 
+	height: 50px;
 
+	margin-left: -25px;
 
+	margin-top: -25px;
 
+	top: 25%;
 
+	left: 50%;
 
+}
 
+
 
+.vertical .sc-controls > * {
 
+	width: 50px;
 
+	height: 50px;
 
+	cursor: pointer;
 
+}
 
+
 
+/* Scrubber */
 
+
 
+.vertical .sc-scrubber {
 
+	position: absolute;
 
+	bottom: 280px;
 
+	height: 40px;
 
+	width: 250px;
 
+	left: 10px;
 
+	display: block;
 
+}
 
+
 
+.vertical .sc-time-span {
 
+	height: 30px;
 
+	margin: 5px;
 
+	position: relative;
 
+}
 
+
 
+.vertical .sc-buffer,
 
+.vertical .sc-played {
 
+	height: 30px;
 
+	position: absolute;
 
+	top: 0;
 
+}
 
+
 
+.vertical .sc-time-span img {
 
+	height: 30px;
 
+	width: 100%;
 
+}
 
+
 
+.vertical .sc-time-indicators {
 
+	position: absolute;
 
+	right: 10px;
 
+	top: 235px;
 
+}
 
+
 
+.vertical .sc-player.played .sc-time-indicators,
 
+.vertical .sc-player.paused .sc-time-indicators {
 
+	top: 190px;
 
+}
 
+
 
+/* Track list */
 
+
 
+.vertical .sc-trackslist {
 
+	position: absolute;
 
+	width: 100%;
 
+	height: 50%;
 
+	top: 50%;
 
+	left: 0;
 
+	overflow: auto;
 
+}
 
+
 
+.vertical .sc-trackslist li {
 
+	cursor: pointer;
 
+	margin: 5px;
 
+	padding: 3px 30px 3px 5px;
 
+	position: relative;
 
+}
 
+
 
+.vertical .sc-track-duration {
 
+	position: absolute;
 
+	right: 0;
 
+	top: 3px;
 
+}
 
+
 
+/* Track info */
 
+
 
+.vertical .sc-info {
 
+	position: absolute;
 
+	top: 0px;
 
+	width: 260px;
 
+	height: 260px;
 
+	padding: 5px;
 
+	z-index: 1;
 
+	overflow: auto;
 
+	opacity: 0.9;
 
+}
 
+
 
+.vertical .sc-info-toggle {
 
+	position: absolute;
 
+	top: 10px;
 
+	left: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.vertical .sc-info-close {
 
+	position: absolute;
 
+	top: 10px;
 
+	right: 10px;
 
+	cursor: pointer;
 
+}
 
+
 
+.vertical .sc-info,
 
+.vertical .sc-info-toggle.active,
 
+.vertical .sc-player .sc-scrubber {
 
+	visibility: hidden;
 
+}
 
+
 
+.vertical .sc-info.active,
 
+.vertical .sc-player.played .sc-scrubber,
 
+.vertical .sc-player.paused .sc-scrubber {
 
+	visibility: visible;
 
+}
 
+
 
+/* Volume control */
 
+
 
+.vertical .sc-volume-slider {
 
+	top: -25px;
 
+	left: 0px;
 
+	position: absolute;
 
+	width: 110px;
 
+	height: 12px;
 
+	background-color: white;
 
+}
 
+
 
+.vertical .sc-volume-slider .sc-volume-status {
 
+	position: absolute;
 
+	width: 0%;
 
+	height: 10px;
 
+	top: 1px;
 
+	left: 1px;
 
+}
 
+
 
+/* --- */
 
+
 
+.vertical .sc-player .hidden {
 
+	display: none;
 
+}

BIN
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/js/player_mp3_js.swf
View File


+ 751 - 0
sites/all/themes/gui/perfarttimeline/js/libs/soundcloud-pure-player/js/sc-player.js
View File 

@@ -0,0 +1,751 @@
 
+/*
 
+*   SoundCloud Pure Player
 
+*   
+*   The project to rewrite https://github.com/soundcloud/soundcloud-custom-player ((c) Matas Petrikas, MIT)
 
+*   on a pure js code.
 
+*   Original project source code:
 
+*   https://github.com/OpenA/soundcloud-pure-player
 
+*
 
+*   Usage:
 
+*   <a href="https://soundcloud.com/ueffin-chatlan/reminiscences" class="sc-player">My new dub track</a>
 
+*   The link will be automatically replaced by the HTML based player
 
+*/
 
+
 
+function SoundCloudAPI() {
 
+	
+	var _$ = this;
 
+	
+	Object.defineProperties(this, {
 
+		version: {
 
+			enumerable: true,
 
+			value: '1.0'
 
+		},
 
+		apiKey: {
 
+			enumerable: true,
 
+			writable: true,
 
+			value: 'htuiRd1JP11Ww0X72T1C3g'
 
+		},
 
+		debug: {
 
+			enumerable: true,
 
+			writable: true,
 
+			value: true
 
+		},
 
+		getTracks : { value: $getTracks },
 
+		fetch     : { value: $fetch }
 
+	});
 
+	
+	function $fetch(url, callback, errorback) {
 
+		
+		if (!url) {
 
+			return $panic('requested url is "'+ url +'"', errorback);
 
+		}
 
+		if (typeof callback !== 'function') {
 
+			return (window.Promise ? new Promise(function(resolve, reject) {
 
+				$fetch(url, resolve, reject)
 
+			}) : null);
 
+		}
 
+		
+		var protocol = (location.protocol === 'https:' ? 'https:' : 'http:'),
 
+			resolve = protocol +'//api.soundcloud.com/resolve?url=',
 
+			params = 'format=json&consumer_key='+ _$.apiKey, apiUrl;
 
+			
+		// force the secure url in unsecure environment
 
+		url = url.replace(/^https?:/, protocol);
 
+		
+		// check if it's already a resolved api url
 
+		if ((/api\.soundcloud\.com/).test(url)) {
 
+			apiUrl = url + '?' + params;
 
+		} else {
 
+			apiUrl = resolve + url + '&' + params;
 
+		}
 
+		
+		var xhr = new XMLHttpRequest;
 
+			xhr.onreadystatechange = function() {
 
+				if (this.readyState !== 4)
 
+					return;
 
+				if (this.status === 200) {
 
+					try {
 
+						var data = JSON.parse(this.responseText);
 
+					} catch(log) {
 
+						if (_$.debug && window.console) {
 
+							console.error(log)
 
+						}
 
+					} finally {
 
+						callback(data);
 
+					}
 
+				} else {
 
+					return $panic('unable to GET '+ url +' ('+ this.status +
 
+						(!this.statusText ? '' : ' '+ this.statusText) +')', errorback);
 
+				}
 
+			};
 
+			xhr.open('GET', apiUrl, true);
 
+			xhr.send(null);
 
+	}
 
+	
+	function $panic(msg, errorback) {
 
+		if (_$.debug && window.console) {
 
+			console.error('SoundCloudAPI: '+ msg);
 
+		}
 
+		if (typeof errorback !== 'function') {
 
+			return (window.Promise ? new Promise(function(resolve, reject) {
 
+				reject(new EvalError(msg));
 
+			}) : null);
 
+		} else
 
+			errorback(new EvalError(msg));
 
+	}
 
+	
+	function $getTracks(url, callback, errorback) {
 
+		
+		if (!url) {
 
+			return $panic('requested url is "'+ url +'"', errorback);
 
+		}
 
+		if (typeof callback !== 'function') {
 
+			return (window.Promise ? new Promise(function(resolve, reject) {
 
+				$getTracks(url, resolve, reject)
 
+			}) : null);
 
+		}
 
+		
+		var $bound = function(data) {
 
+			if (data) {
 
+				if (data.tracks) {
 
+					// log('data.tracks', data.tracks);
 
+					callback(data.tracks);
 
+				} else if (Array.isArray(data)) {
 
+					callback(data);
 
+				} else if (data.duration){
 
+					// a secret link fix, till the SC API returns permalink with secret on secret response
 
+					data.permalink_url = url;
 
+					// if track, add to player
 
+					callback([data]);
 
+				} else if (data.creator || data.username) {
 
+					// get user or group tracks, or favorites
 
+					$fetch(data.uri + (data.username && url.indexOf('favorites') != -1 ? '/favorites' : '/tracks'), $bound, errorback);
 
+				}
 
+			}
 
+		}
 
+		$fetch(url, $bound, errorback);
 
+	}
 
+};
 
+
 
+(function() {
 
+	
+	var SC = {
 
+		'API': new SoundCloudAPI,
 
+		'Global': false,
 
+		'Volume': 0.8,
 
+		'Tracks': {},
 
+		'Object': {},
 
+		get 'Progress'() {
 
+			return 0;
 
+		}
 
+	}
 
+	
+	var _handler = 'ontouchstart' in window ? {
 
+		start: 'touchstart',
 
+		move: 'touchmove',
 
+		end: 'touchend',
 
+		getCoords: function(e) {
 
+			return (e.touches.length === 1 ? { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY } : null);
 
+		}
 
+	} : {
 
+		start: 'mousedown',
 
+		move: 'mousemove',
 
+		end: 'mouseup',
 
+		getCoords: function(e) {
 
+			return (e.button === 0 ? { x: e.clientX, y: e.clientY } : null);
 
+		}
 
+	};
 
+	
+	var _Current_ = {
 
+		
+		SavedState : null,
 
+		TrackLoaded: null,
 
+		SelectTrack: null,
 
+		PlayerNode : null,
 
+		AudioDevice: createAudioDevice(),
 
+		/* Complex */
 
+		set 'Player Volume' (vol) {
 
+			this.AudioDevice.volume = this.SavedState.Volume = vol;
 
+			this.PlayerNode['_volume_'].firstElementChild.style['width'] = (vol * 100) +'%';
 
+		},
 
+		get 'Player Volume' () {
 
+			return this.PlayerNode['_volume_'].firstElementChild.style['width'];
 
+		},
 
+		
+		set 'Track Duration' (sec) {
 
+			this.TrackLoaded.duration = sec;
 
+			this.PlayerNode['_duration_'].textContent = (sec = timeCalc(sec));
 
+			this.SelectTrack['_duration_'].textContent = sec;
 
+		},
 
+		get 'Track Duration' () {
 
+			return this.SelectTrack['_duration_'].textContent;
 
+		},
 
+		
+		set 'Track Progress' (sec) {
 
+			this.SavedState.Progress = sec;
 
+			this.PlayerNode['_position_'].textContent = timeCalc(sec);
 
+			this.PlayerNode['_progress_'].style['width'] = (sec / this.TrackLoaded.duration * 100) +'%';
 
+		},
 
+		get 'Track Progress' () {
 
+			return this.PlayerNode['_progress_'].style['width'];
 
+		},
 
+		
+		set 'Track Buffered' (buf) {
 
+			this.PlayerNode['_buffer_'].style['width'] = buf +'%';
 
+		},
 
+		get 'Track Buffered' () {
 
+			return this.PlayerNode['_buffer_'].style['width'] === '100%';
 
+		},
 
+		
+		invokeEvent: function(name) {
 
+			this.PlayerNode.dispatchEvent(
 
+				new CustomEvent(name, {
 
+					bubbles: true, cancelable: true,
 
+					detail: {
 
+						track: this.TrackLoaded, device: this.AudioDevice
 
+					}
 
+				}));
 
+		},
 
+		
+		connect: function(player_node, track_node, saved_state) {
 
+			
+			if (saved_state) {
 
+				this.SavedState = saved_state;
 
+			}
 
+			
+			if (player_node && player_node !== this.PlayerNode) {
 
+				if (this.PlayerNode) {
 
+					this.PlayerNode[ '_volume_' ]['on'+ _handler.start] = null;
 
+					this.PlayerNode['_waveform_']['on'+ _handler.start] = null;
 
+				}
 
+				this.PlayerNode = ('_trackslist_' in player_node ? player_node : catchKeyElements('player', player_node));
 
+				this.PlayerNode[ '_volume_' ]['on'+ _handler.start] = barChanger;
 
+				this.PlayerNode['_waveform_']['on'+ _handler.start] = barChanger;
 
+				this['Player Volume'] = this.SavedState.Volume;
 
+			}
 
+			
+			if (!track_node) {
 
+				track_node = this.PlayerNode.querySelector('.sc-track.active') || this.PlayerNode['_trackslist_'].firstElementChild;
 
+			}
 
+				
+			if (track_node && track_node !== this.SelectTrack) {
 
+				(this.PlayerNode.querySelector('.sc-track.active') || {}).className = 'sc-track';
 
+				track_node.className = 'sc-track active';
 
+				
+				this.SelectTrack = ('_duration_' in track_node ? track_node : catchKeyElements('track', track_node));
 
+				this.TrackLoaded = SC['Tracks'][track_node.id.slice(track_node.id.lastIndexOf('_') + 1)];
 
+				
+				this['Track Buffered'] = 0;
 
+				
+				updateTrackInfo(this.PlayerNode, this.TrackLoaded);
 
+				this['AudioDevice'].src = this.TrackLoaded.stream_url + (this.TrackLoaded.stream_url.indexOf('?') >= 0 ? '&' : '?') +'consumer_key='+ SC['API'].apiKey;
 
+				this['AudioDevice'].currentTime = this.SavedState.Progress;
 
+				this['AudioDevice'].play();
 
+			}
 
+		}
 
+	}
 
+	
+	var _fileDownload = 'download' in HTMLAnchorElement.prototype ? function() {
 
+		
+		var anchor = document.createElement('a');
 
+	
+		(_fileDownload = function(button) {
 
+		
+			var uri   = button.href +'?consumer_key='+ SC['API'].apiKey,
 
+				track = SC['Tracks'][uri.match(/\/(-?\d+)\//)[1]];
 
+			
+			if (!track.downloadable) {
 
+				
+				button.textContent = '0%';
 
+				
+				for (var i = 0, sd = document.querySelectorAll('.sc-download'); i < sd.length; i++) {
 
+					sd[i].className = 'sc-disabled';
 
+				}
 
+				
+				var wReq = new XMLHttpRequest;
 
+					wReq.responseType = 'blob';
 
+					wReq.onprogress = function(e) {
 
+						var percent = Math.round(e.loaded / e.total * 100),
 
+							progBar = percent +'% ';
 
+						for (; percent > 10; percent -= 10)
 
+							progBar += '»';
 
+						button.textContent = progBar;
 
+					};
 
+					wReq.onload = function() {
 
+						track.blob_uri  = (anchor.href     = window.URL.createObjectURL(wReq.response));
 
+						track.blob_name = (anchor.download = track.title +'.'+ wReq.response.type.replace('audio/', '').replace('mpeg', 'mp3'));
 
+						track.downloadable = !document.body.appendChild(anchor).click();
 
+						button.textContent = '» Download «';
 
+						while (i--) {
 
+							sd[i].className = 'sc-download';
 
+						}
 
+					};
 
+					wReq.open('GET', uri, true);
 
+					wReq.send(null);
 
+			} else {
 
+				anchor.href     = track.blob_uri  || uri;
 
+				anchor.download = track.blob_name || '';
 
+				document.body.appendChild(anchor).click();
 
+			}
 
+		})(arguments[0]);
 
+		
+	} : function(a) {
 
+		window.open(a.href +'?consumer_key='+ SC['API'].apiKey, '_blank', 'width=400,height=200');
 
+	};
 
+	
+	if (SC['Global']) {
 
+		window.addEventListener('click', onClickHandler, false);
 
+	}
 
+	
+	window.SCPurePlayer = {
 
+		create: _scCreate,
 
+		createGroup: _scCreateGroup
 
+	}
 
+	
+	if (document.readyState === 'loading') {
 
+		document.addEventListener('DOMContentLoaded', function(e) {
 
+			this.removeEventListener(e.type, arguments.callee, false);
 
+			onDOMReady();
 
+		}, false);
 
+	} else
 
+		onDOMReady();
 
+	
+	function _scCreateGroup(links) {
 
+		var $hash = genGroupId(),
 
+			inact = true,
 
+			ibx   = links.length,
 
+			$node = createPlayerDOM(ibx, $hash);
 
+		
+		Array.prototype.slice.call(links, 0).forEach(function(link, it) {
 
+			
+			SC['API'].getTracks(link.href, function(tracks)
 
+			{ ibx--;
 
+				
+				var tNode  = createTrackDOM(tracks[0], $hash),
 
+					tChild = $node['_trackslist_'].children['ft_'+ $hash +'_'+ it];
 
+				
+				$node['_trackslist_'].replaceChild(tNode, tChild);
 
+				
+				for (var j = 1; j < tracks.length; j++) {
 
+					tChild = tNode.nextSibling;
 
+					tNode  = createTrackDOM(tracks[j], $hash);
 
+					$node['_trackslist_'].insertBefore(tNode, tChild);
 
+				}
 
+				
+				if (it === 0) {
 
+					inact = false;
 
+					updateTrackInfo($node, tracks[0]);
 
+					tNode.className += ' active';
 
+				} else if (ibx === 0 && inact) {
 
+					tNode = $node['_trackslist_'].firstElementChild;
 
+					updateTrackInfo($node, SC['Tracks'][tNode.id.split('_')[2]]);
 
+					tNode.className += ' active';
 
+				}
 
+			}, function(error)
 
+			{ ibx--;
 
+				
+				$node['_trackslist_'].children['ft_'+ $hash +'_'+ it].remove();
 
+				if (ibx === 0) {
 
+					var tNode = $node['_trackslist_'].firstElementChild;
 
+					
+					if (!tNode) {
 
+						$node.removeAttribute('id');
 
+					} else if (inact) {
 
+						updateTrackInfo($node, SC['Tracks'][tNode.id.split('_')[2]]);
 
+						tNode.className += ' active';
 
+					}
 
+				}
 
+			});
 
+		});
 
+		
+		return $node;
 
+	}
 
+	
+	function _scCreate(link) {
 
+		var $hash = genGroupId(),
 
+			$node = createPlayerDOM(-1, $hash);
 
+			
+		SC['API'].getTracks(link.href, function(tracks){
 
+			for (var j = 0; j < tracks.length; j++) {
 
+				var tNode = createTrackDOM(tracks[j], $hash);
 
+				
+				$node['_trackslist_'].insertBefore(
 
+					tNode, $node['_trackslist_'].children[j]
 
+				);
 
+				if (j === 0) {
 
+					updateTrackInfo($node, tracks[j]);
 
+					tNode.className += ' active';
 
+				}
 
+			}
 
+		}, function(error) {
 
+			$node.removeAttribute('id');
 
+		});
 
+		
+		return $node;
 
+	}
 
+	
+	function onDOMReady(e) {
 
+		Array.prototype.slice.call(document.getElementsByClassName('sc-player'), 0).forEach(function(scp) {
 
+			var node = scp.href ? _scCreate(scp) : _scCreateGroup(scp.querySelectorAll('a[href*="soundcloud.com/"]'));
 
+			scp.parentNode.replaceChild(node, scp);
 
+		});
 
+		if (_Current_['AudioDevice'].tagName === 'OBJECT') {
 
+			var engineContainer = document.createElement('scont');
 
+				engineContainer.className = 'sc-engine-container';
 
+				engineContainer.setAttribute('style', 'position: absolute; left: -9000px');
 
+				engineContainer.appendChild(_Current_['AudioDevice']);
 
+			document.body.appendChild(engineContainer);
 
+		}
 
+	}
 
+	function onEnd(e) {
 
+		var play_next;
 
+			_Current_.SavedState.Progress = 0;
 
+			_Current_.invokeEvent('ended');
 
+		if ((play_next = _Current_.SelectTrack.nextElementSibling)) {
 
+			_Current_.connect(null, play_next);
 
+		} else {
 
+			_Current_.PlayerNode['_button_'].className = 'sc-play';
 
+			_Current_.PlayerNode['_button_'].textContent = 'Play';
 
+			_Current_.PlayerNode.className = 'sc-player';
 
+			_Current_.SelectTrack.className = 'sc-track';
 
+			_Current_.PlayerNode['_trackslist_'].children[0].className = 'sc-track active';
 
+			if ((play_next = _Current_.PlayerNode.nextElementSibling) && play_next.id &&
 
+				 play_next.className.substring(0, 9) === 'sc-player') {
 
+					_Current_.connect(play_next, null, SC['Object'][play_next.id.slice(play_next.id.indexOf('_') + 1)]);
 
+			}
 
+		}
 
+	}
 
+	function onTimeUpdate(e) {
 
+		_Current_['Track Progress'] = e.target.currentTime;
 
+		_Current_.invokeEvent('timeupdate');
 
+	}
 
+	function onBufferLoad(e) {
 
+		if (!_Current_['Track Buffered']) {
 
+			_Current_['Track Buffered'] = this.bytesPercent;
 
+		}
 
+	}
 
+	function onClickHandler(e) {
 
+		if (e.button != 0 || !e.target.className)
 
+			return;
 
+		if (e.target.className.slice(0, 3) === 'sc-') {
 
+			var $target = e.target,
 
+				$class  = $target.classList || $target.className.split(' '),
 
+				$sc     = $class[0].split('-');
 
+				e.preventDefault();
 
+			switch ($sc[1]) {
 
+				case 'download':
 
+					_fileDownload($target);
 
+					break;
 
+				case 'info':
 
+					if ($sc[2] === 'close') {
 
+						$target.parentNode.className = 'sc-info';
 
+					} else if ($sc[2] === 'toggle') {
 
+						$target.parentNode.children[1].className = 'sc-info active';
 
+					}
 
+					break;
 
+				case 'track':
 
+					var $player = $target.parentNode.parentNode;
 
+					if ($sc[2]) {
 
+						$player = $player.parentNode;
 
+						$target = $target.parentNode;
 
+					}
 
+					var $obj = SC['Object'][$player.id.slice($player.id.indexOf('_') + 1)];
 
+						$obj.Progress = 0;
 
+					_Current_.connect($player, $target, $obj);
 
+					break;
 
+				case 'play':
 
+					var $player = $target.parentNode.parentNode;
 
+					if (!$player.id)
 
+						return;
 
+					_Current_.connect($player, null, SC['Object'][$player.id.slice($player.id.indexOf('_') + 1)]);
 
+				case 'pause':
 
+					_Current_.AudioDevice[$sc[1]]();
 
+				case 'disabled':
 
+			}
 
+		}
 
+	}
 
+	function onPlayerAction(e) {
 
+		for (var i = 0, el = document.querySelectorAll(
 
+			'.sc-pause, .sc-player.played, .sc-player.paused'
 
+		); i < el.length; i++) {
 
+			if (el[i].className === 'sc-pause') {
 
+				el[i].className   = 'sc-play';
 
+				el[i].textContent = 'Play'   ;
 
+			} else {
 
+				el[i].className = 'sc-player';
 
+			}
 
+		}
 
+		var ype = (e.type === 'play' ? 'ause' : 'lay')
 
+		_Current_.PlayerNode['_button_'].className   = 'sc-p'+ ype;
 
+		_Current_.PlayerNode['_button_'].textContent = 'P'   + ype;
 
+		_Current_.PlayerNode.className = 'sc-player '+ e.type + (e.type === 'play' ? 'ed' : 'd');
 
+		_Current_.invokeEvent(e.type);
 
+	}
 
+	function barChanger(e) {
 
+		var coords = _handler.getCoords(e);
 
+		if (!coords) {
 
+			return;
 
+		}
 
+		e.preventDefault();
 
+		
+		var barMove, barEnd;
 
+		var rect = this.getBoundingClientRect(),
 
+			x = (coords.x - rect.left) / ('width' in rect ? rect.width : (rect.width = rect.right - rect.left));
 
+			
+		if (this === _Current_.PlayerNode['_waveform_']) {
 
+			var maxs = _Current_.TrackLoaded.duration,
 
+				curT = _Current_['AudioDevice'].currentTime,
 
+				seek = x > 1 ? maxs : x < 0 ? 0 : Math.floor(maxs * x * 1000000) / 1000000;
 
+			_Current_['AudioDevice'].ontimeupdate = null;
 
+			_Current_['Track Progress'] = seek;
 
+			if (seek > curT || curT < seek) {
 
+				_Current_.invokeEvent('seeking');
 
+			}
 
+			barMove = function(eM) {
 
+				maxs = _Current_.TrackLoaded.duration;
 
+				x = (_handler.getCoords(eM).x - rect.left) / rect.width;
 
+				seek = x > 1 ? maxs : x < 0 ? 0 : Math.floor(maxs * x * 1000000) / 1000000;
 
+				_Current_['Track Progress'] = seek;
 
+				_Current_.invokeEvent('seeking');
 
+			}
 
+			barEnd = function(eE) {
 
+				_Current_['AudioDevice'].ontimeupdate = onTimeUpdate;
 
+				_Current_['AudioDevice'].currentTime  = seek;
 
+				_Current_.invokeEvent('seeked');
 
+				window.removeEventListener(_handler.move, barMove, false);
 
+				window.removeEventListener(eE.type, barEnd, false);
 
+			}
 
+		} else if (this === _Current_.PlayerNode['_volume_']) {
 
+			var vol = x > 1 ? 1 : x < 0 ? 0 : Math.round(x * 1000) / 1000,
 
+				sav = _Current_.SavedState.Volume;
 
+			if (sav > vol || sav < vol) {
 
+				_Current_.invokeEvent('volumechange');
 
+			}
 
+			_Current_['Player Volume'] = (sav = vol);
 
+			barMove = function(eM) {
 
+				x = (_handler.getCoords(eM).x - rect.left) / rect.width;
 
+				vol = x > 1 ? 1 : x < 0 ? 0 : Math.round(x * 1000) / 1000;
 
+				if (sav > vol || sav < vol) {
 
+					_Current_.invokeEvent('volumechange');
 
+				}
 
+				_Current_['Player Volume'] = vol;
 
+			}
 
+			barEnd = function(eE) {
 
+				window.removeEventListener(_handler.move, barMove, false);
 
+				window.removeEventListener(eE.type, barEnd, false);
 
+			}
 
+		}
 
+		window.addEventListener(_handler.move, barMove, false);
 
+		window.addEventListener(_handler.end, barEnd, false);
 
+	}
 
+	
+	function createAudioDevice(url) {
 
+		var audio, html5, flash;
 
+		if (typeof HTMLAudioElement !== 'undefined') {
 
+			audio = new Audio;
 
+			html5 = audio.canPlayType && (/maybe|probably/).test(audio.canPlayType('audio/mpeg'));
 
+		}
 
+		if (!html5) {
 
+			audio = document.createElement('object');
 
+			audio.id     = 'scPlayerEngine';
 
+			audio.height = 1;
 
+			audio.width  = 1;
 
+			audio.type   = 'application/x-shockwave-flash';
 
+			audio.data   = '/js/player_mp3_js.swf';
 
+			audio.innerHTML = '<param name="movie" value="/js/player_mp3_js.swf" /><param name="AllowScriptAccess" value="always" /><param name="FlashVars" value="listener=flashBack2343191116fr_scEngine&interval=500" />';
 
+			
+			flash = (window['flashBack2343191116fr_scEngine'] = new Object);
 
+			flash.onInit = function() {
 
+				Object.defineProperties(audio, {
 
+					play        : { value: function()    {
 
+						flash.status = 'process';
 
+						this.SetVariable('method:play', '');
 
+						this.SetVariable('enabled', 'true');
 
+						onPlayerAction({type: 'play'}); }},
 
+					pause       : { value: function()    {
 
+						flash.status = 'waiting';
 
+						this.SetVariable('method:pause', '');
 
+						onPlayerAction({type: 'pause'}); }},
 
+					//stop        : { value: function()  { this.SetVariable('method:stop', '') }},
 
+					src         : { get: function()    { return this.url },
 
+								    set: function(url) { this.SetVariable('method:setUrl', url) }},
 
+					ended       : { get: function()    { return flash.status === 'ended' }},
 
+					playing     : { get: function()    { return JSON.parse(flash.isPlaying); }},
 
+					duration    : { get: function()    { return Number(flash.duration) / 1000 || 0 }},
 
+					currentTime : { get: function()    { return Number(flash.position) / 1000 || 0 },
 
+								    set: function(rel) { this.SetVariable('method:setPosition', (rel * 1000)) }},
 
+					volume      : { get: function()    { return Number(flash.volume) / 100 },
 
+								    set: function(vol) { this.SetVariable('method:setVolume', (vol * 100)) }},
 
+					ontimeupdate: { set: function(fn)  { flash.onTimeUpdate = fn || function(){} }}
 
+				});
 
+				audio['volume'] = SC.Volume;
 
+				this.position = 0;
 
+			};
 
+			flash.onTimeUpdate = onTimeUpdate;
 
+			flash.onBufferLoad = onBufferLoad;
 
+			flash.onUpdate = function() {
 
+				switch (this.status) {
 
+					case 'process':
 
+						this.onTimeUpdate({target: audio});
 
+						if (this.position == '0' && this.isPlaying == 'false') {
 
+							this.status = 'ended';
 
+							onEnd();
 
+						}
 
+					case 'waiting':
 
+						this.onBufferLoad();
 
+				}
 
+			};
 
+		} else {
 
+			var _BufferLoad = null;
 
+			audio['volume'] = SC.Volume;
 
+			audio['onplay'] = audio['onpause'] = onPlayerAction;
 
+			audio['onended'] = onEnd;
 
+			audio['ontimeupdate'] = onTimeUpdate;
 
+			audio['onerror'] = function(e) {
 
+				clearInterval(_BufferLoad);
 
+				_Current_.invokeEvent('error');
 
+			};
 
+			audio['onloadedmetadata'] = function(e) {
 
+				clearInterval(_BufferLoad);
 
+				if (_Current_.TrackLoaded.duration !== this.duration) {
 
+					_Current_['Track Duration'] = this.duration;
 
+				}
 
+				_BufferLoad = setInterval(function() {
 
+					if (audio.buffered.length > 0) {
 
+						var bytesPercent = audio.buffered.end(audio.buffered.length - 1) / audio.duration;
 
+						if (bytesPercent === 1) {
 
+							clearInterval(_BufferLoad);
 
+						}
 
+						_Current_['Track Buffered'] = bytesPercent * 100;
 
+					}
 
+				}, 100);
 
+			};
 
+		}
 
+		return audio;
 
+	}
 
+	function createTrackDOM(track, hash) {
 
+		SC['Tracks'][track.id] = track;
 
+		var li = document.createElement('li');
 
+			li.id = 'sc-t_'+ hash +'_'+ track.id;
 
+			li.className = 'sc-track';
 
+			li.appendChild((
 
+				li['_title_'] = document.createElement('a')));
 
+				li['_title_'].href = track.permalink_url;
 
+				li['_title_'].className = 'sc-track-title';
 
+				li['_title_'].textContent = track.title;
 
+			li.appendChild((
 
+				li['_duration_'] = document.createElement('span')));
 
+				li['_duration_'].className = 'sc-track-duration';
 
+				li['_duration_'].textContent = timeCalc((track.duration /= 1000));
 
+		return  li;
 
+	}
 
+	function _li(h, l) {
 
+		var li ='', i;
 
+		for (i = 0; i < l; i++)
 
+			li += '<span id="ft_'+h+'_'+i+'"></span>';
 
+		return li;
 
+	}
 
+	function createPlayerDOM(len, hash) {
 
+		var div = document.createElement('div');
 
+			div.className = 'sc-player loading';
 
+			div.innerHTML = '<ol class="sc-artwork-list"></ol>\n'+
 
+				'<div class="sc-info"><h3></h3><h4></h4><p></p><a class="sc-download">&raquo; Download &laquo;</a>\n'+
 
+				'	<div class="sc-info-close">X</div>\n'+
 
+				'</div>\n'+
 
+				'<div class="sc-controls">\n'+
 
+				'	<div class="sc-play">Play</div>\n'+
 
+				'</div>\n'+
 
+				'<ol class="sc-trackslist">'+ _li(hash, len) +'</ol>\n'+
 
+				'<div class="sc-info-toggle">Info</div>\n'+
 
+				'<div class="sc-time-indicators">\n'+
 
+				'	<span class="sc-position"></span>&nbsp;|&nbsp;<span class="sc-duration"></span>\n'+
 
+				'</div>\n'+
 
+				'<div class="sc-scrubber">\n'+
 
+				'	<div class="sc-volume-slider">\n'+
 
+				'		<span class="sc-volume-status" style="width: '+ (SC.Volume * 100) +'%;"></span>\n'+
 
+				'	</div>\n'+
 
+				'	<div class="sc-time-span">\n'+
 
+				'		<div class="sc-buffer"></div>\n'+
 
+				'		<div class="sc-played"></div>\n'+
 
+				'		<div class="sc-waveform-container"></div>\n'+
 
+				'	</div>\n'+
 
+				'</div>';
 
+		if (hash && len) {
 
+			div.id = 'sc-obj_'+ hash;
 
+			if (!SC['Global']) {
 
+				SC['Object'][hash] = { Volume: SC.Volume, Progress: 0 }
 
+				div.addEventListener('click', onClickHandler, false);
 
+			} else {
 
+				SC['Object'][hash] = SC;
 
+			}
 
+		}
 
+		return catchKeyElements('player', div);
 
+	}
 
+	
+	function catchKeyElements(name, _CN_) {
 
+		switch(name) {
 
+			case 'player':
 
+				_CN_['_artwork_']    = _CN_.querySelector('.sc-artwork-list');
 
+				_CN_['_info_']       = _CN_.querySelector('.sc-info');
 
+				_CN_['_button_']     = _CN_.querySelector('.sc-controls').firstElementChild;
 
+				_CN_['_trackslist_'] = _CN_.querySelector('.sc-trackslist');
 
+				_CN_['_volume_']     = _CN_.querySelector('.sc-volume-slider');
 
+				_CN_['_waveform_']   = _CN_.querySelector('.sc-waveform-container');
 
+				_CN_['_buffer_']     = _CN_.querySelector('.sc-buffer');
 
+				_CN_['_progress_']   = _CN_.querySelector('.sc-played');
 
+				_CN_['_duration_']   = _CN_.querySelector('.sc-duration');
 
+				_CN_['_position_']   = _CN_.querySelector('.sc-position');
 
+				break;
 
+			case 'track':
 
+				_CN_['_duration_']   = _CN_.querySelector('.sc-track-duration');
 
+				_CN_['_title_']      = _CN_.querySelector('.sc-track-title');
 
+		}
 
+		
+		return _CN_;
 
+	}
 
+	
+	function updateTrackInfo(node, track) {
 
+		var artwork = track.artwork_url || track.user.avatar_url;
 
+		if (artwork && !/\/(?:default_avatar_|avatars-000044695144-c5ssgx-)/.test(artwork)) {
 
+			if (node['_artwork_'].clientWidth > 100) {
 
+				var s = findBestMatch([200, 250, 300, 500], node['_artwork_'].clientWidth);
 
+				artwork = artwork.replace('-large', '-t'+ s +'x'+ s +'')
 
+			};
 
+			(node['_artwork_'].firstElementChild || node['_artwork_'].appendChild( document.createElement('img'))).src = artwork;
 
+		}
 
+		node['_info_'].children[0].innerHTML = '<a href="'+ track.permalink_url +'">'+ track.title +'</a>';
 
+		node['_info_'].children[1].innerHTML = 'by <a href="'+ track.user.permalink_url +'">'+ track.user.username +'</a>';
 
+		node['_info_'].children[2].innerHTML = (track.description || 'no Description');
 
+		node['_info_'].children[3].href      = (track.downloadable ? track.download_url : track.stream_url);
 
+		// update the track duration in the progress bar
 
+		node['_duration_'].textContent = timeCalc(track.duration);
 
+		node['_position_'].textContent = '00.00';
 
+		// put the waveform into the progress bar
 
+		(node['_waveform_'].firstElementChild || node['_waveform_'].appendChild( document.createElement('img'))).src = track.waveform_url;
 
+	}
 
+	
+	function findBestMatch(list, toMatch) {
 
+		var item, i = 0, len = list.length;
 
+		while (i < len && (item = list[i]) < toMatch)
 
+			i++;
 
+		return item;
 
+	}
 
+	function timeCalc(secn) {
 
+		var s, m, h;
 
+			s = Math.floor(secn) % 60;
 
+			m = Math.floor(secn / 60) % 60;
 
+			h = Math.floor(secn / (60 * 60));
 
+			
+		return (h > 0 ? h +'.' : '') + (m < 10 && m > -1 ? '0'+ m : m) +'.'+ (s < 10 && s > -1 ? '0'+ s : s);
 
+	}
 
+	function genGroupId() {
 
+		var n = Math.round(Math.random() * 12345679);
 
+		while (n in SC['Object']) n++;
 
+		return (SC['Object'][n] = n);
 
+	}
 
+	if (!('preventDefault' in Event.prototype)) {
 
+		Event.prototype.preventDefault = function() {
 
+			this.returnValue = false;
 
+		};
 
+	}
 
+})();

+ 5 - 3
sites/all/themes/gui/perfarttimeline/js/libs/soundcloudcustomplayer/js/pa-sc-player.js
View File 

@@ -313,17 +313,19 @@
 
                 },
 
                 headers: {
 
                   "accept" : "application/json; charset=utf-8",
 
-                  "Content-Type" : "application/x-www-form-urlencoded",
 
-                  "Authorization": "OAuth 965bd4363fdd909723749b003be67125"
 
+                  "Content-Type" : "application/x-www-form-urlencoded"
 
                 }
 
+              }).done(function (data) {
 
+                console.log('Token', data);
 
               });
 
 
+
 
               // $.ajax({
 
               //   "dataType": "json",
 
               //   "url": apiUrl,
 
               //   "data": {},
 
               //   "headers": {
 
-              //     "Authorization": "OAuth " + apiKey
 
+              //     "Authorization": "OAuth bb68647335a47f104a86dcddf4e70fa8"
 
               //   },
 
               //   "success": function(data) {
 
               //     // log('data loaded', link.url, data);

+ 12 - 6
sites/all/themes/gui/perfarttimeline/js/script.js
View File 

@@ -42,8 +42,8 @@ Drupal.behaviors.init_theme.attach = function (context) {
 
 Drupal.behaviors.init_timeline = {};
 
 Drupal.behaviors.init_timeline.attach = function (context) {
 
 
-  $.paScPlayer.defaults.onDomReady = null;
 
-  $.paScPlayer.defaults.loadArtworks = 0;
 
+  // $.paScPlayer.defaults.onDomReady = null;
 
+  // $.paScPlayer.defaults.loadArtworks = 0;
 
 
   if($('html').is('.oldie'))
 
   {
 
@@ -1440,12 +1440,18 @@ Drupal.behaviors.init_timeline.attach = function (context) {
 
     var $container = $container || $('body');
 
     var ap = ap || false;
 
     // console.log('_initPaScPlayer');
 
-    $.paScPlayer.stopAll();
 
+    // $.paScPlayer.stopAll();
 
     var $links = $('a[rel="soundcloud"]', $container);
 
-    // console.log('$links', $links);
 
+    // // console.log('$links', $links);
 
     if($links.size()){
 
-      $links.parents('.field-item').find('span.ext').remove();
 
-      $links.paScPlayer({autoplay:ap});
 
+    //   $links.parents('.field-item').find('span.ext').remove();
 
+    //   $links.paScPlayer({autoplay:ap});
 
+    /* add players for each link */
 
+    for ( var i = 0; i < $links.length; i++ ) {
 
+      $links[i].parentNode.replaceChild(
 
+          SCPurePlayer.create($links[i]), $links[i]
 
+      );
 
+    }
 
     }
 
   }

+ 6 - 3
sites/all/themes/gui/perfarttimeline/perfarttimeline.info
View File 

@@ -13,7 +13,9 @@ stylesheets[all][] = "css/normalize.css"
 
 stylesheets[all][] = "fonts/museo_webfont_kit/MyFontsWebfontsKit.css"
 
 stylesheets[all][] = "js/libs/timeline/timeline.css"
 
 stylesheets[all][] = "js/libs/jquery.jscrollpane.css"
 
-stylesheets[all][] = ""js/libs/soundcloudcustomplayer/css/pa-sc-player.css""
 
+; stylesheets[all][] = "js/libs/soundcloudcustomplayer/css/pa-sc-player.css"
 
+stylesheets[all][] = "js/libs/soundcloud-pure-player/css/sc-player-standard/structure-horizontal.css"
 
+stylesheets[all][] = "js/libs/soundcloud-pure-player/css/sc-player-standard/colors-blue.css"
 
 stylesheets[all][] = "css/listnav.css"
 
 stylesheets[all][] = "css/styles.css"
 
 ; non-semantic helper classes
 
@@ -28,8 +30,9 @@ scripts[] = "js/libs/jquery.mousewheel.js"
 
 scripts[] = "js/libs/mwheelIntent.js"
 
 ;scripts[] = "js/libs/grid/jquery.grid.js"
 
 scripts[] = "js/libs/jquery.history.js"
 
-scripts[] = "js/libs/soundcloudcustomplayer/js/soundcloud.player.api.js"
 
-scripts[] = "js/libs/soundcloudcustomplayer/js/pa-sc-player.js"
 
+; scripts[] = "js/libs/soundcloudcustomplayer/js/soundcloud.player.api.js"
 
+; scripts[] = "js/libs/soundcloudcustomplayer/js/pa-sc-player.js"
 
+scripts[] = "js/libs/soundcloud-pure-player/js/sc-player.js"
 
 scripts[] = "js/libs/jquery.listnav-2.1.js"
 
 scripts[] = "js/libs/jquery-cookie-master/jquery.cookie.js"
 
 scripts[] = "js/script.js"

Some files were not shown because too many files changed in this diff