1245666 - implement link generator slideshow component

Status: RESOLVED FIXED

(Hello (Loop) :: Client, defect, P1)

Comment 1

[Chris Rafuse :crafuse]

Some candidates for implementation of slide show component:

Simple React Slideshow
Write your own.
Article: http://piotrf.pl/wrote/building-a-simple-slideshow-with-react-js
Demo: http://bl.ocks.org/piotrf/1b7b14b0c2bfbfe1f1ef
Try: http://codepen.io/SitePoint/pen/ZQWmoj
Code: https://github.com/piotrf/simple-react-slideshow 	
Code example: https://github.com/piotrf/simple-react-slideshow/blob/master/index.html
License: MIT


-----------------------------------------------------------------------
react-picture-show 1.4.0

Slideshow Component for React.js

Homepage: https://github.com/areusjs/react-picture-show

Platform: npm

Language: JavaScript

License: MIT

Keywords: react-component, slideshow, carousel

View on registry: https://www.npmjs.com/package/react-picture-show 


 Install: npm install react-picture-show
React Picture Show Build Status NPM version

A Bare bones slideshow component that handles transitions between slides and exposes control so that it is easy to decorate with other controls. 
Out of the box, it supports swiping to paginate, clicking left and right, and lasyloading slides

PictureShow Demo
installation
node

npm install react-picture-show

Usage
Basic

<PictureShow>
  <img src='http://...'/>
  <img src='http://...'/>
  <div>another thing</div>
  <img src='http://...'/>
  <img src='http://...'/>
</PictureShow>


---------------------------------------------------------------
apeman-react-slideshow 1.0.1
https://libraries.io/npm/apeman-react-slideshow

apeman react package for slideshow components.

Homepage: https://github.com/apeman-react-labo/apeman-react-slideshow#readme

Platform: npm

Language: JavaScript

License: MIT

Keywords: React, apeman, react-component, slideshow

Repository: https://github.com/apeman-react-labo/apeman-react-slideshow

View on registry: https://www.npmjs.com/package/apeman-react-slideshow

Install: npm install apeman-react-slideshow
apeman-react-slideshow

Build Status Code Climate Code Coverage npm Version

apeman react package for slideshow components.

Installation

$ npm install apeman-react-slideshow --save

Demo

Live demo is hosted on GitHub Pages: http://apeman-react-labo.github.io/apeman-react-slideshow/demo/demo.html


USAGE
"use strict";

const React = require('react'),
    apemanReactSlideshow = require('apeman-react-slideshow');

const ApSlideshow = apemanReactSlideshow.ApSlideshow,
    ApSlideshowStyle = apemanReactSlideshow.ApSlideshowStyle;

let ExampleComponent = React.createClass({
    render: function () {
        return (
            <div>
                <ApSlideshowStyle scoped></ApSlideshowStyle>
                <ApSlideshow></ApSlideshow>
            </div>
        )
    }
});

Comment 2

[Chris Rafuse :crafuse]

Discussed with :dmose and decided on using an earlier version of Nuka-Carousel
http://kenwheeler.github.io/nuka-carousel/#/
Code:
https://github.com/kenwheeler/nuka-carousel/releases/tag/v1.0.0

Tests are included and MIT license.

Installed version 1.0.0

chrafuse@ubuntu:~/Documents/mozilla/loop$ npm install nuka-carousel@1.0.0
nuka-carousel@1.0.0 node_modules/nuka-carousel
├── object-assign@4.0.1
├── exenv@1.2.0
├── react-dom@0.14.7
├── react@0.14.7 (envify@3.4.0, fbjs@0.6.1)
└── react-tween-state@0.1.4 (tween-functions@1.2.0, raf@3.1.0)
chrafuse@ubuntu:~/Documents/mozilla/loop$ cat package.json 
{
  "name": "loop",
  "description": "Web sharing application powered by WebRTC",
  "version": "0.3.0-alpha",
  "repository": {
    "type": "git",
    "url": "[e-mail]:mozilla/loop.git"
  },
  "bugs": {
    "url": "https://bugzilla.mozilla.org/"
  },
  "engines": {
    "node": "0.10.39",
    "npm": "2.14.1"
  },
  "dependencies": {
    "backbone": "1.2.1",
    "classnames": "2.2.0",
    "lodash": "3.9.3",
    "react": "0.13.3"
  },
  "devDependencies": {
    "babel-cli": "6.4.5",
    "babel-plugin-transform-react-display-name": "6.4.0",
    "babel-plugin-transform-react-jsx": "6.4.0",
    "chai": "3.5.0",
    "chai-as-promised": "5.1.0",
    "commander": "2.9.0",
    "compression": "1.6.1",
    "eslint": "1.10.3",
    "eslint-plugin-react": "3.16.1",
    "exports-loader": "0.6.2",
    "expose-loader": "0.7.x",
    "express": "4.13.4",
    "firefox-profile": "0.3.11",
    "fs-promise": "0.4.1",
    "fx-runner": "1.0.1",
    "imports-loader": "0.6.5",
    "karma": "0.12.37",
    "karma-chrome-launcher": "0.2.2",
    "karma-coverage": "0.5.3",
    "karma-firefox-launcher": "0.1.6",
    "karma-mocha": "0.2.0",
    "mkdirp": "0.5.1",
    "mocha": "2.4.5",
    "nodemon": "1.8.1",
    "script-loader": "0.6.1",
    "sinon": "1.17.3",
    "rimraf": "2.5.1",
    "webpack": "1.12.12",
    "when": "3.7.5"
  },
  "scripts": {
    "test": "make test",
    "start": "make runserver",
    "preversion": "make test",
    "version": "make update_version"
  },
  "license": "MPL-2.0"
}
chrafuse@ubuntu:~/Documents/mozilla/loop$ npm list react
loop@0.3.0-alpha /home/chrafuse/Documents/mozilla/loop
└── react@0.13.3 

chrafuse@ubuntu:~/Documents/mozilla/loop$ npm list nuka-carousel
loop@0.3.0-alpha /home/chrafuse/Documents/mozilla/loop
└── nuka-carousel@1.0.0  extraneous

npm ERR! extraneous: nuka-carousel@1.0.0 /home/chrafuse/Documents/mozilla/loop/node_modules/nuka-carousel
chrafuse@ubuntu:~/Documents/mozilla/loop$

Comment 3

[Chris Rafuse :crafuse]

Attachment: slide1

Shorter navigation bar and image text wrap.

Comment 4

[Chris Rafuse :crafuse]

Attachment: slide2

Comment 5

[Chris Rafuse :crafuse]

Attachment: slide3

Comment 6

[Chris Rafuse :crafuse]

Attachment: slide4

Comment 7

[Chris Rafuse :crafuse]

Attachment: slide4 Long Text example

Comment 8

[Holly Habstritt Gaal [:Habber]]

Review was conducted remotely, over vidyo. Further bugs may be discovered once we are able to click through it ourselves. 

Please update font before launch to Open Sans (bold, 25pt for headline / regular, 18pt for body)

Aside from the font update and minor margin updates discussed over vidyo, this will work for our v1 launch. See below for items we’ve identified to update for the next release (date TBD).

-----

A main concern that the Hello engineering team and I discussed was the overflow text for locales with high-volume text. We've modified some margins and spacing to accommodate this case as best as possible as we do not have the strings to test with real, localized content at this time. Note that after release, layout may need to be updated to accommodate any bugs related to this issue. With more time we can also consider a more flexible/responsive implementation to accommodate various volumes of content that will need to fit in this container.


The following are outstanding items that we identified for the next release (may need spinoff bugs):
- Hover states needed for interactive elements w/in slideshow UI (x, <, >)
- Add pagination across bottom of slideshow so that the user has an expectation of how many slides are left

- possible bug to check for in testing: linux and windows toolbar 
- possible bug to check for in testing: long strings overflow for some locales

Comment 9

[Chris Rafuse :crafuse]

Attachment: slide1

Updated header height for text run off.

Comment 10

[Chris Rafuse :crafuse]

Attachment: slide2

Comment 11

[Chris Rafuse :crafuse]

Attachment: slide3

Part of the exportable-slideshow branch.

Comment 12

[Chris Rafuse :crafuse]

Attachment: slide4

Comment 13

[Chris Rafuse :crafuse]

Attachment: slide4 Long Text example

Comment 14

[Chris Rafuse :crafuse]

Attachment: slide1.png

Imported and applied Open Sans font to the slides.  Please see bug for all other screen caps.

Comment 15

[Chris Rafuse :crafuse]

Attachment: slide2

Comment 16

[Chris Rafuse :crafuse]

Attachment: slide3

Comment 17

[Chris Rafuse :crafuse]

Attachment: slide4

Comment 18

[Chris Rafuse :crafuse]

Attachment: slide4 Long Text

Comment 19

[Chris Rafuse :crafuse]

Attachment: slide1.png

Screen cap software has bug reposting images. See Bug for changes.

Comment 20

[Chris Rafuse :crafuse]

Attachment: slide2

Comment 21

[Chris Rafuse :crafuse]

Attachment: slide3

Comment 22

[Chris Rafuse :crafuse]

Attachment: slide4

Comment 23

[Chris Rafuse :crafuse]

Attachment: slide4 Long Text example

Comment 24

[mternoway]

Hey Chris, these are looking great. I think this is a good solution to the lengthy amount of copy that may occur with localized strings.

MT

Comment 25

[Chris Rafuse :crafuse]

Attachment: Link to Github pull-request: https://github.com/mozilla/loop/pull/177

Rebased

Comment 26

[Mark Banner (:standard8)]

Comment on attachment 8718916 [details] [review]
Link to Github pull-request: https://github.com/mozilla/loop/pull/177

Chris, please re-request review once the comments are addressed. Thanks.

Comment 27

[Mark Banner (:standard8)]

Comment on attachment 8718730 [details]
slide1.png

Cancelling ui-reviews as these seem to have already been done, and we need to land this code today.

Note: We are not allowed to load resources from Google in this code as this is run with chrome privilages. Therefore we've dropped the Open Sans, and used sans-serif for the font type.

If we need to do further improvements later, that will need to be a follow-up bug.

Comment 28

[Mark Banner (:standard8)]

Attachment: Add license for Loop's slideshow code.

Gerv, the slideshow code in the pull request will end up being shipped in Firefox as part of the Hello system add-on.

Please can you give approval/check the patch for about:license. Its MIT, so I believe there's no legal issues with it.

Original source code is at https://github.com/piotrf/simple-react-slideshow

Comment 29

[Mark Banner (:standard8)]

gerv: I've also updated browser/components/loop -> browser/extensions/loop as that where our code now lives.

Comment 30

[Mark Banner (:standard8)]

Comment on attachment 8718916 [details] [review]
Link to Github pull-request: https://github.com/mozilla/loop/pull/177

Ok, I've done a few review-comment updates to:

- Fix the separation of the vendor script to a separate file
- Tidy up some unnecessary file loading and requesting of variables/other items from the loop API.

I think this is now good enough to go.

Chris, please can you file a follow-up for tests for this code, and another one to add something to the ui-showcase?

Comment 31

[Mark Banner (:standard8)]

https://github.com/mozilla/loop/commit/968744c025627fde459e9ac470a67ab5f196b889

Comment 32

[Gervase Markham [:gerv]]

Comment on attachment 8719460 [details] [diff] [review]
Add license for Loop's slideshow code.

Review of attachment 8719460 [details] [diff] [review]:
-----------------------------------------------------------------

r=gerv with these changes.

Gerv

::: toolkit/content/license.html
@@ +4741,5 @@
>  
>      <hr>
>  
> +    <h1><a id="simple-react-slideshow"></a>Simple React Slideshow Example License</h1>
> +

The word Example is here, but not in the version of the license name in the link. It's a bit confusing with the word Example, so can we please remove it?

@@ +4755,5 @@
> +
> +<pre>
> +Original Author: PIOTR F.
> +License: MIT
> +

Remove the above 3 lines

Comment 33

[Mark Banner (:standard8)]

https://hg.mozilla.org/integration/fx-team/rev/fde7acdba611412b1f1a4980e272e4d7b0cb4a70
Bug 1245666 - Add license for Loop's slideshow code. r=gerv

Comment 34

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/fde7acdba611

Comment 35

[Mark Banner (:standard8)]

(In reply to Mark Banner (:standard8) from comment #30)
> Chris, please can you file a follow-up for tests for this code, and another
> one to add something to the ui-showcase?

I filed bug 1249311 for these.