Initial commit

All the files necessary with comments in place. To do: make things
mobile friendly?

README.md

@@ -0,0 +1,42 @@
+# Zero-TV - As seen on [unattended.org](http://unattended.org/)!
+
+--------------------------------------------------------------------------------
+
+## About
+
+Zero-TV is a flexible background player created in JavaScript using [jQuery](https://jquery.com/) and the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) v3.
+
+At the time, I wasn't able to find a modern background player which could be customized, so I decided to make one with a focus on playlist control. The player reads a static playlist array, shuffles it then begins playing once loaded.
+
+The playlist is an array which supplies the `loadPlaylist` function and is stored in the following format:
+
+```JAVASCRIPT
+var playlist = [ 'Y62EgHvwa8k', '6ITD1tqXDII', 'rtChPB6NjJY' ];
+```
+
+There is one known [issue](#Troubleshooting) with this implementation if you are trying to load hundreds of videos. But for most cases I don't believe this should be a problem.
+
+--------------------------------------------------------------------------------
+
+ ## License
+This project is covered under a [MIT License](LICENSE.md). Hack it up, go bonkers.
+
+--------------------------------------------------------------------------------
+
+## Troubleshooting
+
+__*Some videos don't show or play.*__
+* Check your playlist array and ensure that it's properly formatted. Check the console for other issues, it may also give clues why something isn't working.
+* Some content authors may not want their videos to be embedded, are private or unavailable due to region restrictions. Use your own videos for best results.
+
+__*My playlist of 500+ videos looks good, but nothing plays.*__
+* When the playlist exceeds 145 items the player chokes and loops only the first video and refuses to play through the playlist. The YouTube Player API has no documentation on anything regarding any type of hard limits for the playlist size so I'm rather stumped by this one. Please enlighten me if you know of a solution or answer. Taking this from a static to dynamic format would probably solve this.
+
+__*I can't click or close the advertisements!*__
+* In the markup and styles there is a `#masking` layer which is placed over the entire window which captures an event for pausing and playing the video. You have a few options here:
+	* Modify or remove this from the HTML/CSS if you want users to interact.
+	* Use videos without ads.
+* Users logged in with a Google Play / YouTube Red subscription won't see these advertisements.
+
+__*All of these videos show up in my YouTube history!*__
+* Duh.

css/about.css

@@ -0,0 +1,86 @@
+#about {
+	z-index: 66;
+	background: #fff url(../svg/logo_zero_light.svg) no-repeat center/60%;
+	width: 100%;
+	position: absolute;
+	top: 0;
+	left: -150%;
+	right: 0;
+	bottom: 0;
+	-webkit-transition: left 0.35s ease-in-out;
+	transition: left 0.35s ease-in-out;
+}
+
+#about.visible {
+	left: 0px;
+	width: 100%;
+}
+
+#about article {
+	position: absolute;
+	padding: 2%;
+	width: 50%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+#about h1 {
+	font-style: italic;
+	font-size: 2.5em;
+	line-height: 1em;
+	margin: 0;
+	padding: 1% 0;
+}
+
+#about p {
+	font-family: 'Roboto Slab', serif;
+	font-size: 1.5em;
+	position: relative;
+}
+
+#about a {
+	color: #111;
+	text-decoration: none;
+	opacity: .8;
+}
+
+#about .close {
+	background: url(../svg/control_close.svg) center no-repeat;
+	opacity: .6;
+}
+
+#about .close:hover {
+	background: url(../svg/control_close.svg) center no-repeat;
+	opacity: 1;
+}
+
+#about .close, #about .close:hover {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 130px;
+	height: 130px;
+	float: left;
+	background-size: 96% auto;
+}
+
+#about .twitter {
+	background: url(../svg/logo_twitter.svg);
+}
+#about .github {
+	background: url(../svg/logo_github.svg);
+}
+
+#about .logo:hover {
+	opacity: 1;
+}
+
+#about .logo {
+	display: inline-block;
+	background-position: left;
+	background-repeat: no-repeat;
+	background-size: 1.3em 1.3em;
+	text-indent: 1.4em;
+}

css/base.css

