nnwhen/scritch-player
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix text

Browse source
This commit is contained in:
torcado194 2022-03-20 21:15:38 -04:00
parent 2a4384415f
commit 39035d4001
1 changed files with 59 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

119
README.md
View file

@ -79,11 +79,10 @@ And that's it! you can upload the files to your website, or zip them up and uplo
`title` (optional) `title` (optional)
> Text at the top of the player > Text at the top of the player
> `"title": "My Album"` > `"title": "My Album"`
>
\ \
`media` `media`
> List of media files to include in the player > List of media files to include in the player
> ```json > ```json
> "media": [ > "media": [
> {"file": "track1.mp3", "title": "Track 1"}, > {"file": "track1.mp3", "title": "Track 1"},
@ -92,110 +91,110 @@ And that's it! you can upload the files to your website, or zip them up and uplo
> ``` > ```
\ \
`cover` (optional) `cover` (optional)
> The name of the file in the /media folder for the cover image > The name of the file in the /media folder for the cover image
\ \
`description` (optional) `description` (optional)
> The text at the bottom of the player > The text at the bottom of the player
\ \
`theme` (optional) `theme` (optional)
> An object containing theme settings and colors > An object containing theme settings and colors
\ \
**media entry options** **media entry options**
`file` `file`
> The name of the file in the /media folder > The name of the file in the /media folder
\ \
`title` (optional) `title` (optional)
> The name shown for this entry in the player. > The name shown for this entry in the player.
> Defaults to the file name if not specified > Defaults to the file name if not specified
\ \
`featured` (optional) `featured` (optional)
> If `true`, sets this file as the "featured" track, which will queue up first when loading the page. > If `true`, sets this file as the "featured" track, which will queue up first when loading the page.
> Can be either `true` or `false` > Can be either `true` or `false`
\ \
`type` (optional) `type` (optional)
> The type of the media. > The type of the media.
> Can be either `"audio"` or `"video"` > Can be either `"audio"` or `"video"`
> Defaults to "audio" > Defaults to "audio"
\ \
`info` (optional) `info` (optional)
> Extra text for this file, such as for lyrics or artist attributions. This will be optionally shown over/under the cover image, or togglable below the track. > Extra text for this file, such as for lyrics or artist attributions. This will be optionally shown over/under the cover image, or togglable below the track.
\ \
**theme options** **theme options**
*all settings are optional. Colors can be any valid CSS color* *all settings are optional. Colors can be any valid CSS color*
`titleStyle` `titleStyle`
> Styles the title text, if available. > Styles the title text, if available.
> `"none"` (default) no styling > `"none"` (default) no styling
> `"span"` title spans the entire width, centered. > `"span"` title spans the entire width, centered.
\ \
`backgroundColor` `backgroundColor`
> Color of the page background > Color of the page background
\ \
`primaryColor` `primaryColor`
> Color of the controls > Color of the controls
\ \
`primaryAltColor` `primaryAltColor`
> Color of e.g. the unfilled section of the progress bar and volume bar > Color of e.g. the unfilled section of the progress bar and volume bar
\ \
`secondaryColor` `secondaryColor`
> Secondary color of the controls (e.g. the triangle of the play button) > Secondary color of the controls (e.g. the triangle of the play button)
\ \
`highlightColor` `highlightColor`
> Background color of the selected track > Background color of the selected track
\ \
`primaryTextColor` `primaryTextColor`
> Color of most text (e.g. titles, description, info, etc.) > Color of most text (e.g. titles, description, info, etc.)
\ \
`primaryAltTextColor` `primaryAltTextColor`
> Color of e.g. the track numbers and duration, and the track info button > Color of e.g. the track numbers and duration, and the track info button
\ \
`linkColor` `linkColor`
> Text color of links > Text color of links
\ \
`layoutStyle` `layoutStyle`
> Styles the overall structure of the player > Styles the overall structure of the player
> `"horizontal"` (default) the cover image sits to the right of the player controls and track list > `"horizontal"` (default) the cover image sits to the right of the player controls and track list
> `"vertical"` all elements aligned vertically, title -> cover -> controls -> track list > `"vertical"` all elements aligned vertically, title -> cover -> controls -> track list
\ \
`infoStyle` `infoStyle`
> Styles the track info of the currently playing track > Styles the track info of the currently playing track
> `"overlaid"` (default) text sits on top of the cover image > `"overlaid"` (default) text sits on top of the cover image
> `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout) > `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout)
\ \
`contentWidth` `contentWidth`
> Width of the column containing the controls, track list, and description > Width of the column containing the controls, track list, and description
\ \
`coverSize` `coverSize`
> Width of the cover image (non-square images will scale accordingly) > Width of the cover image (non-square images will scale accordingly)
\ \
`nativePlayer` `nativePlayer`
> Changes the player controls > Changes the player controls
> `false` (default) custom player controls > `false` (default) custom player controls
> `true` uses the browser's default audio player (also hides the player when a video is playing, the video's default controls will be available) > `true` uses the browser's default audio player (also hides the player when a video is playing, the video's default controls will be available)
\ \
`customCSS` `customCSS`
> Custom changes to the page's CSS > Custom changes to the page's CSS