...

Author: mr21

api/file.js

@@ -4,31 +4,49 @@
 
 var
 	extText = "srt-vtt",
-	extMedia = "mp3-mp4-mpeg-ogg-wav-webm-mpg-weba-ogm"
+	extMedia = "mp3-mp4-mpeg-ogg-wav-webm-mpg-weba-ogm",
+	extAudio = "mp3-ogg-wav-weba"
 ;
 
 api.file = function( file ) {
 	var
-		name = file.name,
-		ind = name.lastIndexOf( "." ),
-		ext = name.substr( ind + 1 ).toLowerCase()
+		indA,
+		indB,
+		ext,
+		path = file.name || file
 	;
 
-	this.dataFile = file;
-	this.name = name.substr( 0, ind ),
-	this.extension = ext;
+	this.isLocal = !!file.name;
+
+	// Name.
+	indA = path.lastIndexOf( "/" );
+	indB = path.lastIndexOf( "." );
+	this.name = path.substr( indA + 1, indB - indA - 1 );
+
+	// Extension / type.
+	this.extension = ext = path.substr( indB + 1 ).toLowerCase();
 	this.isText = extText.indexOf( ext ) > -1;
 	this.isMedia = extMedia.indexOf( ext ) > -1;
-	this.mediaType = file.type.substr( 0, file.type.indexOf( "/" ) );7
+	this.mediaType = extAudio.indexOf( ext ) > -1 ? "audio" : "video";
+
+	if ( this.isLocal ) {
+		this.dataFile = file;
+	} else {
+		this.url = file;
+	}
 };
 
 api.file.prototype = {
 	createURL: function() {
-		this.url = URL.createObjectURL( this.dataFile );
+		if ( this.isLocal ) {
+			this.url = URL.createObjectURL( this.dataFile );
+		}
 		return this;
 	},
 	revokeURL: function() {
-		URL.revokeObjectURL( this.url );
+		if ( this.isLocal ) {
+			URL.revokeObjectURL( this.url );
+		}
 		return this;
 	}
 };

api/main.js

