zen-audio-player / zen-audio-player.github.io Goto Github PK

1. submit a PR here https://github.com/up-for-grabs/up-for-grabs.net
2. inspired by https://github.com/formly-js/angular-formly/issues?utf8=%E2%9C%93&q=label%3Afirst-timers-only+

The next tests need to be sending many different URL forms & user behaviors validating the JS object player which represents the YouTube player object that gets embedded and determine if the video is playing, also lots of error checking tests.

TODO:

• Verify sponsor me images (good link, proper alt text, correct dimensions, etc.)
• Verify TrackJS token is loaded
• Verify JS dependencies are loaded correctly
  • jquery, youtube iframe API, TrackJS
  • google analytics/keen
• Functional tests, ie: simulating user behavior
• coverage for #146

Try to log GA events for errors, video titles, sizes, channels, categories, etc.

Is it possible to dynamically change the tweet based on the YouTube video? The default message can be as is

ie: I'm listening to XYZ on #ZenAudioPlayer

Don't want to clump data with my personal domain

Just like #72 - but blocked on #47

They're willing to sponsor us since we're open source.

• Create a trial account
• Get a token
• Add token
• Add the dependency (bower install --save trackjs)
• After 30 days if it's useful, email the team for an account upgrade

The extension is open source, just need to fork and make a PR. Can probably reuse the youtube script here: https://github.com/david-sabata/web-scrobbler/blob/947f46bb4e8155ed0f65c8a8c82f28c879286e91/connectors/v2/youtube.js

Also need to update this list: https://github.com/david-sabata/web-scrobbler/blob/947f46bb4e8155ed0f65c8a8c82f28c879286e91/core/connectors.js

Should make a new repo... Based off of the youtube one: https://gist.github.com/shakeelmohamed/46d1d2bcbcb8adcc8171

Then reopen #11

Our current logo is... well it's just text and that's not an ideal logo, especially as a favicon.

I may do this myself, but I'm posting for visibility 👀

We need this for BrowserStack before we can use them

Requirements:

• Add a smaller heading (h3/h4) at the bottom of the page saying "Sponsored By"
• Vertically stack any images with links back to the company's website, all images should be the same width, probably 400px since that's a common number for the rest of the site

Browserstack logo:

• First version could be generating it manually using browser-badge This is very broken, look at what it generated using their example matrix!
  
• Second version could be writing tests using Testling for true CI, which addresses testling is dead, we need another solution here to address #6 also

Current known matrix:

• Best functionality
  • Chrome: Mac, Windows
  • Firefox: Mac, Windows
  • IE/Edge: Windows
• Janky functionality
  • Chrome: Android
  • Safari: Mac, iOS

Just need to retrieve results from the API, and hide any images - then make the links do some cool redirection to Zen Audio Player by passing the YouTube video URL as a querystring parameter.

We basically have 0 docs right now, a wiki would be nice 😄
Maybe we even make a separate repo just for docs? Then we can have zen-audio-player.github.io/docs be a valid URL

If the demo link fails, meaning there's a problem with JS/YouTube's API, the URL ends up looking like http://zen-audio-player.github.io/?v=koJv-j1usoI?v=koJv-j1usoI or something really strange. Just need to do a simple indexOf() check somewhere - or improve error handling.. maybe needs a giant try/catch somewhere

Have it ready w/ a prepopulated tweet and #ZenAudioPlayer

When/if this happens:

• buy domain name
• Create cloudflare account
• Configure DNS
• Setup CNAME file
• Update all URLs in code
• Update the Chrome Last.fm extension with the new URL - in progress: web-scrobbler/web-scrobbler#909
• Update the Chrome extension with the new URL - zen-audio-player/extension-chrome#19
• Update YouTube API key to allow the new domain

Some discussion on how to do this, it's not going to be just JS though http://stackoverflow.com/questions/12672480/capture-mac-media-control-keys-in-a-chrome-extension

API docs: https://developer.chrome.com/extensions/commands

for sharing

Since the logo no longer says "Zen Audio Player" we need to add that text as a header under the logo.
The code for this is basically what was removed from index.html with 48ca66b

If we add hyperlinks to any URLs in the video description the experience will be much better.

The links should follow the form: <a href="http://example.com" target="_blank"> so the link opens in a new window/tab.

Can be a really concise statement, but needs to be in the splash page

TODO:

• Try to get the best possible functionality on Android, autoplay will not work, by design.
• On iOS, and other mobile user agents display a message saying we don't support mobile browsers - since iOS will show videos in full screen, by design. see comments in #38

