https://github.com/melvincarvalho/video
video app for SoLiD platform
https://github.com/melvincarvalho/video
solid solid-app
Last synced: 3 months ago
JSON representation
video app for SoLiD platform
- Host: GitHub
- URL: https://github.com/melvincarvalho/video
- Owner: melvincarvalho
- License: mit
- Created: 2015-07-04T19:20:44.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-01-22T22:59:54.000Z (over 5 years ago)
- Last Synced: 2025-04-04T13:15:58.787Z (6 months ago)
- Topics: solid, solid-app
- Language: HTML
- Homepage: https://melvincarvalho.github.io/video/
- Size: 2.8 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
on hold
# video
[](https://gitter.im/melvincarvalho/video?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
video app for Solid platform
Running live here: https://melvincarvalho.github.io/video/
Quick Start for contributors
----------------------------
```
$ git clone git://github.com/melvincarvalho/video
$ cd contacts
$ sudo npm -g install bower
$ bower install
```
# Tutorial
# Chapter 3 - Solid Video
## Introduction
In this tutorial we will cover how to load and save data video links to a Personal Online Datastore (Pod) and display it on screen. A slightly more sophisticated UI will also be used.
*What you will learn*
* How to read and write video URLs to a Pod
* How to embed video in a page
* How to add a sidebar
* How to add a menu bar
* How to display modal dialogs
* How to add a DOAP project file
## The App
The video app follows the model of the previous clipboard app but adds a few more features to the UI and allows embedding of a video element via an iframe. A demo and the source code can be found in the footnotes.
The data format used for storing a video in a file here is:
```html
<#this> "content" .
```
The predicate here is an HTTP URI that uses the [SIOC](http://rdfs.org/sioc/spec/) vocabulary. In this case the content is an embeddable video URL (as a string). This is fetched after login using the code:
```JavaScript
$scope.fetchVideo = function() {
f.nowOrWhenFetched($scope.storageURI, undefined, function(ok, body) {
var video = g.any($rdf.sym($scope.storageURI + '#this'), SIOC('content'))
$scope.setVideo(video)
});
};
```
The setVideo function simply embeds the video file in an iframe element after determining the width and height (for mobile optimization). Note: that because of [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) not all video URLs are embeddable in an iframe. For example with youtube videos they URL should take the form `/embed/`.
```JavaScript
var height = Math.round(( width * 3 ) / 4)
var iframe = ''
$('#video').empty().append(iframe)
```
While previous apps have been a single canvas, this app adds a few more features to allow extensibility. Flexbox is used to add a header and side bar. There are many [guides](http://www.paulund.co.uk/css-flexbox) to flexbox online, so it wont be covered here.
```html
```
The code snippet above shows the addition of a menu toolbar. In this case some of the lumx effects are used, including dropdown, ripple, toggle and menu. A dropdown is added that triggers an about model using the `openDialog('about')` function. The code for this brings to the top the "about" div and allows it to close on escape.
```JavaScript
$scope.openDialog = function(elem) {
LxDialogService.open(elem)
$(document).keyup(function(e) {
if (e.keyCode===27) {
LxDialogService.close(elem)
}
});
};
```
The sidebar is created using flexbox and is shown only if the is enough space on the screen.
```html
```
Further description of the UI is out of scope of this tutorial, but there each element is well documented elsewhere.
To wrap this app up a [manifest.json](https://developer.chrome.com/extensions/manifest) file is added so that machines are able to tell more information about it. One particularly useful function in the chrome browser is to use the menu option "Create application shortcuts" which will package webpage as an app, that can be run on desktop or mobile.
The [DOAP](https://github.com/edumbill/doap/wiki) ("Description of a Project") system is used to add linked data fields to an app. It is stored in doap.ttl which gh pages conveniently serves using the mime type `text/turtle`. Autodiscovery is performed using the line
```html
```
In the file you will find descriptions of the solid app:
```html
<#this>
a , ;
"A Video Saving for the Solid platform" ;
;
;
"mit" ;
;
"Video" ;
"A Video App for the Solid platform" ;
"Video" ;
"A Video App for the Solid platform" ;
;
;
"Video" .
```
This enables linked data app stores to process your app, copy and install it to new spaces.
When all this is combined you will see a running something like:
[Live Demo](http://melvincarvalho.github.io/video/)
# Summary
In this tutorial we showed how to embed video in a page. Some more advanced UI techniques such as sidebar, menu and dialog boxes were covered. We also showed how to make your app sematnically rich using maifests, DOAP and auto discovery. In the next tutorial we will expand on these patterns and create a more complex game type app.
## See Also
* [Source Code](https://github.com/melvincarvalho/video)
* [Live Demo](http://melvincarvalho.github.io/video/)
* [SIOC](http://rdfs.org/sioc/spec/)
* [How to get started with CSS flexbox](http://www.paulund.co.uk/css-flexbox)
* [manifest.json](https://developer.chrome.com/extensions/manifest)
* [DOAP](https://github.com/edumbill/doap/wiki)
* [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)