diff --git a/includes/clientside.js b/includes/clientside.js index 9ac6881..d826f95 100644 --- a/includes/clientside.js +++ b/includes/clientside.js @@ -23,17 +23,18 @@ function checkYouTube() { if ( data.items[0] == null ) { return; } else { - clearInterval(keepListening); - - // this only runs if the above if statement goes to the else var vidURL = 'https://www.youtube.com/embed/' + data.items[0].id.videoId + '?autoplay=1&color=white'; + + jQuery('#wunrav-youtube-embed-slideout').css('display', 'block'); jQuery('#wunrav-youtube-embed-iframe').attr('src', vidURL); jQuery('#wunrav-youtube-embed-iframe').css('display', 'inline-block'); jQuery('#wunrav-youtube-embed-offair').remove(); + + clearInterval(keepListening); } }); - }, 1500); + }, 1700); return; } diff --git a/includes/live-feed-cookie.js b/includes/live-feed-cookie.js index a0def94..961d640 100644 --- a/includes/live-feed-cookie.js +++ b/includes/live-feed-cookie.js @@ -2,7 +2,7 @@ // if a user closes the slideout the cookie tells the browser not to slide out again. var $ = jQuery; -if ( ! $.cookie.indexOf('SubdueLivefeedSlideout=') ) { +if ( document.cookie.indexOf('SubdueLivefeedSlideout=') >= 0 ) { $(document).ready(function(){ setTimeout(function(){ $('#slideout-button').prop('checked', true); }, 6000); diff --git a/includes/serverside.php b/includes/serverside.php index a028cf9..85c8bae 100644 --- a/includes/serverside.php +++ b/includes/serverside.php @@ -3,7 +3,7 @@ Plugin Name: YouTube Live Streaming Auto Embed Description: Detects when a YouTube account is live streaming and creates an embeded video for the stream using a shortcode. (Supports YouTube APIv3) Plugin URI: https://github.com/webunraveling/wunrav-youtube-live-streaming-embed -Version: 0.2.1 +Version: 1.0.0 Author: Jason Raveling Author URI: https://webunraveling.com */ @@ -11,47 +11,35 @@ class WunravEmbedYoutubeLiveStreaming { - public $pluginSlug; + public $pluginSlug = 'wunrav-youtube-live-embed'; public $jsonResponse; // pure server response public $objectResponse; // response decoded as object + public $getAddress = "https://www.googleapis.com/youtube/v3/search?"; // address to request GET public $queryData; // query values as an array - public $getAddress; // address to request GET public $getQuery; // data to request, encoded public $queryString; // Address + Data to request - public $part; - public $eventType; - public $type; + // args for API query + public $part = 'id,snippet'; + public $eventType = 'live'; + public $type = 'video'; - public $embed_width; - public $embed_height; + public $embed_width = 800; + public $embed_height = 450; public $live_video_id; public $options; // options entered into wp-admin form public function __construct() { - - $this->pluginSlug = 'wunrav-live-youtube-embed'; - - // settings for API query - $this->part = "id,snippet"; - $this->eventType = "live"; - $this->type = "video"; - $this->getAddress = "https://www.googleapis.com/youtube/v3/search?"; - - // settings for embed - $this->embed_width = "800"; - $this->embed_height = "450"; - register_deactivation_hook( __FILE__, array($this, 'deactivate') ); - add_shortcode( 'live-youtube', array($this, 'shortcode') ); - add_action( 'wp_head', array($this, 'alert') ); + add_shortcode( 'youtube-live', array($this, 'shortcode') ); add_action( 'wp_head', array($this, 'loadScripts') ); + add_action( 'wp_head', array($this, 'alert') ); add_action( 'admin_menu', array($this, 'admin_menu_init') ); add_action( 'admin_init', array($this, 'admin_page_init') ); add_filter( 'cron_schedules', array($this, 'addWPCronSchedule') ); @@ -82,7 +70,7 @@ public function admin_page_create() echo '
'; echo '

YouTube Auto Live Embed

'; - echo '

To use this plugin, just place the [live-youtube] shortcode in the page or post you would like your live feed to appear. Instructions on how to setup this plugin are available on GitHub.

'; + echo '

To use this plugin, just place the [youtube-live] shortcode in the page or post you would like your live feed to appear. Instructions on how to setup this plugin are available on GitHub.

'; if ( $this->isTesting() ) { echo '

NOTE: Your testing account is enabled. Your "on-air" alert will always be active while testing is enabled.

'; } @@ -422,18 +410,28 @@ public function apiKey_testing_callback() /************************************************** ************** FRONT END ************************* - ************************************************** - * Begin using the info to output embed code or a - * default message if no live feed is occuring *************************************************/ public function shortcode() { - if ( $this->isLive() ) { - echo $this->embedCode(); - } else { - /* allow user in put here eventually, using wp_editor().*/ - $out = '

We aren\'t live quite yet. If you\'re expecting us to stream soon, refresh the page in a moment.

'; + printf('', + $this->embed_width, // iframe width + $this->embed_height, // iframe height + ($this->useJS() ? ' style="display:none;"' : ''), // hide it since JS will reveal when live + ($this->useJS() ? '' : '//youtube.com/embed/' . $this->live_video_id . '?autoplay=1&color=white') + ); + + if ( !$this->isLive() ) { + + // off air message... one day this will be in WP admin + echo '
'; + echo '

We aren\'t live quite yet.

'; + if ( $this->useJS() ) { + echo '

As soon as we start, our live stream will appear.

'; + } else { + echo '

If you\'re expecting us to start soon, refresh the page in a moment.

'; + } + echo '
'; } echo $this->debugging(); @@ -522,7 +520,7 @@ public function queryIt() $this->jsonResponse = file_get_contents($this->queryString); // pure server response $this->objectResponse = json_decode($this->jsonResponse); // decode as object - $this->live_video_id = $this->objectResponse->items[0]->id->videoId; + $this->live_video_id = ( isset($this->objectResponse->items[0]->id->videoId) ? $this->objectResponse->items[0]->id->videoId : '' ); if ( $this->useJS() ) { @@ -532,7 +530,6 @@ public function queryIt() add_action( 'wunrav-youtube-hook', array($this, 'doWPCron') ); } - } public function isLive() @@ -544,30 +541,6 @@ public function isLive() } } - public function embedCode() - { - if ( ! $this->useJS() ) { - - $embed = << - -EOT; - - } else { - - $embed = '

We aren\'t live streaming quite yet. As soon as we go live, the video will appear.

'; - $embed .= ''; - - } - - return $embed; - } - public function addWPCronSchedule() { $schedules['wunrav-30seconds'] = array( @@ -580,24 +553,18 @@ public function addWPCronSchedule() public function doWPCron() { + // Only used when JS is enabled. Using WP cron to put JSON into a file + // that the JS will use. file_put_contents(dirname(__FILE__, 2) . '/channel.json', $this->jsonResponse); } - // creates a slideout alert on every page public function alert() { - if ( $this->isLive() || $this->isTesting() ) { - - /*************************** - * SLIDEOUT - **************************/ + global $post; - // creates a cookie to stop the alert from taking focus every time the page is loaded - $out = ''; - - // lets do the work - $out .= ''; - $out .= '
'; + if ( ! has_shortcode($post->post_content, 'youtube-live') ) { + $out = ''; + $out .= '
isLive() ? '' : ' style="display:none;"' ) . '>'; $out .= '
'; $out .= '
'; $out .= '

' . $this->options['alertTitle'] . '

'; @@ -609,6 +576,8 @@ public function alert() $out .= '
'; echo $out; + } else { + return; } } @@ -616,8 +585,12 @@ public function loadScripts() { wp_enqueue_style('wunrav-youtube-live-embed-style', plugins_url('wunrav-youtube-live-embed/includes/stylesheets/css/style.css'), __FILE__); - if ( $this->useJS() ) { + if ( $this->isLive() || $this->isTesting() ) { + wp_enqueue_script('wunrav-youtube-live-embed-cookie', plugins_url('wunrav-youtube-live-embed/includes/live-feed-cookie.js'), __FILE__); + } + if ( $this->useJS() ) { + // // Make this script work with the plugin wp_enqueue_script('wunrav-youtube-live-embed-clientside', plugins_url('wunrav-youtube-live-embed/includes/clientside.js'), __FILE__); diff --git a/includes/stylesheets/scss/style.scss b/includes/stylesheets/scss/style.scss index ab2c03e..f43a505 100644 --- a/includes/stylesheets/scss/style.scss +++ b/includes/stylesheets/scss/style.scss @@ -109,3 +109,8 @@ input[type=checkbox]#slideout-button { } } } + +@media only screen and (min-width: 1030px ) { + +} +