Initial Commit

README.md

@@ -0,0 +1,20 @@
+Simple HTML5 Video Gallery Page
+===============================
+
+## Author
+* Andrew Houle
+* http://andyhoule.com
+
+## Requirements
+* SilverStripe minimum version 3.0+.
+* SortableGridField Module - https://github.com/UndefinedOffset/SortableGridField
+* Sublime Video - http://sublimevideo.net/
+
+## Installation
+* Requires SortableGridField module (see above).
+* Integrates with your Sublime Video account (Needed for the player).
+* Add the videogallery folder to your site's root.
+* Run http://yoursite.com/dev/build/?flush=1
+* Create a new videa gallery page. Setup config and upload files.
+
+

Video.php

@@ -0,0 +1,65 @@
+<?php
+
+class Video extends DataObject { 
+
+	static $db = array (
+		'SortOrder' => 'Int',
+		'Name' => 'Text',
+		'Description' => 'Text'
+	);
+
+	static $has_one = array (
+		'VideoPage' => 'VideoPage',
+		'Poster' => 'Image',
+		'MP4' => 'File',
+		'WEBM' => 'File',
+		'OGG' => 'File'
+	);
+
+	public static $default_sort = 'SortOrder Asc';
+
+	static $summary_fields = array( 
+		'Thumbnail' => 'Poster',
+		'Name' => 'Name',
+      	'Description' => 'Description'
+   	);
+
+	function canCreate($Member = null) { return true; }
+	function canEdit($Member = null) { return true; }
+	function canView($Member = null) { return true; }
+	function canDelete($Member = null) { return true; }
+
+	public function getCMSFields() {
+		$imgfield = UploadField::create("Poster")->setTitle("Cover Photo");
+        $imgfield->getValidator()->allowedExtensions = array("jpg","jpeg","gif","png");
+		$mp4field = UploadField::create("MP4")->setTitle("MP4 File");
+        $mp4field->getValidator()->allowedExtensions = array("mp4");
+        $webmfield = UploadField::create("WEBM")->setTitle("WEBM File");
+        $webmfield->getValidator()->allowedExtensions = array("webm");
+        $oggfield = UploadField::create("OGG")->setTitle("OGG File");
+        $oggfield->getValidator()->allowedExtensions = array("ogg");
+		return new FieldList(
+			TextField::create("Name"),
+			TextareaField::create("Description"),
+			$imgfield,
+			$mp4field,
+			$webmfield,
+			$oggfield
+		);
+	}
+
+	public function PhotoCropped($x=120,$y=68) { /* 16:9 Ratio */
+		 return $this->Poster()->CroppedImage($x,$y);
+	}
+
+	function  Thumbnail() {
+		$Image = $this->Poster();
+		if ( $Image ) 
+			return $Image->CMSThumbnail();
+		else 
+			return null;
+	}
+
+}
+
+?>

VideoPage.php

@@ -0,0 +1,53 @@
+<?php
+
+class VideoPage extends Page {
+
+	static $has_many = array (
+		'Videos' => 'Video'
+	);
+
+	static $icon = "mysite/icons/videopage";
+
+	public function getCMSFields() {
+		$fields = parent::getCMSFields();
+		$VideosGridFieldConfig = GridFieldConfig::create()->addComponents(
+			new GridFieldToolbarHeader(),
+			new GridFieldAddNewButton('toolbar-header-right'),
+			new GridFieldSortableHeader(),
+			new GridFieldDataColumns(),
+			new GridFieldPaginator(50),
+			new GridFieldEditButton(),
+			new GridFieldDeleteAction(),
+			new GridFieldDetailForm(),
+			new GridFieldSortableRows('SortOrder')
+		);
+		$VideosGridField = new GridField("Videos", "Videos", $this->Videos(), $VideosGridFieldConfig);
+		$fields->addFieldToTab("Root.Videos", $VideosGridField);
+		return $fields;
+	}
+
+}
+
+class VideoPage_Controller extends Page_Controller {
+
+	function init() {
+		parent::init();
+		Requirements::CSS('videogallery/css/videogallery.css');
+	}
+
+	public function HTML5Videos() {
+		$videosfiltered = new ArrayList();
+		$videos = $this->getComponents('Videos');
+		if($videos) {
+			foreach($videos AS $video) {
+				if( $video->getComponent('Poster')->exists() AND $video->getComponent('MP4')->exists() AND $video->getComponent('WEBM')->exists() AND $video->getComponent('OGG')->exists() ) {
+					$videosfiltered->push($video); 
+				}
+			}
+		}
+		return $videosfiltered;
+	}
+
+}
+
+?>

_config.php

@@ -0,0 +1,4 @@
+<?php
+
+// Extend allowable file uploads 
+File::$allowed_extensions[] = 'webm'; 

css/videogallery.css

@@ -0,0 +1,45 @@
+ul#videos {
+	margin: 0 0 20px 0;
+	padding: 0;
+}
+li.video {
+	border-bottom: 1px solid #ddd;
+	list-style: none;
+	margin: 0 0 25px 0;
+	padding: 0 0 20px 0;
+	overflow: hidden;
+	position: relative;
+}
+.video-poster {
+	position: relative;
+}
+span.play {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: -23px;
+	margin-left: -10px;
+	width: 0; 
+	height: 0; 
+	border-top: 20px solid transparent;
+	border-bottom: 20px solid transparent;
+	border-left: 20px solid rgba(255,255,255,.8);
+	text-indent: -9999px;
+}
+li:last-child.video {
+	border-bottom: none;
+	margin: 0;
+	padding: 0;
+}
+.video-poster {
+	float: left;
+	width: 175px;
+}
+.video-info {
+	margin-left: 195px;
+}
+#videos p {
+	margin: 0;
+}

templates/Layout/VideoPage.ss

@@ -0,0 +1,31 @@
+<% include SideBar %>
+<div class="content-container unit size3of4 lastUnit">
+	<article>
+		<h1>$Title</h1>
+		<div class="content"><% if Content %>$Content<% end_if %></div>
+		<% if HTML5Videos %>
+			<ul id="videos">
+		    	<% loop HTML5Videos %>
+		    		<li class="video">
+		    			<div class="video-poster">
+			    			<a href="#video-$ID" class="sublime" data-uid="video-$ID">
+						  		<img src="$PhotoCropped(160,90).URL" />
+						  		<span class="play">Play</span>
+							</a>
+							<video id="video-$ID" poster="$PhotoCropped(800,453).URL" width="800" height="453" title="$Name" style="display:none" data-uid="video-$ID" preload="none">
+								<source src="$MP4.URL" type='video/mp4' />
+							    <source src="$WEBM.URL" type='video/webm' />
+							    <source src="$OGG.URL" type='video/ogg' />
+							</video>
+						</div><!-- video-poster -->
+						<div class="video-info">
+							<% if Name %><h3><a href="#video-$ID" class="sublime" data-uid="video-$ID">$Name</a></h3><% end_if %>
+							<% if Description %><p>$Description</p><% end_if %>
+						</div><!-- video-info -->
+		    		</li><!-- video -->
+		    	<% end_loop %>
+		    </ul><!-- videos -->
+		<% end_if %>
+	</article>
+</div>
+