{"id":18069453,"url":"https://github.com/melvincarvalho/video","last_synced_at":"2026-02-08T02:10:16.557Z","repository":{"id":34597325,"uuid":"38545023","full_name":"melvincarvalho/video","owner":"melvincarvalho","description":"video app for SoLiD platform","archived":false,"fork":false,"pushed_at":"2020-01-22T22:59:54.000Z","size":2933,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T13:15:58.787Z","etag":null,"topics":["solid","solid-app"],"latest_commit_sha":null,"homepage":"https://melvincarvalho.github.io/video/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/melvincarvalho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-04T19:20:44.000Z","updated_at":"2020-01-22T22:59:56.000Z","dependencies_parsed_at":"2022-09-03T06:40:18.225Z","dependency_job_id":null,"html_url":"https://github.com/melvincarvalho/video","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melvincarvalho%2Fvideo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melvincarvalho%2Fvideo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melvincarvalho%2Fvideo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/melvincarvalho%2Fvideo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/melvincarvalho","download_url":"https://codeload.github.com/melvincarvalho/video/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361805,"owners_count":20926654,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["solid","solid-app"],"created_at":"2024-10-31T08:10:17.951Z","updated_at":"2026-02-08T02:10:16.491Z","avatar_url":"https://github.com/melvincarvalho.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"on hold\n\n# video\n\n[![Join the chat at https://gitter.im/melvincarvalho/video](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/melvincarvalho/video?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nvideo app for Solid platform\n\nRunning live here: https://melvincarvalho.github.io/video/\n\nQuick Start for contributors\n----------------------------\n\n```\n$ git clone git://github.com/melvincarvalho/video\n$ cd contacts\n$ sudo npm -g install bower\n$ bower install\n```\n\n# Tutorial\n\n# Chapter 3 - Solid Video\n\n![](https://melvincarvalho.gitbooks.io/solid-tutorials/content/video.png)\n\n## Introduction\n\nIn 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.\n\n*What you will learn*\n\n* How to read and write video URLs to a Pod\n* How to embed video in a page\n* How to add a sidebar\n* How to add a menu bar\n* How to display modal dialogs\n* How to add a DOAP project file\n\n\n## The App\n\nThe 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.\n\nThe data format used for storing a video in a file here is:\n\n```html\n    \u003c#this\u003e \u003chttp://rdfs.org/sioc/ns#content\u003e \"content\" .\n```\n\nThe 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:\n\n```JavaScript\n  $scope.fetchVideo = function() {\n    f.nowOrWhenFetched($scope.storageURI, undefined, function(ok, body) {\n      var video = g.any($rdf.sym($scope.storageURI + '#this'), SIOC('content'))\n      $scope.setVideo(video)\n    });\n  };\n```\n\nThe 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/\u003cid\u003e`.\n\n```JavaScript\n    var height = Math.round(( width * 3 ) / 4)\n    var iframe = '\u003ciframe width=\"' + width + '\" height=\"' + height +\n                 '\" src=\"'+uri+'\"\u003e\u003c/iframe\u003e'\n    $('#video').empty().append(iframe)\n```\n\nWhile 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.\n\n```html\n    \u003c!-- menu --\u003e\n    \u003cdiv class=\"card\"\u003e\n      \u003cdiv class=\"toolbar\"\u003e\n        \u003cdiv class=\"toolbar__left mr+++\"\u003e\n          \u003cbutton class=\"btn btn--l btn--black btn--icon\" lx-ripple\u003e\n            \u003ci class=\"mdi mdi-menu\"\u003e\u003c/i\u003e\n          \u003c/button\u003e\n        \u003c/div\u003e\n        \u003cspan class=\"toolbar__label fs-title\"\u003eVideos\u003c/span\u003e\n        \u003cdiv class=\"toolbar__right\"\u003e\n          \u003clx-dropdown position=\"right\" from-top\u003e\n            \u003cbutton class=\"btn btn--l btn--black btn--icon\" lx-ripple lx-dropdown-toggle\u003e\n              \u003ci class=\"mdi mdi-dots-vertical\"\u003e\u003c/i\u003e\n            \u003c/button\u003e\n            \u003clx-dropdown-menu\u003e\n              \u003cul\u003e\n                \u003cli\u003e\u003ca ng-click=\"openDialog('about')\" class=\"dropdown-link\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/lx-dropdown-menu\u003e\n          \u003c/lx-dropdown\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- end menu --\u003e\n```\n\nThe 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.\n\n```JavaScript\n  $scope.openDialog = function(elem) {\n    LxDialogService.open(elem)\n    $(document).keyup(function(e) {\n      if (e.keyCode===27) {\n        LxDialogService.close(elem)\n      }\n    });\n  };\n```\n\nThe sidebar is created using flexbox and is shown only if the is enough space on the screen.\n\n```html\n      \u003c!-- sidebar --\u003e\n      \u003cdiv flex-item=\"2\" flex-item-order=\"1\"\u003e\n        \u003cdiv class=\"sidebar sidebar--shown\" ng-class=\"{'sidebar--shown': isVisible()}\"\u003e\n          \u003cdiv class=\"sidebar-menu\"\u003e\n            \u003cul\u003e\n              \u003cli\u003e\u003ca class=\"sidebar-menu__link\"\u003eSidebar\u003c/a\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003c!-- end sidebar --\u003e\n```\n\nFurther description of the UI is out of scope of this tutorial, but there each element is well documented elsewhere.\n\nTo 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.  \n\nThe [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\n\n```html\n  \u003cmeta href=\"doap.ttl#this\" rel=\"http://www.w3.org/ns/solid/app#configuration\"\u003e\n```\n\nIn the file you will find descriptions of the solid app:\n\n```html\n\u003c#this\u003e\n    a \u003chttp://usefulinc.com/ns/doap#Project\u003e, \u003chttp://www.w3.org/ns/solid/app#Configuration\u003e ;\n    \u003chttp://usefulinc.com/ns/doap#description\u003e \"A Video Saving for the Solid platform\" ;\n    \u003chttp://usefulinc.com/ns/doap#download-page\u003e \u003chttps://melvincarvalho.github.io/video/\u003e ;\n    \u003chttp://usefulinc.com/ns/doap#homepage\u003e \u003chttps://melvincarvalho.github.io/video/\u003e ;\n    \u003chttp://usefulinc.com/ns/doap#license\u003e \"mit\" ;\n    \u003chttp://usefulinc.com/ns/doap#maintainer\u003e \u003chttp://melvincarvalho.com/#me\u003e ;\n    \u003chttp://usefulinc.com/ns/doap#name\u003e \"Video\" ;\n    \u003chttp://usefulinc.com/ns/doap#shortdesc\u003e \"A Video App for the Solid platform\" ;\n    \u003chttp://usefulinc.com/ns/doap#shortname\u003e \"Video\" ;\n    \u003chttp://www.w3.org/ns/solid/app#description\u003e \"A Video App for the Solid platform\" ;\n    \u003chttp://www.w3.org/ns/solid/app#homepage\u003e \u003chttps://melvincarvalho.github.io/video/\u003e ;\n    \u003chttp://www.w3.org/ns/solid/app#icon\u003e \u003chttp://melvincarvalho.github.io/video/images/icon.png\u003e ;\n    \u003chttp://www.w3.org/ns/solid/app#name\u003e \"Video\" .\n```\n\nThis enables linked data app stores to process your app, copy and install it to new spaces.\n\nWhen all this is combined you will see a running something like:\n\n  [Live Demo](http://melvincarvalho.github.io/video/)\n\n# Summary\n\nIn 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.\n\n## See Also\n\n* [Source Code](https://github.com/melvincarvalho/video)\n* [Live Demo](http://melvincarvalho.github.io/video/)\n* [SIOC](http://rdfs.org/sioc/spec/)\n* [How to get started with CSS flexbox](http://www.paulund.co.uk/css-flexbox)\n* [manifest.json](https://developer.chrome.com/extensions/manifest)\n* [DOAP](https://github.com/edumbill/doap/wiki)\n* [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelvincarvalho%2Fvideo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmelvincarvalho%2Fvideo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmelvincarvalho%2Fvideo/lists"}