Major bugs on Android

OS:
Windows 10 Professional

Browsers affected:
Chrome, Firefox (all that I tested)

How to repro:

Method 1

1. Load up the index page
2. Input a video id
3. Hit search.
4. Refresh the page

Method 2

1. Copy the URL from an already loaded page (do steps 1-3 above to get the URL)
2. Paste in a new tab/window.

Expected behaviour:
Pause button to be displayed and function correctly on page load when a video id has already been provided.

Displayed behaviour:
Video will start playing but the controls will still show the play button. - In Firefox hitting play/pause a couple times with get the button into the correct state. In Chrome nothing happens, this may be to do with the console errors about XSS that are coming through though..

Currently, if the query is xyz it will be redirected to http://zen-audio-player.github.io/?v=%20%20%20xyz which tries to parse %20%20%20xyz as the video ID, which is invalid.

This is using firefox 38.0.

JavaScript 1.6's for-each-in loops are deprecated; consider using ES6 for-of instead ScriptSurrogate.js:345:209
ReferenceError: $ is not defined everything.js:153:0
ReferenceError: ga is not defined everything.js:138:12

Using Microsoft Edge, the demo link doesn't do anything. The URL clearly changes, but it just dies (could be a race condition with jQuery loading before the YouTube API). There are no JavaScript console errors.

edit: Non-Windows users can get free VMs from Microsoft's website! https://dev.windows.com/en-us/microsoft-edge/tools/vms/

The mini-player controls are no longer visible. The proper fix is implementing all of the buttons/controls using HTML buttons, then hide the video player entirely. Doing this would probably fix #5 also

Might need to pull in icons for play/pause/stop/etc buttons from another place since primer's are limited, font awesome should suffice

YouTube has a very aggressive iOS API, it forces the player to full screen mode!:

In Safari on OS X, the play/pause button doesn't update when playing
It might just be a race condition introduced by a3ec13f:

Browserstack is an awesome browser testing service, and they're free for open source projects!

