Commit Graph

1318 Commits

Author SHA1 Message Date
Jason 881bc67aac
Add logo hover styling (#4209) 2023-10-23 00:21:01 -04:00
PikachuEXE 4043961912
Upgrade electron from 22.x to 27.x and replace deprecated `protocol.registerBufferProtocol` (#3967)
* ^ Upgrade electron from 22.x to 27.x

* * Replace deprecated registerBufferProtocol
2023-10-20 23:39:07 +02:00
PikachuEXE b55ad5d327
! Fix single playlist view item index style (#4179) 2023-10-20 17:50:48 +02:00
absidue 046462e024
Fix proxy settings test (#4192) 2023-10-20 15:40:40 +00:00
Surav Shrestha ccb5247bd4
fix typos in src/main/index.js comments (#4180) 2023-10-18 18:23:21 +02:00
absidue 05499ce113
Fix playlists not showing up on artist topic channels with the local API (#4129) 2023-10-16 16:17:02 -04: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
Emma 1a92d4b1b7
Wrap channel tabs as soon as there isn't enough screen space (#4139)
* Wrap channel tabs as soon as there isn't enough screen space

* Remove redundant `flex-wrap`
2023-10-14 11:20:19 +00:00
Benjababe 3c0ed260c1
Keep download folder path when changing to 'ask for download path' and back (#4101)
* separate ask download folder from folder path value

* update variable name

* update download folder prompt handling
2023-10-10 22:44:57 -04:00
absidue 0ebcd24522
Fix error when clicking on the current quality in the DASH quality selector (#4130) 2023-10-11 09:31:04 +08:00
ChunkyProgrammer fffd1393b0
IV: Show channel handle in search results (#3791)
* IV: Show channel handle in search results

* move handle to front, add separator

* remove unused locale key
2023-10-10 20:31:42 +00:00
Jason 8a456834ad
Fix styling for Channel page on desktop view (#4112) 2023-10-08 18:29:07 +02:00
absidue b72091a9dd
Set new consent cookie and supress tracking cookies on the watch page (#4013)
* Set new consent cookie and supress tracking cookies on the watch page

* Cleanup the resources on macOS too

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

---------

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-10-08 09:40:58 -04:00
PikachuEXE 5c8d49bf51
! Fix playlist item fetching for local API (#4102) 2023-10-07 22:14:16 +00:00
PikachuEXE 0c92b63b99
! Fix watch page video published time parsing (#4105) 2023-10-07 21:15:51 +00:00
PikachuEXE c936a0ea5e
Update FT history import to accept key lastViewedPlaylistId (#4038)
* * Update FT history import to accept key `lastViewedPlaylistId`

Also update the strange required key check logic
Which was last changed by 58882b3e16

* * Remove unused video property `paid`
2023-09-29 13:16:00 -04:00
Jason bff3a2f824
Mobile/tablet channel page & share button visual improvements (#4061)
* Implement fix to elements escaping container on Channel page at small widths

* Show all Channel tabs on smaller viewport widths & reduce bulky gap

* Update Channel page to not break at even lower sizes

* Re-introduce channel button clipping fix

* Implement updated share button styling

* Fix issue with prompt box shrinking on small enough viewport sizes / overflow

* Update share button to work at all sizes'

* Fix pre-existing issue of Channel tabs overflowing on desktop view in some locales
2023-09-25 14:56:30 +00:00
absidue d91f82f977
Support multiple audio tracks and AV1 for Invidious by using the local API DASH manifest generator (#3942)
* Support multiple audio tracks and AV1 for Invidious by using the local API DASH manifest generator

* Upgrade YouTube.js to 6.2.0 to fix default track selection

* Fix audio formats

* Use Intl.DisplayNames to get the language names

* Simplify returns

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

---------

Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
2023-09-25 10:55:47 -04:00
Jason 112a76e020
Normalize ft-list-item grid height (#4043)
* Normalize ft-list-item grid height

* Update src/renderer/scss-partials/_ft-list-item.scss

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

---------

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-09-25 14:23:31 +00:00
PikachuEXE 825aa4e332
! Fix in sub view, restoring last tab is bugged when visible tabs do not include tab to be restored (#4064) 2023-09-23 19:11:17 +00:00
ChunkyProgrammer 47ef3e5746
Subscriptions: Add community tab (#3973)
* Add subscription community tab

* fix up community tab

* simplify if statement

* use global.community for all references to community

* dont show community when useRss is set

* check visibleTabs for showing the community tab

* fix caching, decrease datalimit for community, add missing translations

* L: Hide shared posts, IV: Don't show errors for empty community tab

* add links to related issues
2023-09-23 00:19:50 +00:00
Jason 9d80737907
Fix buttons intersecting on Subscribed Channels tab (#4058)
* Fix buttons intersecting on Subscribed Channels tab in many languages

Note that this can still occur if one of the words in 'Unsubscribe' is pretty big on smaller screen sizes, e.g., Svenska at 515px. This is because we allow the Unsubscribe button to be wider than the element itself, which is hard to change here without completely reworking the structure using  (due to limitations with minmax being unable to have fit-content in a grid definition).

* Update src/renderer/components/ft-subscribe-button/ft-subscribe-button.css

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

---------

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-09-20 15:14:34 -04:00
MaxMaxMaxCh 529402638a
fix bug with tabbing into three dots menu #4022 (#4060) 2023-09-20 21:10:16 +02:00
Jason a271d4548f
Fix Subscribe button being clipped on Channel page (#4057) 2023-09-19 23:26:24 +02:00
absidue c29d947d5c
Avoid extending the VueI18n class as it won't exist in Vue 3 (#4046) 2023-09-18 18:39:36 +00:00
absidue b80d2c8a2a
Fix comment author focus outline being broken (#4041)
* Fix comment author focus outline being broken

* Wrap overflowing text

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

---------

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
2023-09-18 14:14:22 -04:00
absidue c8be5bdfce
Avoid extending the VueRouter class as it won't exist in Vue 3 (#4047) 2023-09-18 12:13:47 +00:00
absidue 9106791698
Fix focus disappearing when visiting the settings (#4042) 2023-09-18 07:00:54 -04:00
absidue d333990fbc
Improve performance of the watch history handling (#4017)
* Improve performance of the watch history handling

* Remove duplicate checks for whether history entries exist

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

* Remove leftover `typeof`

---------

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-09-13 21:31:07 -04: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
ChunkyProgrammer 67bdf718c0
Fix localization of counts (#4011)
* Fix localization of counts

* Apply suggestions from code review

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

* Remove unused locale resources

---------

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-09-12 19:38:36 +02:00
trostboot b4223e5f29
Sort list of external players (#4036)
* Sort list of external players

* Condense sorting logic

* Rework sorting in utils.js

* Simplify sorting logic
2023-09-12 19:21:52 +02:00
Jason efaf50ec8f
Implement Favorites icon persisting for favorited videos (#4012) 2023-09-12 09:09:49 +08:00
Benjababe 8c07ef3521
Add subscribed icon to comments (#4007)
* add subscribed icon to comments

* update subscribed img src

* update subscribed icon css

* add author id to local api comments

* update subscribe icon on theme change

* add subscription icon to comment replies

* Update src/renderer/components/watch-video-comments/watch-video-comments.css

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

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2023-09-11 07:14:18 +08:00
ChunkyProgrammer c7025b648c
Search: Add hashtags to results (#3780)
* Add hashtags to search results

* add global count , implement changes from code review

Co-Authored-By: absidue <48293849+absidue@users.noreply.github.com>

* use h3 for title of hashtag element

* implement suggestions from code review

* use hashtag.text, move url update logic

* encodeURI for hashtag url

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
2023-09-09 18:32:59 +02: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
absidue e832f22c6f
Default theatre mode no sidebar (#3981)
* Revert "! Fix watch page layout when theatre mode enabled and sidebar "hidden" (#3931)"

This reverts commit 621cc27938.

* Fix the watch page layout when the sidebar is hidden and theatre mode mode is enabled by default

* Do not use theatre mode while loading
2023-09-06 23:43:27 -04: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
absidue 2cecb56a75
Make ft-channel-bubble an actual link when it is being used as one (#3980) 2023-09-06 09:57:19 +00:00
Svallinn 1003763b01
Chore: Update vscode configurations (#3986) 2023-09-05 05:26:11 +00: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
David Frederick Batt 884ba91115
Add option to change thumbnail appearance (#3890)
* Add option to blur thumbnails

* Add dropdown for different thumbnail display modes

* Add dropdown for different thumbnail display modes

* Fix thumbnail display mode setting not appearing due to incorrect localization

* Rename thumbnail display mode option 'Not Loaded' to 'Hidden'

* Fix thumbnail display mode 'hidden' not working

* Fix thumbnail display mode not applying to playlists

Makes thumbnail display mode setting also affect thumbnails in ft-list-playlist and playlist-info.

* Remove unnecessary styling

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

* Make hidden thumbnails toggleable from thumbnail preferences

* Replace thumbnail placeholder png with svg

* Fix thumbnail preference 'hidden' not applying to ft-list-playlist

* Fix placeholder svg breaking playlist layout

* Refactor ft-list-video

---------

Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
2023-08-31 11:18:52 -04:00
PikachuEXE 621cc27938
! Fix watch page layout when theatre mode enabled and sidebar "hidden" (#3931) 2023-08-30 03:13:11 +00:00
Benjababe 0b44548331
Include hide comment photos setting (#3939)
* Added hide comment photos option into settings

* Hide comment photos if setting is enabled

* include hidden photos for comment replies

* Always show video uploader photo in comments

* reverted en_GB changes

* Updated settings to "Hide Profile Pictures in Comments"
2023-08-30 00:08:55 +00:00
PikachuEXE 1a6c9e98c9
Make constants imported from @fortawesome/free-solid-svg-icons ordered by name again (#3958)
* $ Make constants imported from @fortawesome/free-solid-svg-icons ordered by name again

* ~ Add code comment about constant list ordering
2023-08-29 05:06:42 +00:00
Jason c5be5e5700
Fix HTML styling (e.g., hashtag links) showing up as raw HTML in descriptions (#3946) 2023-08-29 00:15:21 +02:00
Jason ce3de2bb07
Make certain controls non-selectable / non-draggable - Part II (#3957)
* This is due to my previous change which included the use of a poorly researched 'user-select: all' to unset a 'user-select'. The problem is that all does something else altogether: 'The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.' Source: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

* Add user-select:none to one more area

* Remove extraneous additional dash

Co-authored-by: LQ2' <lq2.apostrophe@gmail.com>

---------

Co-authored-by: LQ2' <lq2.apostrophe@gmail.com>
2023-08-29 00:14:35 +02:00
Jason c32b84c478
Show video list buttons on hover or focus (#3954)
* Implement external player icon and favorites icon only appearing after hover/focus

As a way of cleaning up the look of videos, only shows the video icons on hover or focus. This is for all purposes a very 'free' change that I would opine makes FreeTube appear much cleaner.

* Implement video list settings button only appearing on hover/focus

Same idea as for the favorites & external player icons; much cleaner look without any sizable 'cost' to boot.

* Ensure video list buttons always show on devices without hover (e.g., mobile)

* Remove user-select lines (already in another PR) & one extraneous line
2023-08-28 11:29:27 -07:00
Jason 665da2c1c3
Make certain controls non-selectable / non-draggable (#3947)
* Make settings heading text unselectable

I often encounter the issue of accidentally selecting/highlighting the settings heading text, which ends up highlighting all of the text inside of that settings tab. This is an unpleasant appearance that I have to click to remove. This change removes this issue altogether.

* Switch all instances of user-select to be only user-select and -webkit-user-select

* Make side-nav labels unselectable

* Make side-nav and channels un-draggable

* Remove selection from ft-flex-box, ft-input placeholders, and profile icons
2023-08-27 08:46:19 +08:00
Benjababe 08f8b2768a
Add updated video resolution to auto selector (#3935)
* CSS updates

* Include resolution to 'auto' in quality display

* Include auto info in video statistics

* Value integrity check in CreateDashQualitySelector
2023-08-26 18:20:55 +02:00