@@ -3,7 +3,7 @@
 (function() {
 
 window.api = {
-	version: "0.5.2",
+	version: "0.6.0",
 
 	thumbnail: {}
 };

api/playlist.js

@@ -29,9 +29,9 @@ api.playlist = that = {
 			var
 				fileWrapper = new api.file( this ),
 				ext = fileWrapper.extension,
-				debug = "[" + fileWrapper.dataFile.type + "] [" + ext + "]"
+				debug = "[" + fileWrapper.mediaType + "] [" + ext + "]"
 			;
-			lg(fileWrapper)
+
 			if ( fileWrapper.isMedia ) {
 				fMediaWraps.push( fileWrapper );
 			} else if ( fileWrapper.isText ) {

api/video.js

@@ -12,6 +12,9 @@ var
 	jqVideoThumb = dom.ctrlThumbnailVideo
 ;
 
+video.crossOrigin = "use-credentials";
+jqVideoThumb[ 0 ].crossOrigin = "use-credentials";
+
 api.video = that = {
 
 	// Manipulating the src="" attribute.

css/playlist/list.scss

@@ -4,7 +4,7 @@
 		position: absolute;
 		overflow: auto;
 		width: 100%;
-		top: 40px;
+		top: 45px;
 		bottom: 0;
 
 		&:after {

css/playlist/nav.scss

@@ -5,14 +5,21 @@
 }
 
 .playlist nav {
-	padding: 12px 8px;
+	display: table;
+	width: 100%;
+	height: 45px;
 	background: #222;
 
-	* {
+	> * {
+		display: table-cell;
+		height: 100%;
+		padding: 0 10px;
 		vertical-align: middle;
 	}
 	.index {
+		white-space: nowrap;
 		font-size: 12px;
+		text-align: center;
 	}
 	.current {
 		font-weight: bold;
@@ -22,20 +29,32 @@
 			font-weight: normal;
 		}
 	}
-	.right {
-		float: right;
+	.input {
+		width: 100%;
+		background: #111;
 	}
-	.close {
-		margin-left: .1em;
-		margin-top: -.16em;
-		font-size: 2em;
+	input {
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		border: 0;
+		font-size: 18px;
+		color: inherit;
+		background: transparent;
+
+		&::-webkit-input-placeholder {
+			color: #444;
+		}
+	}
+	.right {
+		text-align: right;
+		white-space: nowrap;
 	}
 	.shuffle {
 		margin-right: .2em;
 	}
 	.repeat {
 		position: relative;
-		margin-top: -2px;
 
 		* {
 			display: none;
@@ -68,4 +87,8 @@
 			top: -4px;
 		}
 	}
+	.close {
+		margin-left: .5em;
+		font-size: 2em;
+	}
 }

css/playlist/playlist.scss

@@ -1,7 +1,7 @@
 .playlist {
 	width: 350px;
 	max-width: 100%;
-	min-width: 175px;
+	min-width: 250px;
 	border-left: 1px solid #222;
 	background: rgba( 0, 0, 0, .9 );
 	transition-duration: .3s;

dom.js

@@ -37,6 +37,8 @@ window.dom = {
 		playlistNav: $( ".playlist nav" ),
 			playlistNavIndex: $( ".playlist nav .current" ),
 			playlistNavTotal: $( ".playlist nav .total" ),
+			playlistForm: $( ".playlist nav form" ),
+			playlistInputURL: $( ".playlist nav input" ),
 			playlistShuffleBtn: $( ".playlist nav .shuffle" ),
 			playlistRepeatBtn: $( ".playlist nav .repeat" ),
 			playlistCloseBtn: $( ".playlist nav .close" ),

index.html

@@ -38,19 +38,24 @@
 		<input type="file" multiple/>
 		<div class="content">
 			<nav>
-				<span class="index">
+				<div class="index">
 					<span class="current"></span>
 					<span class="total"></span>
-				</span>
-				<span class="right">
+				</div>
+				<div class="input">
+					<form action="/" method="GET">
+						<input type="url" placeholder="http://... *.mp3 *.mp4"/>
+					</form>
+				</div>
+				<div class="right">
 					<i class="btn shuffle fa fa-fw fa-random"
 						data-jquery-element="tooltip"
 						data-tooltip-side="bottom"></i>
 					<i class="btn repeat fa fa-fw fa-retweet"
 						data-jquery-element="tooltip"
 						data-tooltip-side="bottom"><b></b></i>
-					<i class="btn close fa fa-fw fa-times"></i>
-				</span>
+					<i class="btn close fa fa-times"></i>
+				</div>
 			</nav>
 			<div class="list"></div>
 		</div>
@@ -228,6 +233,7 @@
 <script src="playlist/events/prevnextloop.js"></script>
 <script src="playlist/events/scroll.js"></script>
 <script src="playlist/events/inputfile.js"></script>
+<script src="playlist/events/inputtext.js"></script>
 
 <!-- Audio visualisations -->
 <script src="../visualisations/oscilloscope.js"></script>

playlist/events/inputtext.js

@@ -0,0 +1,22 @@
+"use strict";
+
+(function() {
+
+var
+	url = dom.playlistInputURL
+;
+
+// When we press Enter in the input.
+dom.playlistForm.submit( function() {
+	playlistUI.dragover( dom.screen );
+	api.playlist.addFiles( [ url.val() ], true );
+	url.val( "" );
+	return false;
+});
+
+// Don't interfere with all the keyboard's shorcuts.
+url.keydown( function( e ) {
+	e.stopPropagation();
+});
+
+})();

playlist/playlist-ui.js

@@ -111,6 +111,7 @@ window.playlistUI = that = {
 		jqToggleBtn[ 0 ].dataset.tooltipContent = "Show playlist";
 		showing = false;
 		api.screen.resizeFilename();
+		dom.playlistInputURL.blur();
 		Cookies.set( "playlistshow", showing, { expires: 365 } );
 		return that;
 	},