Commit Graph

69 Commits

Author SHA1 Message Date
Jason f7f6143847
Respect playlist sort order in `watch-video-playlist` (#5013)
* Implement playlist sorting

* Hide sort menu for remote playlists

* Remove 'Custom (descending)' sort order

I don't see the need for this particular sort order.

* Adjust sort order & align dropdown with 'More Options' button

* Make 'Latest added first' default option instead of custom

* Remove unlikely-to-be-implemented 'Date published' sorting options

Context from absidue: 'I don't think we should even attempt to support it, due to all of the situations where it wouldn't be possible.'

* Update to use sortOrder as main variable throughout

* Hide sort menu for playlists of length <2

* Send sorted user playlist to watch-video-playlist

* Implement minor reversing optimization / cleanup

* Update src/renderer/helpers/playlists.js

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Change Playlist.js logic to cache user playlists, and pass the sorted user playlist

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2024-06-12 18:49:52 +02:00
Jason 51666b54b3
Play next/prev video after removing current video from the playlist (#5158)
* Remove un-utilized allowPlayingVideoRemoval disabled option

* Have currently deleted video entry become the prior entry in the playlist

* Fix issue where first video is skipped when current video after removal is zeroth & loop is enabled

* Handle first video in playlist being removed

* Fix shuffle prevVideo issue

* Fix wrong variable for reversal bug

* Implement suggested optimization
2024-06-07 06:09:56 +08:00
ChunkyProgrammer 5d0dd3f531
Define emits before using them Part 2 (#4974)
* add missing emits

* update ft-refresh-widget

* Let event handler get CurrentValue instead of specifying it

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2024-04-19 09:00:19 +08:00
Jason 23f1618fcb
Add back 3 Stylelint configs (#4350)
* Add back @double-great/stylelint-a11y Stylelint plugin

Notably, we choose to not use the 'a11y/no-outline-none' rule. The reason for this being that our focus ring suffices for almost every use case (https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum), and using the same hover and focus styling can be considered bad design in many cases. YT goes the direction of foregoing the focus ring for many of its components and choosing a barely darker color than its :hover for :focus styling, which is controversial. Accessibility-wise, at the very least, using the same hover and focus styling can be confusing, especially for sighted users who use keyboard navigation.

* Add back stylelint-config-sass-guidelines

* Add back stylelint-config-standard

* Satisfy media-prefers-reduced-motion a11y rule

This is not recognized as a fix by the rule due to its limited detection logic, so this rule is not being imported directly.

* Remove duplicate code

* Implement linting fixes

* Implement _ft-list-item.scss linting fixes excluding no-descending-specificity

Properly implementing the no-descending-specificity rule in this file seems to utterly destroy the styling. This would be its own entire initiative to unravel.

* Restart from scratch modifications of _ft-list-item.scss

* Resolve styling discrepancies introduced with ft-list-channel and ft-tooltip
2024-04-17 19:49:37 +02:00
Jason 981e8e4530
Fix user playlist reversal failing after user playlist information is updated (#4947) 2024-04-16 17:46:43 +02:00
ynnsuis e087008707
Fix/ Improve accessibility of playlist icon buttons (#4943)
* Add aria-pressed attribute to playlist icon button

* Improve accessibility by adjusting stroke thickness of playlist icon

* Fix to keep the inactive hover state the same

* Update playlist icon active hover style

* Update playlist icon active hover color to --accent-color-hover
2024-04-14 11:15:23 -04:00
absidue af2913592e
Add SUPPORTS_LOCAL_API build flag (#4931) 2024-04-12 06:12:50 +00:00
absidue 98aded9701
Fix handling of video published date in video lists (#4752)
* Fix handling of video published date in video lists

* Use same date format on the history page as before

* Switch to months at 30 days instead of 32 and correct thresholds

* Add support for formatting as weeks

* According to Invidious everything on the popular tab is a short???
2024-03-13 02:26:12 -04:00
absidue 351fdb951d
Playlist performance improvements (#4597)
* Implement pagination for user playlists on the Playlist page

* Fix the load more loading icon being displayed off-screen

* Caching user playlists is unnecessary as they are already in the store

* ft-list-video: Only render description element if there is a description

* Minor speed ups in the playlists store

* ft-list-video: Remove superfluous template around view count

* ft-list-video: Replace watched property with historyEntryExists computed property

* playlist-info: Fix copying partially loaded user playlists

* Fix the playlist number not getting lazy loaded

* Reduce nesting levels

Co-authored-by: PikachuEXE <git@pikachuexe.net>

---------

Co-authored-by: PikachuEXE <git@pikachuexe.net>
2024-02-01 07:08:47 -05:00
PikachuEXE 5a6d4d5038
! Fix playlist type not passed when playing next/prev item in a user playlist (#4623) 2024-01-31 17:16:29 +01:00
dependabot[bot] 6d58410f39
Bump the eslint group with 4 updates (#4581)
* Bump the eslint group with 4 updates

Bumps the eslint group with 4 updates: [eslint-plugin-jsonc](https://github.com/ota-meshi/eslint-plugin-jsonc), [eslint-plugin-vuejs-accessibility](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility), [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml) and [vue-eslint-parser](https://github.com/vuejs/vue-eslint-parser).


Updates `eslint-plugin-jsonc` from 2.11.2 to 2.12.2
- [Release notes](https://github.com/ota-meshi/eslint-plugin-jsonc/releases)
- [Changelog](https://github.com/ota-meshi/eslint-plugin-jsonc/blob/master/CHANGELOG.md)
- [Commits](https://github.com/ota-meshi/eslint-plugin-jsonc/compare/v2.11.2...v2.12.2)

Updates `eslint-plugin-vuejs-accessibility` from 2.2.0 to 2.2.1
- [Release notes](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/releases)
- [Changelog](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/CHANGELOG.md)
- [Commits](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v2.2.0...v2.2.1)

Updates `eslint-plugin-yml` from 1.11.0 to 1.12.2
- [Release notes](https://github.com/ota-meshi/eslint-plugin-yml/releases)
- [Changelog](https://github.com/ota-meshi/eslint-plugin-yml/blob/master/CHANGELOG.md)
- [Commits](https://github.com/ota-meshi/eslint-plugin-yml/compare/v1.11.0...v1.12.2)

Updates `vue-eslint-parser` from 9.4.0 to 9.4.1
- [Release notes](https://github.com/vuejs/vue-eslint-parser/releases)
- [Commits](https://github.com/vuejs/vue-eslint-parser/compare/v9.4.0...v9.4.1)

---
updated-dependencies:
- dependency-name: eslint-plugin-jsonc
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: eslint
- dependency-name: eslint-plugin-vuejs-accessibility
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: eslint
- dependency-name: eslint-plugin-yml
  dependency-type: direct:development
  update-type: version-update:semver-minor
  dependency-group: eslint
- dependency-name: vue-eslint-parser
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: eslint
...

Signed-off-by: dependabot[bot] <support@github.com>

* v Revert eslint-plugin-vuejs-accessibility update

* ! Fix `progress` missing label

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: PikachuEXE <git@pikachuexe.net>
2024-01-29 18:01:12 +01:00
Jason 64e3f32f78
Video title filter / blacklist (#4202)
* Implement hiding of videos with user-inputted text

* Implement ft-input minInputLength

* Enable for playlists

* Enable feature on channel pages

The premise for this change is that users would not want to see that forbidden content anywhere, as opposed to hidden channels, where you're clearly on a channel page to see things from that channel.

* Fix 'Play Next Video' playing forbiddenTitle videos and hidden channel videos

* Fix issue of hidden recommended videos taking up vertical space

* Rename variables to better match non-video-specific function, and remove blocks from History and videos in playlists

* Fix to respect hideForbiddenTitles value

* Modify label

* Clarify restriction affecting original titles

* Add toast for entered input of length below min input length

* Add toast for element already exists

* Update to not clear if duplicate tag is entered for Hide Forbidden feature
2024-01-22 17:59:46 -05:00
PikachuEXE c40b4a69d5
(Multiple) Local Playlist (instead of saving video in one hidden list) (#4234)
* ! Fix add/removing videos from favourite list

* ! Fix playlist type not passed into video list item component

* ! Fix playlist data loading issue on new windows

* ! Fix user playlist data parsing

* * Ensure playlist view rerender on video additonal removal for displayed playlist

* ! Fix icons & moving videos up/down in user playlist

* * Don't show move up/down buttons when cannot be done

* * Make user playlist view filtering function now works for filtering playlists

* ! Fix style of prompt from any button within playlist-info component

* $ Refactor a function to use early return style

* * Disallow empty playlist name when saving in playlist edit mode

* * Update add video to playlist prompt to have simple filtering like user playlist view

* * Update playlist view to only show video reorder/remove buttons in edit mode

With notice message

* ! Fix playlist view for remote playlist unnecessary reload on save

* ! Fix add to playlist prompt behaviour when some playlists are hidden due to filtering

* $ Remove unused watch function arguments

* * Update user playlist view create new playlist button position

* * Update playlist view to add transitions to video reorder/removal

* * Allow playlist with different case to be created

* * Update visibility of user playlist related action components according to hide playlist settings

Only those visible on video, remote playlist are updated

* * Update video items to only show add to playlist buttons on hover

* - Remove add to favorites button from video list item component

* * Update watch-video-info component to add "add to playlist" button

* * Update watch-video-info component to remove "add to favourite" button

* * Ensure video thumbnail image displayed in 16/9 aspect ratio

Mainly due to YT missing video thumbnail image got different aspect ratio 4/3

* * Update new buttons theme

* * Put edit playlist button before copy button

* * Move "remove video from playlist" button to most right

* * Make video reorder & remove button visible on hover in user playlist view, regardless of "edit mode"

* ! Fix video count parsing for user playlist

* * Update user playlist to allow duplicate video entries (per video ID)

* * Remove extra attributes assignment to video object except `timeAdded`

Unintended change

* * Update copy playlist button to like adding multiple videos to playlists

* * Update copy playlist prompt to prefill title if create new playlist prompt shown

* * Ensure all playlists have `playlistName`

* $- Remove unused playlist property `removeOnWatched`

* * Update read all playlist code to ensure existing "default" playlist properties (_id, protected) have same values as those in default

Also fix issue discovered during testing

* *- Remove unnecessary code line

* * Update playlists from default playlists to be deletable

* ! Fix duplicate `timeAdded` value for videos copied from user playlist

* ! Fix playlist import (tested with db file exported from this branch)

* * Update grid view to only display playlist title up to 255 chars

Still can see full title in single playlist view

* * Update add video to playlist prompt to only display playlist title up to 255 chars

* * Update text of new playlist button to be same as new profile button

* * Ignore many extra keys from playlist objectrs

Also make data import check for object keys against required keys not key counts

* * Disallow playlist import from changing internal playlist ID of existing playlists

Existing playlists are matched by playlist name, not by internal playlist ID

* * Ensure playlist name & description trimmed when saved

* * Add missing change for importing playlist to ignore `protected`

* $ Refactor code for "video object has all require keys"

* ! Fix style of prompt from any button within playlist-info component again

z-index war

* * Update some empty message & button text

* * Ensure playlist item action buttons are hidden during animations

* ! Fix other prompt z-index

* * Update `showAddToPlaylistPromptForManyVideos` to throw error when required keys missing from passed in video data

* *- Remove unused video property `paid` from playlist related code

* *- Remove unused video property `type` from playlist related code

* ! Fix duplicate playlist displayed on playlist conversion

* *- Remove unused video property `published` from playlist related code

* * Don't require & generate property `timeAdded` when display a prompt

* *- Remove unused video property `isLive` from playlist related code

* ! Fix text

* ! Revert code change for debugging only

* ! Fix CSS for "Ensure playlist item action buttons are hidden during animations"

* * Update add playlist button to be shown for live videos

* + Add clear all playlists button

* * Update add video to playlist prompt to swap "save" & "create playlist" button

* ! Fix playlist view won't load after default playlist added due to lack of playlist

* * Show toast message when no playlist selected after pressing save button

* * Update add video to playlist prompt to show latest updated playlist first

Easier for copying playlist with new playlist(s)

* ! Fix watch page when visited via history after viewing the video from a deleted user playlist

* ! Fix share buttons emitting user playlist IDs

* * Add toast message after removing all playlists

* ! Fix remote playlist video list rendering with duplicate videos

* ! Fix missing key for some direct child elements under `transition-group`

* ! Fix animation introduced to unnecessary elements

* ! Prevent video link click during animation

* ! Fix playlist creation/removal not reflected in other windows

* * Ensure playlist visual selected state in sync with data in parent

* * Update add video to playlist prompt to auto select playlists created after prompt shown once

* * Update copy playlist button to show warning about not loaded videos when some not loaded yet

For remote playlist

Won't work for Invidious though (coz no way to load more)

* * Update add video prompt to make it easier to access buttons via keyboard

* * Make video reorder & remove button always visible in user playlist view

* * Make plus button can be focused with tab

Side effect is thumbnail link can be focused too (otherwise can't make plus button visible)

* * Update add video to playlist prompt to focus on search input on shown

* * Accept playlist optional property `createdAt` when importing

* * Update playlist view to always show add to playlist button

* $ Refactor `inUserPlaylist`

Only playlist view would supply `playlistType`

* * Improve accessibility for new prompts

* * Make edit playlist inputs focused on entering edit mode

* * Make most prompts focus back to last focused element on close

* $ Use tabindex 0 for prompts

Possible tabindex values unnecessary with elements programatically focused

* * Update add video to playlist prompt to focus back to search input after new playlist created

* * Update ft-list-video to focus back on thumbnail link element after add to playlist prompt closed

* ! Fix unable to import duplicate video entries into an existing playlist

* ! Fix create playlist prompt looks unclosed after playlist created when opened via add video to playlist prompt

* ! Fix duplicate video entry ID when playlist with duplicate videoId entries copied to another playlist

* ! Fix issues caused by last merge in e291cc8b41b2273a0d77c9f35ea760f0e0f7ac10

* $ Remove unused imports

* ! Fix default playlists added when no playlist stored had no required attributes added on 1st run

* ! Fix invalid prop type warning

* * Use v-if instead of v-show

* $ Just assign bool value instead of if-else

* + Update playlists view to add sorting option

* $- Remove unnecessary property assignments

* ! Fix issues caused by "Remove unnecessary property assignments"

* ! Fix issues caused by "Remove unnecessary property assignments"

* * Ensure sort by time also fallbacks to playlist name sorting

* ! Fix add/remove video does not update playlist last created time

* ! Fix multi window playlist sync

* * Show filtering input & sorting element when no. of playlist > 1

* * Update upcoming video to allow saving in playlist

* ! Fix unable to visit previous video when playing first video in a playlist

* * Update sorting options labels

* ! Fix add to play prompt max width

* ! Fix user playlist view incorrectly sorted playlists by latest updated first when filtered

* * Update add to playlist prompt to add sort options

* $ Remove unused classname

* ! Ensure new playlist button focused after add to playlist prompt closed while thumbnail link unselectable

* * Add playlists sort order for last played at, update it on play

* ! Fix bug introduced by last merge

* ! Fix thumbnail not respecting backend preference

* ! Fix empty playlist thumbnail in single playlist view

* * Make adding large no. of videos faster

* $ Remove unused mapActions entries

* $ Remove unused and unusable playlist code for inserting video IDs into a playlist

* * Update single playlist view to only show `Remove watched videos` btn when there is any video

* ! Fix prompt style issue caused by old branch changes

* ! Fix removing video from local playlist remove all entries with same video ID

* ! Fix adding video does not have uniqueID & timeAdded set

Caused by previous add many video performance fix

* ! Fix navigation in user playlist between entries of same video

* * Reflect playlist updates on watch page playlist panel

* $- Remove outdated incorrect prompt style fix

* ! Fix add video to playlist prompt too high when there are too many playlists

* ! Fix watch page play next/prev video in local playlist

* ! Fix error in online playlist playing

* * Keep partial playlist backward compatibility by restoring `type` in persisted playlist videos

* ! Fix grid item for playlist to hide external player button for local playlist

* * Make history rememeber uniqueId (local playlist video entry) when playing video with local playlist

* ! Fix grid item for video in user playlist to hide external player button

* ! Fix grid item for video in history with user playlist to hide external player button

* ! Fix grid item for video in watch page playlist component with user playlist to hide external player button

* * Update watch page to clear `uniqueID` from query when not playing local playlist

* ! Fix watch page about user playlist detection on new window

* * Reflect playlist updates on watch page playlist panel, even for currently playing video

* ! Allow video with local playlist to be played in external player, but without playlist

Also add missing fix for WatchVideoInfo

* ! Fix external player handling for video in local playlist

* ! Fix ft-video having different URLs in links

* yarn run lint-style-fix

* $ Rename uniqueId to playlistItemId

* * Ensure local playlist ID won't conflict with remote playlist ID

* - Remove import video while creating playlist related code

* * Make text translatable

* * Make sort option text translatable

* ! Fix reverse condition

* $ Just use ?.

* Code review changes

* Spaces

* beforeDestroy

* Remove unused methods

* Remove infoData

* filter > find

* avoid importing `crypto` from NodeJS

* Compress CSS ruleset

* $ Remove useless prefix from key

* Use template for element with v-if only

* Make playlist selector look more selectable (cursor: pointer)

* Translate toast messages and fix remove watched videos from playlist

* ! Fix translation

* - Remove unused methods

* $ Remove workaround for issue which cannot be reproduced anymore

* $ Remove remaining useless code following last commit removing workaround

* you have no playlist > you have no playlists

* CSS use var --horizontal-directionality-coefficient

* * Update danger buttons color to primary (like clear search cache button)

* ! Fix playlist icon container size

* ! Fix sorting in add video to playlist prompt when filtered

* $- Update ft-inputs to removed prop input-tabindex

* ! Fix vue warning

* + Add toggle to export playlist for older FT

* * Update tooltip text

* ! Fix vue warning

* * Update text align

* * Remove the extra surrounding spaces

* Backtick > quote

* - Remove useless prop

* Fix tootip in lower width view

* Update default filename

* * Make tooltip auto-wrap

* Revert "* Make tooltip auto-wrap"

This reverts commit 7d932b936c.

* Adjust tooltip styling

* * Wait for local playlist loading only when playing with a user playlist

* * Wait for local playlist loading only when playing with a user playlist requested

Request user playlist can still be absent (but not requested for no playlist or remote playlist)

* ! Fix single playlist view cover image having link when no video

* ! Workaround create playlist prompt won't close when enter pressed in input box

* ! Fix clear text button style

* ! Fix copying playlist twice to the same user playlist produces same playlistItemId

* ! Fix add video to playlist prompt input box style

* ! Fix workaround for "create playlist prompt won't close when enter pressed in input box"

* ! Ensure add video to playlist prompt updated when a playlist deleted (in another window)

* ! Avoid saving and displaying unwanted video attributes into playlists

* ! Fix playlist view for deleted user playlists

* ! Fix copying playlist twice to the same user playlist produces same playlistItemId

Real fix
Cause of issue: updating property of input objects (which is shared across multiple run)

* ! Fix search suggestions being blocked by playlist info component in single playlist view

* ! Fix warning when reversing playlist in watch view

* ! Fix prompt in playlist view (playlistinfo component) not above sidebar

* Remove CSS top comments absent in other CSS files

* Remove not useful comment for CSS

* Float with variable

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>

* Revert "! Fix clear text button style"

This reverts commit 44ed286848.

* Missing change for Revert "! Fix clear text button style"

* $ Remove unused style for ft-playlist-selector

* Apply changes from review

* * Use $tc for translation entries with different value according to count values

* ! Fix playlist link in watch view

---------

Co-authored-by: Jason Henriquez <jasonhenriquez@protonmail.com>
Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
2024-01-03 19:44:57 +01:00
Benjababe 7805763b09
Truncate title of playlist in queue window (#4134)
* truncate title of playlist in watch window

* Update src/renderer/components/watch-video-playlist/watch-video-playlist.vue

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2023-10-14 11:35:15 +00:00
PikachuEXE 5c8d49bf51
! Fix playlist item fetching for local API (#4102) 2023-10-07 22:14:16 +00:00
Jason 3db6f437c9
Implement Stylelint linting of CSS logical properties (#4023)
* Add Stylelint plugin and rule for evaluating use of logical properties

* Implement stylelint-advised use of logical properties in SCSS files

* Implement stylelint-advised use of logical properties in CSS files

* Implement stylelint linting before each commit to any branch of the repo

* Remove other Stylelint plugins so that we can add them in later one-by-one

After discussing this with the FreeTube team, it seems that we are still undecided on which rules we want to be active, including ones currently enabled. As a stopgap fix, we disabled Stylelint checking in our pre-commit Git hook and our recommended
> freetube@0.19.0 lint-fix
> run-p eslint-fix lint-style-fix command. With this change, we will be using Stylelint in our
> freetube@0.19.0 lint-fix
> run-p eslint-fix lint-style-fix command, while giving us the flexibility to add in additional desired plugins and rules as separate efforts.

* Add video player to .stylelintignore

* Replace non-logical property usage in templates

This is not enforced by the plugin at this time.

* Remove use of logical properties from ft-video-player, & allow empty input when .stylelintignore files are changed

* Update ft-video-player.css to disable use of logical property linter

We want to avoid introducing directionality-specific properties that could muck up the video player.

* Remove redundant/unnecessary scripts in package.json
2023-09-14 08:22:33 +08:00
Jason 6f2a535212
Implement right-to-left interface (#3970)
* Replace margin-left with margin-inline-start

* Replace margin-right with margin-inline-end

* Replace padding-left with padding-inline-start

* Replace padding-right with padding-inline-end

* Replace padding-top & padding-bottom with padding-block; continue replacing  padding-left and padding-right with padding-inline-start and padding-inline-end

* Add updated rtl-compatible margins to ft-slider and fix indentation

* Replace margin-top & margin-bottom with margin-block; continue replacing margin-left and margin-right with margin-inline-start and margin-inline-end

* Continue replacing with margin-block and margin-inline

* Replace left and right with inset-inline-start and inset-inline-end

This commit also changes border-left to border-inline-start, and border-right to border-inline-end.

* Replace margin-bottom, top, and bottom with margin-block-end, inset-block-start, and inset-block-end

This commit also replaces border-top and border-bottom with border-block-start and border-block-end.

* Replace text-align left and right with text-align start and end

* Fix syntax error with inset-block-end

* Implement dynamic float: left/right based on direction ltr/rtl

* Implement dynamic navigation arrow placement based on direction ltr/rtl

To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.

* Add direction to body based on preferred language

* Implement horizontal directionality coefficient to fix translate working in wrong x-direction for rtl languages

* Add explicit text-align: start in places to ensure rtl version is correctly aligned

* Add text-align: start to places where it is not inferred to enable proper rtl text orientation

* Fix search bar magnifying glass being too far right issue

* Move body.dir-setting logic to setLocale to fix dir not setting correctly on page reload

* Change .switchColumn to have align-items: start instead of justify-items: start

I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.

* Fix emergent bug in which history icons are temporarily disabled on changing language to one with different directionality

Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.

* Add Kurdish to rtl languages list & add li items to be right-aligned on rtl languages

* Force FreeTube logo to be ordered left-to-right for 'brand consistency'

* Add styling flipping font-awesome icons for rtl languages except for exclusion list

* Update isRightAligned with additional languages, and use it instead of locale value from store

Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.

* Update isRightAligned property name to more clearly reflect rtl purpose

* Simplify left/right arrow display logic

Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.

* Replace justify-self: left & justify-self: right with justify-self; start and justify-self: end

* Remove misguided attempt to emulate directionality-agnosticism with rightAligned class

* Explicitly center FreeTube version on About page

* Replace pre-existing identation issue

* Replace margin-left with margin-inline-start

* Replace margin-right with margin-inline-end

* Replace padding-left with padding-inline-start

* Replace padding-right with padding-inline-end

* Replace padding-top & padding-bottom with padding-block; continue replacing  padding-left and padding-right with padding-inline-start and padding-inline-end

* Add updated rtl-compatible margins to ft-slider and fix indentation

* Replace margin-top & margin-bottom with margin-block; continue replacing margin-left and margin-right with margin-inline-start and margin-inline-end

* Continue replacing with margin-block and margin-inline

* Replace left and right with inset-inline-start and inset-inline-end

This commit also changes border-left to border-inline-start, and border-right to border-inline-end.

* Replace margin-bottom, top, and bottom with margin-block-end, inset-block-start, and inset-block-end

This commit also replaces border-top and border-bottom with border-block-start and border-block-end.

* Replace text-align left and right with text-align start and end

* Fix syntax error with inset-block-end

* Implement dynamic float: left/right based on direction ltr/rtl

* Implement dynamic navigation arrow placement based on direction ltr/rtl

To the fullest of my understanding, it is expected for the left navigation in rtl-supporting browsers to be for forward navigation, and the right one to be for backward navigation.

* Add direction to body based on preferred language

* Implement horizontal directionality coefficient to fix translate working in wrong x-direction for rtl languages

* Add explicit text-align: start in places to ensure rtl version is correctly aligned

* Add text-align: start to places where it is not inferred to enable proper rtl text orientation

* Fix search bar magnifying glass being too far right issue

* Move body.dir-setting logic to setLocale to fix dir not setting correctly on page reload

* Change .switchColumn to have align-items: start instead of justify-items: start

I have validated this for all settings tabs; the justify-content: start did nothing in any language, left-to-right or right-to-left. Replacing it with align-items: start aligned all menu switch items by their switches, not by their labels. This makes for a much more uniform settings section for trl languages.

* Fix emergent bug in which history icons are temporarily disabled on changing language to one with different directionality

Given that which icon is displayed for which history arrow is now dynamic based on the user's directionality, changing of the icon resets the font-awesome-icon state and thus re-adds the base disabled class to both arrows. This means that changing your language to one that has a different directionality was falsely setting the arrows to their disabled state (until the route is changed, after which the history icons will be fully back to normal). This commmit refactors the history icon setting logic to use class binding to two booleans in the top-nav component's data rather than adding and removing the disabled classes directly to the arrow elements' classLists, thus cleaning up the implementation and fixing the bug.

* Add Kurdish to rtl languages list & add li items to be right-aligned on rtl languages

* Force FreeTube logo to be ordered left-to-right for 'brand consistency'

* Add styling flipping font-awesome icons for rtl languages except for exclusion list

* Update isRightAligned with additional languages, and use it instead of locale value from store

Kudos to absidue for pointing out this existing function for representing this, and that it grabs directly from the i18n object. This means that FreeTube will display the proper rtl interface if one is the user's system language, where it did not before.

* Update isRightAligned property name to more clearly reflect rtl purpose

* Simplify left/right arrow display logic

Leverage the icons being flipped rather than manually setting the classes to their opposites when the directionality is RTL.

* Replace justify-self: left & justify-self: right with justify-self; start and justify-self: end

* Remove misguided attempt to emulate directionality-agnosticism with rightAligned class

* Explicitly center FreeTube version on About page

* Fix question mark reversing logic for Arabic, Hebrew, Persian, and Urdu

* Fix minor indentation issue

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Remove unused function

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Update src/renderer/components/ft-slider/ft-slider.css

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-09-09 18:29:26 +02:00
Benjababe 15437347b4
Add button to pause playlist after current video (#3938)
* Rounded playlist buttons to circles

* Add pause button for playlists

* reverted en_GB changes
2023-09-07 09:28:21 +08:00
Jason c371f6035d
Pastel & Hot Pink Themes (#3937)
* Add pastel and hot pink base configuration & labels

* Update Author Background Color to be based on --secondary-card-bg-color instead of --scrollbar-color

This unneeded dependency on the scrollbar color here resulted in the Author Background text blending into its background on the new Hot Pink theme. This change does not tangibly affect any other theme, whose scrollbar colors are incidentally similar to the secondary-card-bg-color, as this color is already being used for tags on the Channel About tab.

* Implement Pastel Pink and Hot Pink styling

Note that Hot Pink styling overwrites the primary and secondary color themes to maintain accessible color contrasts throughout FreeTube. It also updates the underline styling to match its aesthetic. The scrollbar-text-color-hover and side-nav-active-text-color colors are added for allow for the text and icon to both change on hover. This allows for more accessible hover and active styling.

* Add textWhiteSmall and iconWhiteSmall to repo; add FT pink icon themes

The textWhiteSmall was actually already sized exactly the same as the other small text files, so I just changed the name to reflect that fact.

* Add side-nav-hover-text-color and side-nav-active-text-color throughout FT

* Update Hot Pink theme accent-color-active

* Add side-nav hover-text and active-text styling to ft-icon-button

* Fix incorrect variable name

* Disable primary & secondary color theme controls when hot pink theme is enabled
2023-09-01 09:17:46 -04:00
absidue 8c6bfaafa6
Fix playlist view on the watch page not reacting to playlist changes (#3897) 2023-08-21 09:12:27 +08:00
absidue bf24630f92
Upgrade YouTube.js to version 6.0 (#3895) 2023-08-19 16:11:20 +00:00
PikachuEXE d3b3be7794
Update watch view playlist component to auto scroll to current video (#3399)
* * Update watch view playlist component to auto scroll to current video

* ! Fix window being scrolled when playlist is out of initial view

* * Use `nextTick` instead of `setTimeout`

* Revert "* Use `nextTick` instead of `setTimeout`"

This reverts commit 9215b0fe54.

* * Remove setTimeout, fix issue when Invidious API used
2023-05-18 22:13:42 -04:00
PikachuEXE 0e11fd06f1
Update watch page to stop at end of playlist (when loop disabled) without countdown (#3362)
* * Update watch page to stop at end of playlist (when loop disabled) without countdown

* Update src/renderer/views/Watch/Watch.js

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* ! Fix playlist end message shown when loop enabled

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2023-04-27 17:10:14 +02:00
PikachuEXE 454534adb7
Fix some translation entries sometimes not used when rendered (#3337)
* * Update all translation keys with 2 spaces to have 1 space only

Avoid not being translated when rendering

* - Remove unused translation entry
2023-04-08 22:50:52 +00:00
PikachuEXE a878ff395a
Fix error when playing video with playlist with Indivious API and... (#3294)
* ! Fix error when playing video with playlist with Indivious API

* ! Fix switching comment sort does not get first page of comments
2023-03-14 14:18:48 -04:00
absidue 2cd8f0f2d3
Switch from Vue.extend to defineComponent (#3066) 2023-01-18 08:50:02 +01:00
ChunkyProgrammer 03f73c5d33
Move invidious out of stores (#3045)
* move invidious out of stores

* fix getting more replies & local api fallback for comments

* throw error if error message found in invidious response

* fix issue with data setting

* fix issue with replacing thumbnails

* add bank line, remove slash

* Apply suggestions from code review

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2023-01-12 07:55:21 +01:00
absidue b157495552
Add more electron guards (#3031) 2023-01-05 04:53:39 +01:00
absidue b77455ec81
Lazy load playlist components to improve performance (#2993) 2022-12-26 19:15:55 +01:00
ChunkyProgrammer 42ef2a3e26
Improve accessibility of Watch View (#2986)
* Improve Watch page accessibility

Co-Authored-By: Jason <84899178+jasonhenriquez@users.noreply.github.com>

* fix title issue, remove unused gotochannel function

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
2022-12-23 16:44:54 +00:00
absidue dd18634fdc
Pass playlist data from playlist page to watch page (#2970)
* Pass playlist data from playlist page to watch page

* Remove unused properties
2022-12-19 11:43:28 +01:00
absidue c9124359a5
Migrate playlists on the watch page to YouTube.js (#2969) 2022-12-16 18:08:56 +01:00
absidue ac509bd17b
Make some more elements right-clickable (#2968) 2022-12-16 05:06:18 +01:00
absidue 8f55a648b1
Cleanup unused component imports (#2773) 2022-10-27 09:34:39 +00:00
absidue f970936d1e
Make copyToClipboard and openExternalLink helpers (#2722) 2022-10-18 08:15:28 +00:00
absidue 3aa080d707
Make showToast a helper (#2695) 2022-10-14 05:59:49 +00:00
ChunkyProgrammer 7822f7423e
Remove console.logs (#2606)
* remove console.logs

* use 'off' instead of 0
2022-09-23 09:04:10 +08:00
Emma 25d954f990
Cleaning up calls to the Clipboard API (#2597)
* Added a copyToClipboard function to utils

This should make it easier to handle errors which
result from the clipboard API (which are more likely
in web builds). This should also make it easier to handle
copying to clipboard in cordova builds by abstracting the
platform specific code out of the views and moving it
all into one function.

* Moved the $t function out of utils

* Removing locale snippets I was using and am not now

* Added function comment to copyToClipboard

* Adding some missing references

* Adding an additional check

* Re-reviewing my changes, I found a mistake

* Update src/renderer/store/modules/utils.js

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Update static/locales/en-US.yaml

Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>

* Reverting the language back to what it was previously

* Switching to using i18n.t()

instead of handling the translations myself.
Also, it looks like eslint removed a tab.

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
2022-09-21 15:00:21 +08:00
absidue f2d2827e0f
Fix some web issues and cleanup (#2582) 2022-09-17 08:19:31 +00:00
absidue 62829b736a
Electron variable at build time instead of at runtime (#2574) 2022-09-15 08:59:09 +00:00
absidue eaa15ea833
Webpack bundle dependencies (#2511)
* Allow webpack to bundle *most* dependencies

* Exclude *most* node_modules from getting packaged by electron-builder

* Import only the required icons instead of bundling the whole icon pack

* Reduce packaging blacklist to only include the few things that still need blacklisting
2022-09-06 02:29:10 +00:00
d 4f9aa231cb
add playlist progress bar (#2402)
* add playlist progress bar

could use some css

* theme and lint
idk if those changes to the package.json or yarn.lock are ok but
it wouldent lint without them :/

* hopfuly fix errors

* why is this not working

* this is anoying.

* fix some other issues

thx @PikachuEXE

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* spelling mistake

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>

* will not display if playlist is shuffled or
reversed

Co-authored-by: makerio90 <makerio1@pm.me>
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2022-08-16 12:37:16 +02:00
absidue 0146a63ce6
Add support for next/previous/pause/resume global hotkeys/actions (#2239) 2022-05-23 09:48:49 +08:00
PrestonN 2d7cd466bc Remove logic for getting the next page in the Invidious API as it isn't needed anymore 2021-11-11 16:29:37 -05:00
ChunkyProgrammer 27617ccc40
[Fix] Freetube does not play the next video in a playlist when using the Invidious API (#1488)
* fix playlists for invidious

* Code clean up + bug fix

Co-authored-by: Preston <freetubeapp@protonmail.com>
2021-08-24 20:52:30 +00:00
kuhaku 52fa523df1
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 28b4713334.

* 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
Svallinn 6ccc7e9fa4
Refactor: Swap `dispatch`/`commit` calls with mapped actions/mutations 2021-05-22 00:56:32 +01:00
Preston cb8cf1ef43 Start progress on fixing Search and Playlist for local API 2020-12-13 23:17:43 -05:00
Preston a85a974995 Update watch-video-playlist.css 2020-12-07 10:35:42 -05:00
Preston 895906e2f6 Fix playlist watch video playlist information and fix recommended videos list 2020-11-28 19:44:17 -05:00