• Contact them to get a "free" account
• create an account
• get the account upgraded (email has been sent)
• Learn how their API works (it looks like we'll need to migrate from Zombie to Selenium - Node.js guide)
• Define 3 baseline tests
• Add a step to Travis CI (on the fork): https://www.browserstack.com/automate/continuous-integration
• Merge progress
• Define missing test cases
• Implement missing test cases

The only way to seek currently is to show the player and do it there. We already have a great slider for volume, we can steal most of that logic for this

A # in the URL breaks all functionality.

Repro:

1. Right click the demo link and copy it (ie: http://zen-audio-player.github.io/#)
2. Go to that URL
3. Click the demo link
4. You'll be at http://zen-audio-player.github.io/#?v=koJv-j1usoI but nothing will happen

🐋

There's some strange environment issues on Windows that require C++ compilers for the native compilation of the zombie dependency....

So, I think the best solution is to switch to PhantomJS, there's a mocha test runner that should be helpful also

Priority level 1

• Create keen.io account
• Have keen.io log as much data as GA has currently
• Follow these guides: media analytics, data enrichment, data collection, data analysis
• Decide between keen-js & keen-tracking - looks like tracking is not ready for GA, keen-js it is!
• Get Keen to log GA-like demographics data
• Add an event for when the tweet button is clicked to log share stats
• Remove GA
• Find a way to export GA to keen.io (maybe follow Moz's guide)

Priority level 2

• Create a new repo for Keen dashboards with a gh-pages branch: https://github.com/zen-audio-player/stats
• Example dashboard more here
• data viz tutorial
• Start building keen.io dashboards - see current progress here
• Add table for showing popular songs/artists by parsing video titles
• Add table for showing common errors
• chart for search vs. video ID vs. URL
• Video duration chart

I've built a really nice GA dashboard, it would be really cool to show these stats publicly via keen.io.

What happens:

1. We get the video description error
2. Some elements "reload"
3. We get the correct error
4. The 🎵 icon shows up where the title should be (but it's an invalid video ID so there is no title)
5. The time shows up!

What should happen:

1. We get the correct error

Repro steps:

1. Navigate to https://zen-audio-player.github.io/?v=test
2. Watch in amazement 😲

• Line 3 of the LICENSE file has my name where it should say "Zen Audio Player".
• Should we remove the Created by @_Shakeel line from the website? If yes, can we embed some kind of automatically updated list of contributors?

The lib is at http://primercss.io/

Can probably show it in a collapsed div, just like youtube does beneath the video. It probably need to be eval'd as HTML

This becomes significantly more useful with a CLI, which will need to become it's own repository...

Ex: zenyoutube https://youtube.com/...

The tricky part is escaping slashes... maybe try quoted URLs
Ex:

open http://shakeelmohamed.com/zen-youtube-audio-player/?v=https://www.youtube.com/watch?v=koJv-j1usoI

Example of what works on OS X - at least with oh-my-zsh, the URL is automatically decoded when pasted:

open http://shakeelmohamed.com/zen-youtube-audio-player/\?v\=https://www.youtube.com/watch\?v\=koJv-j1usoI

maybe just make a node package

Need to do several things for the chrome extension.

See this milestone for details: https://github.com/shakeelmohamed/zen-youtube-chrome/milestones/Gotta%20get%20these%20things%20done

When a video finishes, the play/pause button should return to play, then when play/pause is clicked it should restart the video.

Just like #72 - but blocked on #26

Grab the logo from here: https://keen.io/blog/43496487388/identity-crisis-an-evolution-of-our-brand

Things to investigate:

• What does a playlist URL look like?
• What does an embedded playlist look like?
• How does the YouTube iframe API work w/ playlists?

It sucks when you reload the page and the video/song starts over from the beginning. We can do this a few different ways: URL, cookies, or the super awesome HTML5 local storage API.

edit:

An implementation might look something like the following, but with functions doing the 2 tasks:

1. upsert the time in window.sessionStorage
2. restore the player time, via player.seekTo()

diff --git a/js/everything.js b/js/everything.js
index e273a1a..eedc2ab 100644
--- a/js/everything.js
+++ b/js/everything.js
@@ -173,6 +173,15 @@ function updatePlayerTime() {
     $("#currentTime").text(cleanTime(player.getCurrentTime()));
     // TODO: after the video loads, player.getDuration() may have changed +/- 1
     $("#totalTime").text(cleanTime(player.getDuration()));
+
+    /**
+     * Store the current video's time, every 100ms as defined by
+     * by the setInterval() timer in onPlayerReady().
+     */
+    var videoID = getCurrentVideoID();
+    if (window.sessionStorage && videoID) {
+        window.sessionStorage[videoID] = player.getCurrentTime();
+    }
 }

 // Lock for updating the volume
@@ -342,6 +351,11 @@ $(function() {
     if (currentVideoID) {
         $("#v").attr("value", currentVideoID);
         getVideoDescription(currentVideoID);
+
+        if (window.sessionStorage && window.sessionStorage.hasOwnProperty(currentVideoID)) {
+            // TODO: verify that window.sessionStorage[currentVideoID] is an integer, else noop
+            player.seekTo(window.sessionStorage[currentVideoID]);
+        }
     }

     // Hide the demo link if playing the demo video's audio

The current timeout of 1 second makes the button seem unresponsive. And if you click the button during the timeout, the click won't be registered.

We can either experiment with setting the timeout lower or implement some logic to switch between the play and pause button some other way (using setInterval and PlayerState?) .

The logo is ironically too large & distracting in the readme

I've been thinking about how we can implement Soundcloud support as seamlessly as possible. @monicacheung did a ton of great work in getting this process started, but I think the next step is breaking out Soundcloud support into it's own repo.

• I've created a new repo: zen-audio-player/soundcloud
• The beauty of GitHub Pages allows us to have the url https://ZenPlayer.audio/soundcloud, which now has a holding page
• With a dedicated repo, we can create separate JS files for working Soundcloud without worrying about clobbering the YouTube code. (I'm mainly concerned with the hackiness of wrapParseVideoID() in zap-common.js)
• In this repo, under the search box we can add a set of radio buttons to determine where to route the request (ie: default to YouTube, and have Soundcloud as an option).
• Breaking things out like this will make adding support for other services easier.

Options for both playlists, and single tracks would be cool.

• Figure out how to use the soundcloud JS widget API
• Figure out how to dynamically change the soundcloud track
• Add support to the searchbox for a soundcloud URL
• Update parseYoutubeVideoID() to have an else if condition for soundcloud URLS
• Rename parseYoutubeVideoID() to something more generic, and updated all uses of the function.
• Add support for pulling a soundcloud URL from the URL, ie: https://zen-audio-player.github.io/?v=https%3A%2F%2Fsoundcloud.com%2Fuser%2Ftrack)
• Figure out how to hide the player
• Figure out how to hook into the play/pause controls
• Figure out how to hook into the volume controls
• Set a "mode" for YouTube vs. soundcloud to prevent the play/pause/volume/show/hide controls from affecting the wrong player
• Test it out on a few browsers