Merge pull request #92 from hyperaudio/90-vimeo-support

ha lite 2.0.18 and vimeo support

wp-hyperaudio/hyperaudio-admin.php

@@ -184,17 +184,20 @@ function hyperaudio_options_page()
     </code>
     </p>
 
-    <p>When defining the source of your media using the <code>src</code> attribute you will need to use embed versions for YouTube and SoundCloud.</p>
+    <p>When defining the source of your media using the <code>src</code> attribute you will need to use embed versions of the URL for YouTube, Vimeo and SoundCloud.</p>
     <p>For example:<p>
     <p><code>https://www.youtube.com/embed/xLcsdc823dg</code></p>
     <p>or</p>
+    <p><code>https://player.vimeo.com/video/749606407</code></p>
+    <p>or</p>
     <p><code>https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/730479133&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true</code> *</p>
     <p>* Grab the snippet of code from the SoundCloud page containing the file you're interested in, clicking on Share and then Embed.</p>
     <p>You can define various other attributes including:</p>
     <p>
       <table>
       <tr><th>attribute</th><th>example value</th><th>function</th></tr>
       <tr><td><code>width</code></td><td><code>100%</code></td><td>set the width of the transcript + media holder</td></tr>
+      <tr><td><code>height</code></td><td><code>100%</code></td><td>set the height of the media holder</td></tr>
       <tr><td><code>transcript-height</code></td><td><code>700px</code></td><td>set the height of the transcript itself</td></tr>
       <tr><td><code>media-height</code></td><td><code>640px</code></td><td>set the height of the audio or video</td></tr>
       <tr><td><code>font-family</code></td><td><code>Arial, Helvetica, sans-serif;</code></td><td>set the font family of the transcript</td></tr>

wp-hyperaudio/hyperaudio.php

@@ -3,7 +3,7 @@
 * Plugin Name: Official Hyperaudio Plugin
 * Plugin URI: https://hyper.audio
 * Description: Hyperaudio Interactive Transcript Player
-* Version: 1.0.1
+* Version: 1.0.11
 * Author: Mark Boas
 * Author URI: http://hyper.audio
 **/
@@ -21,6 +21,7 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
 
   // defaults
   $width = '100%';
+  $height = '100%';
   $transcriptHeight = '600px';
   $mediaHeight = '';
   //$fontfamily = '"Palatino Linotype", "Book Antiqua", Palatino, serif';
@@ -36,12 +37,12 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
 
   if (isset($atts['src'])) $src = esc_html__($atts['src']);
   if (isset($atts['width'])) $width = $atts['width'];
+  if (isset($atts['height'])) $height = $atts['height'];
   if (isset($atts['transcript-height'])) $transcriptHeight = $atts['transcript-height'];
   if (isset($atts['media-height'])) $mediaHeight = $atts['media-height'];
   if (isset($atts['font-family'])) $fontfamily = $atts['font-family'];
   if (isset($atts['id'])) $transcriptid = $atts['id'];
 
-
   if (isset($atts['captions'])) $captionsOn = $atts['captions'];
   if (isset($atts['caption-max'])) $captionMaxLength = $atts['caption-max'];
   if (isset($atts['caption-min'])) $captionMinLength = $atts['caption-min'];
@@ -52,7 +53,6 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
   if (isset($atts['show-active'])) $showActive = $atts['show-active'];
 
 
-
   $transcript = preg_replace( "/\r|\n/", "", $transcript);
 
   $transcript = str_replace("<br />", "", $transcript);
@@ -159,8 +159,9 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
     } else {
       $o .= '<div class="iframe-container"><iframe id="hyperplayer'.$id.'" class="hyperaudio-player iframe-video" width="'.$width.'" data-player-type="youtube" frameborder="no" allow="autoplay" src="'.$src.'?enablejsapi=1"></iframe></div>';
     }
