API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jul 1st, 2015
524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.25 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <script>
  4. var streamerID = "DrachenLord_Offiziell";
  5. </script>
  6. <style>
  7. html, body {
  8. width: 100%;
  9. height: 100%;
  10. margin: 0px;
  11. padding: 0px;
  12. font-family: Segoe UI, Verdana, Helvecita, sans-serif;
  13. background: #000;
  14. }
  15.  
  16. div {
  17. font-family: Segoe UI, Verdana, Helvecita, sans-serif;
  18. }
  19.  
  20. #switcher {
  21. background: #aebcbf;
  22. background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 96%, #0a0809 100%);
  23. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(96%,#6e7774), color-stop(100%,#0a0809));
  24. background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 96%,#0a0809 100%);
  25. background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 96%,#0a0809 100%);
  26. background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 96%,#0a0809 100%);
  27. background: linear-gradient(to bottom, #aebcbf 0%,#6e7774 96%,#0a0809 100%);
  28. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
  29. height: 38px;
  30. width:100%;
  31. }
  32.  
  33. .input {
  34. float: left;
  35. color: #222;
  36. }
  37.  
  38. input {
  39. margin-left: 5px;
  40. border-top: 1px solid #555;
  41. border-left: 1px solid #444;
  42. border-bottom: 1px solid #333;
  43. border-right: 1px solid #444;
  44.  
  45. color: #fff;
  46. padding: 5px;
  47. height: 25px;
  48. border-radius: 6px;
  49. background: #2d2d2d;
  50. background: -moz-linear-gradient(top, #2d2d2d 5%, #565656 98%);
  51. background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#2d2d2d), color-stop(98%,#565656));
  52. background: -webkit-linear-gradient(top, #2d2d2d 5%,#565656 98%);
  53. background: -o-linear-gradient(top, #2d2d2d 5%,#565656 98%);
  54. background: -ms-linear-gradient(top, #2d2d2d 5%,#565656 98%);
  55. background: linear-gradient(to bottom, #2d2d2d 5%,#565656 98%);
  56. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#565656',GradientType=0 );
  57. }
  58.  
  59. input[type=button] {
  60. line-height: 5px;
  61. background: #565656;
  62. background: -moz-linear-gradient(top, #565656 2%, #2d2d2d 95%);
  63. background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#565656), color-stop(95%,#2d2d2d));
  64. background: -webkit-linear-gradient(top, #565656 2%,#2d2d2d 95%);
  65. background: -o-linear-gradient(top, #565656 2%,#2d2d2d 95%);
  66. background: -ms-linear-gradient(top, #565656 2%,#2d2d2d 95%);
  67. background: linear-gradient(to bottom, #565656 2%,#2d2d2d 95%);
  68. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#2d2d2d',GradientType=0 );
  69. }
  70.  
  71. input#streamerID {
  72. border-right: 0px !important;
  73. border-top-right-radius: 0px !important;
  74. border-bottom-right-radius: 0px !important;
  75. }
  76.  
  77. input#connect {
  78. border-left: 1px #222 !important;
  79. border-top-left-radius: 0px !important;
  80. border-bottom-left-radius: 0px !important;
  81. margin-left: 0px !important;
  82. }
  83.  
  84. #outer {
  85. height: calc(100% - 38px);
  86. }
  87.  
  88.  
  89. #switcher .info, #switcher .last {
  90. height: 27px;
  91. padding-top: 5px;
  92. padding-bottom: 5px;
  93. overflow: hidden;
  94. float: left;
  95. border-left: 1px solid #666;
  96. border-right: 1px solid #888;
  97. font-size: 10px;
  98. line-height: 11px;
  99. padding-left: 8px;
  100. padding-right: 8px;
  101. }
  102.  
  103. #switcher #connectionInfo {
  104. font-size: 12px;
  105. padding-top: 11px;
  106. padding-bottom: 0px;
  107. height: 25px;
  108. font-weight: bold;
  109. }
  110.  
  111. #switcher .last {
  112. border-right: 0px !important;
  113. line-height: 11px;
  114. }
  115.  
  116. .info img, .last img {
  117. margin-right: 3px;
  118. }
  119.  
  120. #connectionInfo img {
  121. float: left;
  122. }
  123.  
  124. #chat {
  125. background: #333;
  126. width: 350px;
  127.  
  128. height: 100%;
  129. float: right;
  130. }
  131.  
  132. #chat #top {
  133. height: 20px;
  134. width: 100%;
  135. color: #eee;
  136. background: #444;
  137. padding: 3px;
  138. }
  139.  
  140. #labelStreamer {
  141. font-size: 13px;
  142. }
  143.  
  144. #stream {
  145. float: left;
  146. width: calc(100% - 350px);
  147. height: 100%;
  148. }
  149.  
  150. #streamView
  151. {
  152. float: left;
  153. height: calc(100% - 50px);
  154. width: 100%;
  155. }
  156.  
  157. #streamBar {
  158. float:left;
  159. clear:both;
  160. width: 100%;
  161. height: 49px;
  162. background: #666;
  163. border-top: 1px solid #999;
  164. }
  165.  
  166. #streamBar .left
  167. {
  168. float: left;
  169. margin-left: 10px;
  170. }
  171.  
  172. #streamBar .right
  173. {
  174. float: right;
  175. margin-right: 10px;
  176. }
  177.  
  178. #streamBar .item {
  179. float: left;
  180. font-weight: bold;
  181. margin: 10px;
  182. color: #aaa;
  183. }
  184.  
  185. #streamBar img {
  186. float: left;
  187. margin-right: 5px;
  188. }
  189.  
  190. #chat ul {
  191. margin-left: 0px;
  192. padding-left: 0px;
  193. height: calc(100% - 10px);
  194. overflow-y: scroll;
  195. margin-top: 0px;
  196. margin-bottom: 0px;
  197. padding: 5px;
  198. }
  199.  
  200. #chat ul li a {
  201. color: #eee;
  202. text-decoration: none;
  203. }
  204.  
  205. #chat ul li {
  206. font-size: 11px;
  207. color: #999;
  208. float: left;
  209. clear: both;
  210. margin-left: 5px;
  211. margin-bottom:5px;
  212. padding-left: 0px;
  213. }
  214.  
  215. #chat ul li span {
  216. display: block;
  217. float: left;
  218. clear: none;
  219. width: calc(100% - 60px);
  220. }
  221.  
  222. #chat ul li img {
  223. margin-right: 5px;
  224. float: left;
  225. width: 30px;
  226. height: 30px;
  227. }
  228.  
  229. </style>
  230. <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  231. <script src="http://js.pusher.com/2.2/pusher.min.js"></script>
  232. <script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
  233. </head>
  234. <body>
  235. <script>
  236.  
  237. /*
  238. ws://ws-younow.pusher.com/app/d5b7447226fc2cd78dbb?protocol=7&client=js&version=2.2.4&flash=false
  239.  
  240. }*/
  241. </script>
  242. <div id="switcher">
  243. <div class="info">
  244. <div class="input"><span id="labelStreamer"></span> <input type="text" id="streamerID" /></div>
  245. <div class="input"><input type="button" id="connect" /></div>
  246. </div>
  247. <div class="info" id="connectionInfo"></div>
  248. <div class="last" id="streamerInfo"></div>
  249. </div>
  250. <div id="outer">
  251. <div id="stream">
  252. <div id="streamView"></div>
  253. <div id="streamBar"></div>
  254. </div>
  255. <div id="chat">
  256. <ul id="messages">
  257. </ul>
  258. </div>
  259. </div>
  260. <script>
  261. var streamerID = "DrachenLord_Offiziell";
  262.  
  263. var YouNowPlayer = function()
  264. {
  265. this.language = this.config["language"]["de_DE"];
  266. $('#labelStreamer').html(this.language["streamer"]);
  267. $('#connect').val(this.language["connect"]);
  268. this.disconnected();
  269. var self = this;
  270. setInterval(function(){self.tick();}, 1000);
  271. };
  272.  
  273. YouNowPlayer.prototype.connect = function(streamerID)
  274. {
  275. this.disconnect();
  276. $('#connectionInfo').html('<img src="'+this.config["icons"]["disconnected"]+'" />'+this.language["connecting"]);
  277. var self = this;
  278. $.ajax({
  279. url: 'http://www.younow.com/php/api/broadcast/info/curId=0/user='+streamerID,
  280. jsonp: "callback",
  281. dataType: "jsonp",
  282. success: function(json, b, c)
  283. {
  284. if (json["errorCode"] > 0)
  285. {
  286. self.failed("("+json["errorCode"]+") "+streamerID + " appears to be offline.");
  287. }
  288. else
  289. {
  290. self.connected(json);
  291. }
  292. }
  293. });
  294. };
  295.  
  296. YouNowPlayer.prototype.disconnect = function()
  297. {
  298. if (this.pusher != null)
  299. this.pusher.disconnect();
  300. this.disconnected();
  301. };
  302.  
  303. YouNowPlayer.prototype.disconnected = function()
  304. {
  305. $('#messages').html("");
  306. $('#streamView').html("");
  307. $('#streamBar').html("");
  308. $('#connectionInfo').html('<img src="'+this.config["icons"]["disconnected"]+'" />'+this.language["disconnected"]);
  309. $('#streamerInfo').html("");
  310. $('#top').html("");
  311. this.isConnected = false;
  312. };
  313.  
  314. YouNowPlayer.prototype.streamerData = {};
  315. YouNowPlayer.prototype.connected = function(streamerData)
  316. {
  317. $('#connectionInfo').html('<img src="'+this.config["icons"]["connected"]+'" />'+this.language["connected"]);
  318. this.streamerData = streamerData;
  319. console.log(this.streamerData);
  320.  
  321. var d = new Date();
  322. this.timeStart = d.getTime();
  323. this.duration = this.streamerData.length;
  324.  
  325. this.isConnected = true;
  326. this.tick();
  327.  
  328. flowplayer("streamView", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
  329. clip: {
  330. url: this.streamerData.media.stream,
  331. scaling: 'fit',
  332. provider: 'rtmp'
  333. },
  334. plugins: {
  335. rtmp: {
  336. url: "flowplayer.rtmp-3.2.13.swf",
  337. netConnectionUrl: 'rtmp://'+this.streamerData.media.host+this.streamerData.media.app
  338. },
  339. controls: {
  340. all: false,
  341. play: false,
  342. scrubber: false,
  343. mute: true,
  344. volume: true,
  345. fullscreen: true,
  346. }
  347. },
  348. canvas: {
  349. backgroundGradient: 'none'
  350. }
  351. });
  352. this.pusher = new Pusher('d5b7447226fc2cd78dbb', {cluster:"younow"});
  353. this.channel = this.pusher.subscribe("public-channel_"+this.streamerData.userId);
  354. var self = this;
  355. this.channel.bind('onLikes', function(data){
  356. self.streamerData.likes = data.message.likes;
  357. self.streamerData.viewers = data.message.viewers;
  358. });
  359. this.channel.bind('onViewers', function(data){
  360. self.streamerData.likes = data.message.likes;
  361. self.streamerData.viewers = data.message.viewers;
  362. });
  363. this.channel.bind('onChat', function(data){
  364. for (i = 0; i < data.message.comments.length; i++)
  365. self.addChatMessage(data.message.comments[i]);
  366. });
  367. };
  368.  
  369. YouNowPlayer.prototype.addChatMessage = function(message)
  370. {
  371. var wasBottom = false;
  372. if ($("#messages").scrollTop() > $("#messages")[0].scrollHeight - $("#messages").height() - 20)
  373. wasBottom = true;
  374. if ($('#messages').children().length > this.config.maxMessages - 1)
  375. $('#messages').children()[0].remove();
  376. $('#messages').append('<li><img src="http://cdn2.younow.com/php/api/channel/getImage/?channelId='+message.userId+'" height="30" /><span><strong><a href="http://www.younow.com/'+message.profileUrlString+'">'+message.name+' ('+message.userLevel+')</a>: </strong>'+message.comment+'</span></li>');
  377. if (wasBottom)
  378. {
  379. $("#messages").animate({ scrollTop: $("#messages")[0].scrollHeight}, 200)
  380. }
  381. };
  382.  
  383. YouNowPlayer.prototype.updateInfo = function()
  384. {
  385. var socialMedia = "";
  386. if (this.streamerData.user["facebookId"] != null)
  387. socialMedia += "<a href=\"http://www.facebook.com/"+this.streamerData.user.facebookId+"\"><img src=\""+this.config.icons.facebook+"\"></a>";
  388. if (this.streamerData.user["facebookUrl"] != null)
  389. socialMedia += "<a href=\""+this.streamerData.user.facebookUrl+"\"><img src=\""+this.config.icons.facebook+"\"></a>";
  390. if (this.streamerData.user["twitterHandle"] != null)
  391. socialMedia += "<a href=\"http://www.twitter.com/"+this.streamerData.user.twitterHandle+"\"><img src=\""+this.config.icons.twitter+"\"></a>";
  392. if (this.streamerData.user["youTubeUserName"] != null)
  393. socialMedia += "<a href=\"http://www.youtube.com/"+this.streamerData.user.youTubeUserName+"\"><img src=\""+this.config.icons.youtube+"\"></a>";
  394. $('#streamerInfo').html("<img style=\"float:left;\" height=\"28\" src=\"http://cdn2.younow.com/php/api/channel/getImage/?channelId="+this.streamerData['userId']+"\" />"+this.streamerData.country + " | <strong>"+this.streamerData.username+"</strong> ("+this.streamerData.user.userLevel+" | "+(Math.round((this.streamerData.userlevel%1)*100))+"% "+this.language["to"]+" "+(this.streamerData.user.userLevel+1)+") "+this.language["in"]+" #"+this.streamerData.tags[0]+"<br /><div style=\"float:left;\">"+socialMedia+"</div><div style=\"float:left;\"><img style=\"float:left;\" height=\"16\" src=\""+this.config.icons.coins+"\"><span style=\"margin-top:3px;float:left;\">"+this.streamerData.coins+"</span></div> <div style=\"margin-left:5px; float:left;\"><img style=\"float:left;\" height=\"16\" src=\""+this.config.icons.bars+"\"><span style=\"margin-top:3px;float:left;\">"+this.streamerData.barsEarned+"</span></div> ");
  395. $('#top').html(this.streamerData.viewers + " "+this.language["viewers"]);
  396. var hours = Math.floor(this.duration / (60 * 60));
  397. var minutes = Math.floor(this.duration / (60)) % 60;
  398. var seconds = this.duration % 60;
  399. var time = "";
  400. if (hours > 0) time += hours + ":";
  401. if (minutes > 9) time += minutes + ":";
  402. else time += "0"+minutes+":";
  403. if (seconds > 9) time += seconds;
  404. else time += "0"+seconds;
  405. $('#streamBar').html("<div class=\"left\"><div class=\"item\"><img src=\""+this.config.icons.likes+"\" />"+this.streamerData.likes+"</div><div class=\"item\"><img src=\""+this.config.icons.shares+"\" />"+this.streamerData.shares+"</div></div><div class=\"right\"><div class=\"item\"><img src=\""+this.config.icons.time+"\" />"+time+"</div><div class=\"item\"><img src=\""+this.config.icons.views+"\" />"+this.streamerData.viewers+"</div></div>");
  406. }
  407.  
  408. YouNowPlayer.prototype.failed = function(error)
  409. {
  410. this.disconnected();
  411. alert(error);
  412. };
  413.  
  414. YouNowPlayer.prototype.tick = function() {
  415. if (this.isConnected)
  416. {
  417. var d = new Date();
  418. this.duration = this.streamerData.length + Math.floor((d.getTime() - this.timeStart) / 1000);
  419. this.updateInfo();
  420. }
  421. };
  422.  
  423. YouNowPlayer.prototype.isConnected = false;
  424. YouNowPlayer.prototype.config = {
  425. maxMessages: 200,
  426. icons: {
  427. "disconnected": "http://png.findicons.com/files/icons/1581/silk/16/disconnect.png",
  428. "connected": "http://png.findicons.com/files/icons/1581/silk/16/connect.png",
  429. "youtube": "http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/16/Web-Youtube-alt-2-Metro-icon.png",
  430. "facebook": "http://icons.iconarchive.com/icons/danleech/simple/16/facebook-icon.png",
  431. "twitter": "http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/16/Web-Twitter-alt-2-Metro-icon.png",
  432. "googleplus": "http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/16/Web-Google-plus-alt-Metro-icon.png",
  433. "bars": "http://cdn2.younow.com/angularjsapp/src/assets/images/icons_v3/icon_bar_sm.png",
  434. "coins": "http://cdn2.younow.com/angularjsapp/src/assets/images/icons_v3/menu_user_coins1.png",
  435. "views": "http://icons.iconarchive.com/icons/custom-icon-design/mono-general-4/24/eye-icon.png",
  436. "time": "http://icons.iconarchive.com/icons/icons8/windows-8/24/Very-Basic-Clock-icon.png",
  437. "likes": "http://icons.iconarchive.com/icons/icons8/windows-8/24/Hands-Thumbs-Up-icon.png",
  438. "shares": "http://icons.iconarchive.com/icons/icons8/ios7/24/Very-Basic-Electric-Megaphone-Filled-icon.png",
  439. },
  440. language: {
  441. "de_DE": {
  442. "disconnected": "Nicht verbunden",
  443. "connecting": "Verbinden...",
  444. "connected": "Verbunden",
  445. "connect": "Verbinden",
  446. "streamer": "Streamer:",
  447. "to": "bis",
  448. "in": "in",
  449. "chat": "Chat",
  450. "users": "Benutzer",
  451. "viewers": "Zuschauer",
  452. "moderators": "Moderator(en)",
  453. "shares": "Teilung(en)",
  454. "likes": "Like(s)",
  455. }
  456. }
  457. };
  458.  
  459. var currentPlayer = null;
  460.  
  461. $(document).ready(function() {
  462. currentPlayer = new YouNowPlayer();
  463. $('#streamerID').val(streamerID);
  464. $('#connect').click(function(){
  465. currentPlayer.connect($('#streamerID').val());
  466. });
  467. });
  468. </script>
  469. </body>
  470. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!