@@ -0,0 +1,162 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400);
+@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400);
+
+body {
+	background: #111;
+	font-family: 'Roboto Condensed', sans-serif;
+	cursor: default;
+	overflow: hidden;
+	font-size: 100%;
+}
+
+::selection {
+	color: #f0f;
+  background: rgba(0,0,0,0);
+	opacity: 0;
+}
+
+::-moz-selection {
+	color: #f0f;
+  background: rgba(0,0,0,0);
+	opacity: 0;
+}
+
+#masking {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 5;
+	width: 100%;
+	height: 100%;
+}
+
+/************* menu */
+#menu {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 130px;
+	background: rgba(255,255,255,0.6);
+	z-index: 10;
+	opacity: 0;
+
+	transition: opacity .6s ease-in-out;
+	-webkit-transition: opacity .6s ease-in-out;
+}
+
+#menu:hover, #menu.visible {
+	opacity: 1;
+	transition: opacity .6s ease-in-out;
+	-webkit-transition: opacity .6s ease-in-out;
+}
+
+#menu ul, #menu li {
+	display: block;
+	list-style: none none;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+}
+#menu li {
+	float: left;
+}
+
+
+#playercontrols {
+	height: 130px;
+}
+
+/*************  */
+#zero {
+	background: rgba(255,255,255,0.6) url(../svg/logo_zero_off.svg) center no-repeat;
+	opacity: .7;
+}
+
+#zero:hover {
+	background: rgba(255,255,255,0.6) url(../svg/logo_zero_on.svg) center no-repeat;
+	opacity: .7;
+}
+
+#zero, #zero:hover {
+	transition: background .6s ease-in-out;
+	-webkit-transition: background .6s ease-in-out;
+}
+
+#zero, #zero:hover {
+	display: block;
+	width: 130px;
+	height: 130px;
+	float: left;
+	background-size: 96% auto;
+}
+
+#nowplaying {
+	height: 70px;
+	width: 100%;
+	font-size: 3.5em;
+	font-weight: bold;
+	overflow: hidden;
+	color: #111;
+}
+#nowplaying a:link, #nowplaying a:visited {
+	color: #111;
+	opacity: .7;
+}
+
+#nowplaying a:link {
+	background: url(../svg/icon_youtube_off.svg);
+
+}
+
+#nowplaying a:hover {
+	background: url(../svg/icon_youtube_on.svg);
+	color: #e62d27;
+	opacity: 1;
+
+}
+
+#nowplaying a:link, #nowplaying a:hover {
+	margin: 0 0 0 .2em;
+	padding: 0 0 0 1.2em;
+	text-decoration: none;
+	background-size: 1em 1em;
+	background-position: left;
+	background-repeat: no-repeat;
+	/* https://bugzilla.mozilla.org/show_bug.cgi?id=546052 */
+	transition: color .4s ease-in-out, background .4s ease-in-out;
+	-webkit-transition: color .4s ease-in-out, background .4s ease-in-out;
+}
+
+/************* tv|screen */
+
+#bezel {
+	z-index: 3;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #222 url(../svg/logo_zero_dark.svg) no-repeat center/60%;
+
+	transition: left 0.5s ease;
+	-webkit-transition: left 0.5s ease;
+}
+
+#bezel .screen {
+	opacity: 0;
+	transition: opacity .5s ease;
+	-webkit-transition: opacity .5s ease;
+}
+#bezel, .screen {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	transition: left 0.5s ease;
+	-webkit-transition: left 0.5s ease;
+}
+#bezel .screen.active {
+	opacity: 1;
+}
+#bezel .screen.inactive {
+	opacity: .5;
+}

css/controls.css

@@ -0,0 +1,75 @@
+/************* control buttons and metrics */
+#menu span, #menu h2 {
+	display: none;
+}
+
+.prevvid {
+	background: url(../svg/control_rw.svg);
+}
+.playvid.true {
+	background: url(../svg/control_pause.svg);
+}
+.playvid {
+	background: url(../svg/control_play.svg);
+}
+.nextvid {
+	background: url(../svg/control_ff.svg);
+}
+.mute {
+	background: url(../svg/sound_on.svg);
+}
+.mute.true {
+	background: url(../svg/sound_off.svg);
+}
+.loopvid {
+	background: url(../svg/control_loop.svg);
+}
+
+#playercontrols .ctrl:hover, .mute.true:hover {
+	opacity: 1;
+}
+
+#playercontrols .ctrl, .mute.true {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 40px 40px;
+	height: 60px;
+	width: 72px;
+	opacity: .7;
+}
+
+#playercontrols .mute, .mute.true, #playercontrols .loopvid {
+	background-size: 52px 40px;
+}
+
+/************* volume bar */
+#volumecontrol {
+	position: relative;
+	width: 205px;
+	height: 60px;
+	left: 20px;
+}
+
+.volumegutter {
+	transform: translateY(50%);
+	width: 200px;
+	height: 32px;
+	background-color: rgba(17,17,17,0.3);
+	z-index: 20;
+}
+
+.volumebar {
+	height: 100%;
+	border-right: rgba(255,255,255,0.8) 5px solid;
+	background-color: rgba(17,17,17,0.7);
+	z-index: 21;
+}
+
+.volumegutter:hover {
+	background-color: rgba(255,255,255, 0.6);
+}
+
+.volumebar:hover {
+	border-right: rgba(230,45,39,1) 5px solid;
+	background-color: rgba(17,17,17,.8);
+}