+  } elseif (strpos(strtolower($src), 'vimeo.com') !== false) {
+    $o .= '<iframe id="hyperplayer'.$id.'" class="hyperaudio-player" data-player-type="vimeo" src="'.$src.'" width="'.$width.'" height="'.$height.'" frameborder="no" allowfullscreen allow="autoplay; encrypted-media"></iframe><script src="https://player.vimeo.com/api/player.js"></script>';
   } elseif (strpos(strtolower($src), 'soundcloud.com') !== false) {
-    //$o .= '<iframe id="hyperplayer" data-player-type="soundcloud" width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="'.$src.'&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>';
     $o .= '<iframe id="hyperplayer'.$id.'" class="hyperaudio-player" data-player-type="soundcloud" scrolling="no" frameborder="no" allow="autoplay" src="'.$src.'"></iframe><script src="https://w.soundcloud.com/player/api.js"></script>';
   } elseif (strpos(strtolower($src), '.mp3') !== false) {
     $o .= '<audio id="hyperplayer'.$id.'" class="hyperaudio-player" style="position:relative; width:'.$width.'" src="'.$src.'" controls></audio>';
@@ -176,8 +177,6 @@ function hyperaudio_shortcode_handler($atts, $transcript, $tag)
 
   $o .='</div>';
 
-  //<iframe allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" src="https://www.youtube.com/embed/EAmmUIEsN9A?html5=1&amp;rel=0&amp;modestbranding=1&amp;iv_load_policy=3&amp;disablekb=1&amp;showinfo=0&amp;origin=https%3A%2F%2Fhyperaud.io&amp;controls=0&amp;wmode=opaque&amp;enablejsapi=1&amp;widgetid=1" id="widget2" width="100%" height="100%" frameborder="0"></iframe>
-
  $o .='<div id="'.$transcriptid.'" class="hyperaudio-transcript" style="overflow-y:scroll; width:'.$width.'; height:'.$transcriptHeight.'; position:relative; border-style:dashed; border-width: 1px; border-color:#999; padding: 8px">'.$transcript.'</div><div style="text-align:right; font-size:65%; margin-top: -16px; line-height: 1.0; font-weight: 600; font-family: Work Sans, Helvetica, Arial, sans-serif;"><a href="https://hyper.audio">A Hyperaudio Production</a></div>';
 
 

wp-hyperaudio/js/hyperaudio-lite.js

@@ -1,5 +1,5 @@
 /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
-/*! Version 2.0.17 */
+/*! Version 2.0.18 */
 
 'use strict';
 
@@ -53,6 +53,35 @@ function soundcloudPlayer(instance) {
   }
 }
 
+function vimeoPlayer(instance) {
+  const tag = document.createElement('script');
+
+
+  const iframe = document.querySelector('iframe');
+    this.player = new Vimeo.Player(iframe);
+    this.player.setCurrentTime(0)
+    this.player.ready().then(instance.checkPlayHead);
+
+  this.getTime = () => {
+    return new Promise((resolve) => {
+      resolve(this.player.getCurrentTime());
+    });
+  }
+
+  this.setTime = (seconds) => {
+    this.player.setCurrentTime(seconds);
+  }
+
+  this.play = () => {
+    this.player.play();
+  }
+
+  this.pause = () => {
+    this.player.pause();
+  }
+}
+
+
 function youtubePlayer(instance) {
   const tag = document.createElement('script');
   tag.id = 'iframe-demo';
@@ -105,7 +134,8 @@ function youtubePlayer(instance) {
 const hyperaudioPlayerOptions = {
   "native": nativePlayer,
   "soundcloud": soundcloudPlayer,
-  "youtube": youtubePlayer
+  "youtube": youtubePlayer,
+  "vimeo": vimeoPlayer
 }
 
 function hyperaudioPlayer(playerType, instance) {
@@ -587,4 +617,4 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = { HyperaudioLite };
 }
 
-//export default HyperaudioLite;
+//export default HyperaudioLite;