mediacms/docs/user_docs.md
MrPercheul cba2ed75ed
Show comments in the Timebar (#442)
Show comments in the Timebar
2022-09-20 15:16:16 +03:00

260 lines
7.2 KiB
Markdown

# Users documentation
## Table of contents
- [Uploading media](#uploading-media)
- [Downloading media](#downloading-media)
- [Adding captions/subtitles](#adding-captionssubtitles)
- [Search media](#search-media)
- [Using Timestamps for sharing](#using-timestamps-for-sharing)
- [Mentionning users in comments](#Mentionning-users-in-comments)
- [Show comments in the Timebar](#Show-comments-in-the-Timebar)
- [Share media](#share-media)
- [Embed media](#embed-media)
- [Customize my profile options](#customize-my-profile-options)
## Uploading media
### How to Upload Media
Uploading media is as simple as clicking the _Upload Media_ button, waiting for media to upload, and then clicking the media to add metadata (title, description etc.) by filling out a form.
#### Click Upload Button
Click the _Upload Media_ button from the right-side of the screen at the top:
<p align="left">
<img src="./images/Click-Upload-Media-button.png"/>
</p>
#### Upload Page
Clicking the _Upload Media_ button takes you to the upload page at a URL like this:
https://demo.mediacms.io/upload
#### Click Browse Button
Here you should click the _"Browse your files"_ button (or drag and drop a file from your desktop):
<p align="left">
<img src="./images/Click-Browse-button.png"/>
</p>
#### Select media file and click Open button
Select the media file that you want to upload and click the _"Open"_ button:
<p align="left">
<img src="./images/Select-Media-File-Click-Open.png"/>
</p>
#### Wait for file to upload
Wait for the file to finish uploading:
<p align="left">
<img src="./images/Uploading.png"/>
</p>
#### Pause uploading
If you want you can pause upload by clicking _Pause button_:
<p align="left">
<img src="./images/Pause-button.png"/>
</p>
#### Continue uploading
Continue upload by clicking _Continue button_:
<p align="left">
<img src="./images/Continue-button.png"/>
</p>
#### Wait for media to finish Processing
Wait for the media file to finish Processing:
<p align="left">
<img src="./images/Processing.png"/>
</p>
#### Click View media button
Click the View media button to open the media page:
<p align="left">
<img src="./images/Click-View-media-button.png"/>
</p>
#### Media will be in the encoding queue
The media will take some time to finish encoding (MediaCMS will transcode the file to several formats and resolutions). Meanwhile you can edit the media file to add metadata.
#### Click Edit Media button
Click the EDIT MEDIA button to add metadata and configure the poster image:
<p align="left">
<img src="./images/Click-Edit-Media-button.png"/>
</p>
#### Add Metadata (Summary, Description etc.)
Make sure you fill in all the required fields, and try to complete as many of the non-required fields as possible. This ensures the database is populated with useful meta-data to help others access useful information about you and your video.
<p align="left">
<img src="./images/Edit-Media-Metadata-1.png"/>
</p>
<p align="left">
<img src="./images/Edit-Media-Metadata-2.png"/>
</p>
## Downloading media
MediaCMS offers a configurable option whereby users can make their media files available for download. Downloads are available for transcoded files, and the original file.
#### How To Enable Download
Visit the media view page and choose the EDIT MEDIA button.
Select the checkbox for "Allow Downloads"
#### How To Download Media
Visit the media view page and click the DOWNLOAD button below the video player.
<p align="left">
<img src="./images/Click-Download-Button.png">
</p>
Choose the version you wish to download - a transcoded file or the original file:
<p align="left">
<img src="./images/Click-version-download.png">
</p>
Choose Save File and click the OK button.
<p align="left">
<img src="./images/Save-File.png">
</p>
## Adding captions/subtitles
With MediaCMS you can add subtitles/captions to your video by uploading a subtitles file in the popular .vtt format.
### Visit Media Page & Click EDIT SUBTITLE Button
Visit the "single media page" for the media you wish to add subtitles/captions to and click the EDIT SUBTITLES button:
<p align="left">
<img src="./images/Click-EDIT-SUBTITLE.png"/>
</p>
### Upload Subtitles in .vtt Format
Click the Language menu to select the correct language for your Subtitles/Captions file:
<p align="left">
<img src="./images/Click-Subtitle-Language-Menu.png"/>
</p>
Choose the correct Language for your file:
<p align="left">
<img src="./images/Subtitles-captions1.png"/>
</p>
Click Browse to find a subtitles/captions file on your computer (if your file is not in the .vtt format, you may find a conversion service on the Internet):
<p align="left">
<img src="./images/Subtitles-captions2.png"/>
</p>
Choose a .vtt subtitles/captions file from your computer:
<p align="left">
<img src="./images/Subtitles-captions3.png"/>
</p>
Click the Add button to add the file to your media:
<p align="left">
<img src="./images/Click-ADD-button.png"/>
</p>
### View Subtitles/Captions in Video Player
You can now watch the captions/subtitles play back in the video player - and toggle display on/off by clicking the CC button:
<p align="left">
<img src="./images/CC-display.png"/>
</p>
## Using Timestamps for sharing
### Using Timestamp in the URL
An additional GET parameter 't' can be added in video URL's to start the video at the given time. The starting time has to be given in seconds.
<p align="left">
<img src="./images/Demo1.png"/>
</p>
Additionally the share button has an option to generate the URL with the timestamp at current second the video is.
<p align="left">
<img src="./images/Demo2.png"/>
</p>
### Using Timestamp in the comments
Comments can also include timestamps. They are automatically detected upon posting the comment, and will be in the form of an hyperlink link in the comment. The timestamps in the comments have to follow the format HH:MM:SS or MM:SS
<p align="left">
<img src="./images/Demo3.png"/>
</p>
## Mentionning users in comments
Comments can also mention other users by tagging with '@'. This will open suggestion box showing usernames, and the selection will refine as the user continues typing.
Comments send with mentions will contain a link to the user page, and can be setup to send a mail to the mentionned user.
<p align="left">
<img src="./images/Mention1.png"/>
<img src="./images/Mention2.png"/>
<img src="./images/Mention3.png"/>
<img src="./images/Mention4.png"/>
</p>
## Show comments in the Timebar
When enabled, comments including a timestamp will also be displayed in the current video Timebar as a little colorful dot. The comment can be previewed by hovering the dot (left image) and it will be displayed on top of the video when reaching the correct time (right image).
Only comments with correct timestamps formats (HH:MM:SS or MM:SS) will be picked up and appear in the Timebar.
<p align="left">
<img src="./images/TimebarComments_Hover.png" height="180" alt="Comment preview on hover"/>
<img src="./images/TimebarComments_Hit.png" height="180" alt="Comment shown when the timestamp is reached "/>
</p>
## Search media
How search can be used
## Share media
How to share media
## Embed media
How to use the embed media option
## Customize my profile options
Customize profile and channel