Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Twitch-Clip</title>
- <script src="/socket.io/socket.io.js"></script>
- <script src="https://code.jquery.com/jquery-3.2.1.min.js"
- integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
- <script src="//player.twitch.tv/js/embed/v1.js"></script>
- <style>
- #twitch-clip{
- top:50%;
- left:50%;
- width:400px;
- height:225px;
- margin-top:-9em;
- margin-left:-15em;
- border:1px solid #ccc;
- background-color:#f3f3f3;
- position:fixed;
- }
- </style>
- </head>
- <body style="background-color: transparent">
- <div id="twitch-clip" style="display: visible;">
- <iframe width="400" height="225" frameborder="0" scrolling="no" allowfullscreen="false" parent="localhost">
- </iframe>
- </div>
- </body>
- <script>
- 'use strict';
- //https://www.twitch.com/cosmos
- const socket = io.connect();
- const NORMALIZE_VOLUME = 1.0;
- const player = {
- jdiv: null,
- jiframe: null,
- controller: null
- };
- let is_playing = false;
- socket.on('connect', onConnect);
- socket.on("disconnect", onDisconnect);
- socket.on('twitch-clip-play', playerPlay);
- socket.on('twitch-clip-stop-hide', playerStopHide);
- // TODO: make clip volume command
- socket.on('twitch-clip-volume', playerVolume);
- socket.on('twitch-clip-is-player-playing', playerIsPlayerPlaying);
- function onConnect() {
- console.log("client Connected to server");
- }
- function onDisconnect() {
- console.log("client disconnected from server");
- }
- // Replace the 'twitch-player' element with an <iframe> and
- // call in $document ready to init player.
- function onTwitchAPIReady() {
- player.controller = new Twitch.Player('twitch-player', {
- width: '400',
- height: '225',
- channel: 'cosmos',
- autoplay: true
- });
- player.controller.addEventListener(Twitch.Player.READY, onPlayerReady);
- player.controller.addEventListener(Twitch.Player.PLAYING, onPlayerStateChange);
- player.controller.addEventListener(Twitch.Player.ENDED, onPlayerStateChange);
- }
- function onPlayerReady() {
- player.jdiv = $('#twitch-clip');
- playerStopHide();
- socket.emit('twitch-clip-ready');
- }
- function onPlayerStateChange(event) {
- if (player.controller.isPaused() !== true/*playing*/) {
- return;
- } else if (player.controller.getEnded() === true/*ended*/) {
- player.jdiv.hide();
- socket.emit('twitch-clip-ended');
- } else {
- // console.log(player.controller.getPlaybackStats()); // (Deprecated) Returns an object with statistics on the embedded video player and the current live stream or VOD. The format of the returned object is undefined.
- }
- }
- function playerPlay(options) {
- $('#twitch-clip iframe').attr({ src: `https://clips.twitch.tv/embed?clip=${options.parameters.videoId}&parent=${options.parameters.parent}` });
- player.jdiv.show();
- player.options = options;
- is_playing = true;
- }
- function playerVolume(options) {
- const volume = options.volume * NORMALIZE_VOLUME;
- player.controller.setVolume(volume * 0.01);
- }
- function playerStopHide() {
- $('#twitch-clip iframe').attr({ src: '' });
- player.jdiv.hide();
- is_playing = false;
- }
- function playerIsPlayerPlaying() {
- socket.emit('twitch-clip-is-player-playing', {
- is_playing: is_playing,
- options: player.options
- }, (data) => {
- // console.log(data); // data will be 'woot'
- });
- }
- $(document).ready(() => {
- onPlayerReady();
- ///$('#twitch-clip-player iframe').attr({src: 'https://clips.twitch.tv/embed?clip=AnimatedSpunkyEchidnaTakeNRG&parent=localhost'});
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement