honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-videolibrary
History
Russell gove 1e20f20229 Dev (#114) 
* initialize

* wer

* asd

* ok

* COOOOL

* asd

* move most to panel

* switch to react-slick

* gOT cSS

* poseter

* asd

* Leave image until user selcte to play

* sdg

* qwe

* asd

* addiing back 3d carousel

* Added back 3d carousel

* coverflow working

* all 3 working

* fixup  linting

* Update README.md

* fix readme

* Update README.md

* got it working on rc0

* autoplay

* qwd

* rename Cpverflow to Coverflow

* cdn
qw

* SPHttpClient.configurations.v1

* as

* AS

* added instructions on merging existing github procjects

* added controls to set playerwidth and height

* Update README.md

fixup readme
 		2017-02-03 18:02:07 +02:00
..
.vscode Dev (#114) 2017-02-03 18:02:07 +02:00
config Dev (#114) 2017-02-03 18:02:07 +02:00
src Dev (#114) 2017-02-03 18:02:07 +02:00
typings Dev (#114) 2017-02-03 18:02:07 +02:00
.editorconfig Dev (#114) 2017-02-03 18:02:07 +02:00
.gitattributes Dev (#114) 2017-02-03 18:02:07 +02:00
.gitignore Dev (#114) 2017-02-03 18:02:07 +02:00
.npmignore Dev (#114) 2017-02-03 18:02:07 +02:00
.yo-rc.json Dev (#114) 2017-02-03 18:02:07 +02:00
README.md Dev (#114) 2017-02-03 18:02:07 +02:00
gulpfile.js Dev (#114) 2017-02-03 18:02:07 +02:00
package.json Dev (#114) 2017-02-03 18:02:07 +02:00
tsconfig.json Dev (#114) 2017-02-03 18:02:07 +02:00
typings.json Dev (#114) 2017-02-03 18:02:07 +02:00
videotst.njsproj Dev (#114) 2017-02-03 18:02:07 +02:00

README.md

React Video Library

Summary

A set of 3 SPFX webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick) to display videos stored on an O365 Video Channel. The idea being to display a carousel of the thumbnail images, and then when a user clicks on one of the thumbnails, replace the tumbnail with a video player and start the video up.

The first webpart used react-3d-carousel. The carousel looks great, but i found no way to swap out the image and replace it with a video player. This carousel would be fine for displayin a picture library though,

The second webpart used react-slick. The carousel is not as fancy as react-3d-carousel, but i was able to to swap out the image and replace it with a video player once a user clicked it. I had trouble with the css and getting the next and previous buttons to show. If you run the webpart, the buttons are there, they are just not visible.

Finally I tried reactjs-coverface. It has nice scrolling through the images withe the mousweheel, and some cool 3d effects. It was also simple to swap the image with a video player once a user clicked it (same code as react-slick). This is the best of the three for my purposes.

In the future I want to modify this webpart to link a Sharepoint list with the video channel so that users can enter additional metadata for the video and be anle to search/filter the videos using this metadata.

See also https://github.com/russgove/O365VideoSync. It's a console app that you can schedule to run to synchronize an Office 365 Video Channel with a sharepoint list (on prem or otherwise).

alt tag

Used SharePoint Framework Version

drop

Applies to

Prerequisites

React, react-3d-carousel reactjs-coverface react-slick

Solution

Solution Author(s)
react-VideoLibrary Russell Gove

Version history

Version Date Comments
0.1 December 31, 2016 Initial version

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • Clone this repository
  • in the command line run:
    • npm install
    • tsd install
    • gulp serve

Include any additional steps as needed.

Features

A set of 3 SPFX webparts that use different open-source carousels (react-3d-carousel, reactjs-coverface, and react-slick) to display videos stored on an O365 Video Channel.

Usage: