Thumbnail development is done in branch #SWIK-147_ext.
Three components are created. Two are thumbnail components and one is controlling component. ThumbnailCreate is for creating a new thumbnail image, and ThumbnailShow is for showing a thumbnail, and ThumbnailOptions for some parameters to control previous two thumbnails.
ThumbnailCreate:
The ThumbnailCreate component should be used whenever a slide is saved. It does not matter, whether a slide is new or old or in whether it is in draft mode or published. Each thumbnail is saved by its slide id. Slide id is supposed to be unique across all slides in the platform. The syntax of the ThumbnailCreate is as follows:
<ThumbnailCreate slideId={...} slideTitle={...} slideContent={...} createNew={...} />
Component properties:
slideId: Ideally, it should be slide id along with its version number, e.g., 16-1.
slideTitle: As it is retrieved from deckservice, without removing associated HTML fragment.
slideContent: As it is retrieved from deckservice, without removing HTML contained in it.
createNew: Boolean. Either true or false.
All properties are required.
How to use it:
If you want to create a single thumbnail, just place it inside the component responsible for saving a slide. It does not add any HTML that would disturb the markup of its parent component.
ThumbnailShow:
The ThumbnailShow component should be used when you want to show a thumbnail. The syntax of the ThumbnailShow is as follows:
<ThumbnailShow slideId={...} slideTitle={...} slideContent={...} createNew={...} />
Some of the properties of this component are optional.
Component properties:
slideId: Slide id along with its version number (recommended), e.g., 16-1. You can use the slide id without version number as well if you have way to get the same format back.
slideTitle (optional): As it is retrieved from deckservice, without removing associated HTML fragment. This is not required if createNew is set to false.
slideContent (optional): As it is retrieved from deckservice, without removing HTML contained in it. This is not required if createNew is set to false.
createNew: Boolean. Either true or false.
slideId and createNew are mandatory. If createNew is set to true then slideTitle and slideContent are not required.
In the DeckViewPanel component, we iterate over ThumbnailShow component inorder to show thumbnail view of the deck's slides.
The ThumbnailShow component automatically checks if the thumbnail image of a given slide already exists, if it does, then a new thumbnail will not be generated. If the thumbnail image does not exist then it will create a new thumbnail and will try to show the generated thumbnail. But, it is a non harmful race condition (generate image vs show image) therefore, a broken image - as if the image not found, will be shown for that particular slide, though a refresh of the DeckViewPanel will correctly show the thumbnail image. This
...
Creating thumbnail
For both creating and accessing slide thumbnails, we are currently using the file-service microservice. This service provides a POST method, expecting two parameters: the slide id and the HTML content for the slide. The final slide thumbnail will be a JPEG file.
If the HTML to image conversion is successful, the service will return the URL of the created image. If there is error, it will return the error response.
Displaying thumbnail
On slidewiki-platform, there is a Thumbnail component that can be used to display a thumbnail image. Developers can use this component inside their other components. One should loop over it to show multiple components (see DeckView component for example use). Use CSS for positioning etc. as needed. This component takes url property as mandatory property. The thumbnail image URL has following URL path:
| Code Block |
|---|
/slideThumbnail/{slideId}.jpeg |
Example:
| Code Block |
|---|
<a href={deckURL + '/slide/' + slide.id} className="ui medium image" tabIndex="-1">
<Thumbnail key={index} url={thumbnailURL + '/slideThumbnail/' + slide.id + '.jpeg'} slideId={slide.id} />
</a> |