lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
FreeTube/src/renderer/sass-partials/_ft-list-item.sass

221 lines
4.2 KiB
Sass
Raw Normal View History

Rewrite list items :)
2020-06-23 17:47:19 +02:00
$thumbnail-overlay-opacity: 0.85
@mixin is-result
@at-root
.result#{&}
@content
@mixin is-watch-playlist-item
@at-root
.watchPlaylistItem#{&}
@content
@mixin is-recommendation
@at-root
.recommendation#{&}
@content
@mixin is-sidebar-item
@at-root
.watchPlaylistItem#{&}, .recommendation#{&}
@content
enhancing watched videos appearnce (#806)
2020-12-18 05:21:17 +01:00
@mixin low-contrast-when-watched($col)
color: $col
@at-root
.watched &, .watched#{&}
color: var(--tertiary-text-color)
.watched:hover &, .watched:hover#{&}
color: $col
Also rewrite ft-list-channel
2020-06-23 18:08:24 +02:00
.ft-list-item
enhancing watched videos appearnce (#806)
2020-12-18 05:21:17 +01:00
padding: 6px
&.watched
background-color: var(--bg-color)
@include low-contrast-when-watched(var(--primary-text-color))
.thumbnailImage
opacity: 0.3
&:hover .thumbnailImage
opacity: 1
Rewrite list items :)
2020-06-23 17:47:19 +02:00
.videoThumbnail
display: flex
position: relative
.thumbnailLink
display: flex
.thumbnailImage
height: 130px
@include is-sidebar-item
height: 75px
@include is-recommendation
width: 163px
height: auto
Implement History and jump to last watched time progress
2020-08-20 04:39:44 +02:00
.videoWatched
position: absolute
padding: 2px
opacity: $thumbnail-overlay-opacity
color: var(--primary-text-color)
enhancing watched videos appearnce (#806)
2020-12-18 05:21:17 +01:00
background-color: var(--bg-color)
Implement History and jump to last watched time progress
2020-08-20 04:39:44 +02:00
pointer-events: none
Rewrite list items :)
2020-06-23 17:47:19 +02:00
.videoDuration
position: absolute
bottom: 4px
right: 4px
padding: 3px 4px
line-height: 1.2
font-size: 15px
border-radius: 5px
margin: 0
opacity: $thumbnail-overlay-opacity
color: var(--primary-text-color)
background-color: var(--card-bg-color)
Make video duration pass clicks through Using pointer-events: none
2020-07-10 03:40:33 +02:00
pointer-events: none
Rewrite list items :)
2020-06-23 17:47:19 +02:00
&.live
background-color: #f22
color: #fff
Smaller star on playlist items
2020-07-10 03:22:13 +02:00
@include is-watch-playlist-item
font-size: 12px
Add support for External Players (closes #418) (#1271) * feat: add support for opening videos/playlists in external players (like mpv) #418 Signed-off-by: Randshot <randshot@norealm.xyz> * feat: move external player settings into own section feat: add warnings for when the external player doesn't support the current action (e.g. reversing playlists) feat: add toggle in settings for ignoring unsupported action warnings Signed-off-by: Randshot <randshot@norealm.xyz> * improvement: do not append start offset argument when the watch progress is 0 Signed-off-by: Randshot <randshot@norealm.xyz> * fix: fix undefined showToast error when clicking on the external player playlist button Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add icon button for external player to watch-video-info (below video player) component improvement: refactor the code for opening the external player into a separate function in utils.js Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add support for ytdl protocol urls (supportsYtdlProtocol) chore: fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add support for passing default playback rate to external player improvement: add warning message for when the external player does not support starting playback at a given offset chore: rename reverse, shuffle, and loopPlaylist fields for consistency Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add setting for custom external player command line arguments Signed-off-by: Randshot <randshot@norealm.xyz> * chore: fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * improvement(watch-video-info.js): change the default for playlistId back to null (consistent with other occurrences) improvement(utils.js/openInExternalPlayer): also check for empty playlistId string fix(watch-video-info.js): fix merge error Signed-off-by: Randshot <randshot@norealm.xyz> * improvement(components/ft-list-video): check whether watch history is turned on, before adding a video to it fix(store/utils): fix playlistReverse typo, causing `undefined` being set as a command line argument fix(store/utils): check for 'string' type, instead of `null` and `undefined` fix(views/Watch): fix getPlaylistIndex returning an incorrect index, when reverse was turned on chore(locales/en-US): fix thumbnail and suppress typo chore(locales/en_GB): fix thumbnail and suppress typo Signed-off-by: Randshot <randshot@norealm.xyz> * feat: pause player when opening video in external player Signed-off-by: Randshot <randshot@norealm.xyz> * feat(externalPlayer): refactor externalPlayerCmdArguments into a separate static file `static/external-player-map.json` chore(components/ft-list-video): fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * Revert "feat: pause player when opening video in external player" This reverts commit 28b4713334bf941be9e403abf517bb4b89beb04f. * feat: pause the app's player when opening video in external player * This commit addresses above requested changes. improvement(components/external-player-settings): move `externalPlayer` check to `ft-flex-box` improvement(components/external-player-settings): use `update*` methods, instead of `handle*` improvement(store/utils): move child_process invocation to `main/index.js` via IPC call to renderer improvement(store/utils): use `dispatch` for calling actions improvement(store/utils): get external player related settings directly in the action improvement(renderer/App): move `checkExternalPlayer` call down into `usingElectron` if statement fix(renderer/App): fix lint error improvement(components/ft-list-playlist): remove unnecessary payload fields fix(components/ft-list-playlist): fix typo in component name improvement(components/ft-list-video): remove unnecessary payload fields improvement(components/watch-video-info): remove unnecessary payload fields improvement(views/Settings): add `usingElectron` condition Signed-off-by: Randshot <randshot@norealm.xyz> * fix(store/utils): fix toast message error Signed-off-by: Randshot <randshot@norealm.xyz> * fix(store/utils): fix a few code mess-ups Co-authored-by: Svallinn <41585298+Svallinn@users.noreply.github.com>
2021-06-13 17:31:43 +02:00
.externalPlayerIcon
position: absolute
bottom: 4px
left: 4px
font-size: 17px
opacity: $thumbnail-overlay-opacity
Rewrite list items :)
2020-06-23 17:47:19 +02:00
.favoritesIcon
position: absolute
top: 3px
right: 3px
font-size: 17px
opacity: $thumbnail-overlay-opacity
Implement History and jump to last watched time progress
2020-08-20 04:39:44 +02:00
.watchedProgressBar
height: 2px
position: absolute
bottom: 0px
background-color: var(--primary-color)
z-index: 2
Rewrite list items :)
2020-06-23 17:47:19 +02:00
.videoCountContainer
position: absolute
right: 0
top: 0
bottom: 0
width: 60px
font-size: 20px
.background, .inner
position: absolute
top: 0
bottom: 0
left: 0
right: 0
.background
background-color: var(--bg-color)
opacity: 0.9
.inner
display: flex
flex-direction: column
justify-content: center
align-items: center
color: var(--primary-text-color)
Also rewrite ft-list-channel
2020-06-23 18:08:24 +02:00
.channelThumbnail
display: flex
justify-content: center
.channelImage
height: 130px
border-radius: 50%
.info
Rewrite list items :)
2020-06-23 17:47:19 +02:00
flex: 1
position: relative
.optionsButton
float: right // ohhhh man, float was finally the right choice for something
Add support for External Players (closes #418) (#1271) * feat: add support for opening videos/playlists in external players (like mpv) #418 Signed-off-by: Randshot <randshot@norealm.xyz> * feat: move external player settings into own section feat: add warnings for when the external player doesn't support the current action (e.g. reversing playlists) feat: add toggle in settings for ignoring unsupported action warnings Signed-off-by: Randshot <randshot@norealm.xyz> * improvement: do not append start offset argument when the watch progress is 0 Signed-off-by: Randshot <randshot@norealm.xyz> * fix: fix undefined showToast error when clicking on the external player playlist button Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add icon button for external player to watch-video-info (below video player) component improvement: refactor the code for opening the external player into a separate function in utils.js Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add support for ytdl protocol urls (supportsYtdlProtocol) chore: fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add support for passing default playback rate to external player improvement: add warning message for when the external player does not support starting playback at a given offset chore: rename reverse, shuffle, and loopPlaylist fields for consistency Signed-off-by: Randshot <randshot@norealm.xyz> * feat: add setting for custom external player command line arguments Signed-off-by: Randshot <randshot@norealm.xyz> * chore: fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * improvement(watch-video-info.js): change the default for playlistId back to null (consistent with other occurrences) improvement(utils.js/openInExternalPlayer): also check for empty playlistId string fix(watch-video-info.js): fix merge error Signed-off-by: Randshot <randshot@norealm.xyz> * improvement(components/ft-list-video): check whether watch history is turned on, before adding a video to it fix(store/utils): fix playlistReverse typo, causing `undefined` being set as a command line argument fix(store/utils): check for 'string' type, instead of `null` and `undefined` fix(views/Watch): fix getPlaylistIndex returning an incorrect index, when reverse was turned on chore(locales/en-US): fix thumbnail and suppress typo chore(locales/en_GB): fix thumbnail and suppress typo Signed-off-by: Randshot <randshot@norealm.xyz> * feat: pause player when opening video in external player Signed-off-by: Randshot <randshot@norealm.xyz> * feat(externalPlayer): refactor externalPlayerCmdArguments into a separate static file `static/external-player-map.json` chore(components/ft-list-video): fix lint error Signed-off-by: Randshot <randshot@norealm.xyz> * Revert "feat: pause player when opening video in external player" This reverts commit 28b4713334bf941be9e403abf517bb4b89beb04f. * feat: pause the app's player when opening video in external player * This commit addresses above requested changes. improvement(components/external-player-settings): move `externalPlayer` check to `ft-flex-box` improvement(components/external-player-settings): use `update*` methods, instead of `handle*` improvement(store/utils): move child_process invocation to `main/index.js` via IPC call to renderer improvement(store/utils): use `dispatch` for calling actions improvement(store/utils): get external player related settings directly in the action improvement(renderer/App): move `checkExternalPlayer` call down into `usingElectron` if statement fix(renderer/App): fix lint error improvement(components/ft-list-playlist): remove unnecessary payload fields fix(components/ft-list-playlist): fix typo in component name improvement(components/ft-list-video): remove unnecessary payload fields improvement(components/watch-video-info): remove unnecessary payload fields improvement(views/Settings): add `usingElectron` condition Signed-off-by: Randshot <randshot@norealm.xyz> * fix(store/utils): fix toast message error Signed-off-by: Randshot <randshot@norealm.xyz> * fix(store/utils): fix a few code mess-ups Co-authored-by: Svallinn <41585298+Svallinn@users.noreply.github.com>
2021-06-13 17:31:43 +02:00
.externalPlayerButton
float: right
Rewrite list items :)
2020-06-23 17:47:19 +02:00
.title
font-size: 20px
enhancing watched videos appearnce (#806)
2020-12-18 05:21:17 +01:00
@include low-contrast-when-watched(var(--primary-text-color))
Rewrite list items :)
2020-06-23 17:47:19 +02:00
text-decoration: none
Break text for extremely long titles with no space
2020-08-18 23:01:01 +02:00
word-wrap: break-word
Break long strings in ft-list-items
2020-10-14 18:45:36 +02:00
word-break: break-word
Rewrite list items :)
2020-06-23 17:47:19 +02:00
@include is-sidebar-item
font-size: 15px
.infoLine
margin-top: 5px
font-size: 14px
@include is-sidebar-item
font-size: 12px
enhancing watched videos appearnce (#806)
2020-12-18 05:21:17 +01:00
&
@include low-contrast-when-watched(var(--secondary-text-color))
.channelName
@include low-contrast-when-watched(var(--secondary-text-color))
Rewrite list items :)
2020-06-23 17:47:19 +02:00
.description
font-size: 14px
Add Proxy configuration to settings. Fix ft-video-list height when using list display
2021-01-14 19:51:33 +01:00
max-height: 50px
overflow-y: hidden
enhancing watched videos appearnce (#806)
2020-12-18 05:21:17 +01:00
@include low-contrast-when-watched(var(--secondary-text-color))
Rewrite list items :)
2020-06-23 17:47:19 +02:00
&.list
display: flex
align-items: flex-start
Also rewrite ft-list-channel
2020-06-23 18:08:24 +02:00
.videoThumbnail, .channelThumbnail
Rewrite list items :)
2020-06-23 17:47:19 +02:00
margin-right: 20px
Also rewrite ft-list-channel
2020-06-23 18:08:24 +02:00
.channelThumbnail
width: 231px
@include is-sidebar-item
.videoThumbnail
Rewrite list items :)
2020-06-23 17:47:19 +02:00
margin-right: 10px
&.grid
display: flex
flex-direction: column
min-height: 230px
padding-bottom: 20px
Also rewrite ft-list-channel
2020-06-23 18:08:24 +02:00
.videoThumbnail, .channelThumbnail
Rewrite list items :)
2020-06-23 17:47:19 +02:00
margin-bottom: 12px
.thumbnailImage
width: 100%
.title
font-size: 18px
.infoLine
margin-top: 8px
font-size: 13px
.videoWatched, .live
text-transform: uppercase