* 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
* 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>
* Comunity page strings, Communtiy tab, Community initial API call
Added:
1) Community page strings - the first few strings are now available
2) Community tab - A clickable tab is now displayed on channel pages
3) Community initial API call - on loading the page, the initial access
* Comunity page strings, Communtiy tab, Community initial API call
Added:
1) Community page strings - the first few strings are now available
2) Community tab - A clickable tab is now displayed on channel pages
3) Community initial API call - on loading the page, the initial access
* Data returning added
* Comunity page strings, Communtiy tab, Community initial API call
Added:
1) Community page strings - the first few strings are now available
2) Community tab - A clickable tab is now displayed on channel pages
3) Community initial API call - on loading the page, the initial access
* Data returning added
* Images are now displayed in the community tab
* Comunity page strings, Communtiy tab, Community initial API call
Added:
1) Community page strings - the first few strings are now available
2) Community tab - A clickable tab is now displayed on channel pages
3) Community initial API call - on loading the page, the initial access
* Data returning added
* Images are now displayed in the community tab
* Added primitive video display
* Current changes
* Added preston's change with the ftcard and started on some layout basics
* Created Community Post Component and added fetch more button + functionality
* Fixed problem with videothumbnails not loading and adjusted their height to 100% in the ft-list sass file
* Added poll and ft-list-video to the community page
* Added author name placeholder (missing in module), the published date, the likes and dislikes as well as comment counts to posts. Additionally scaling of images was added
* Added basis for community page playlists
* Finalized a setup for playlists when wide enough
* Fix for missing key in custom list
* Added publish date translation
* Add empty alt tags
Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
* fix accessibility issue
Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
* change: ununique ids to classes
* add missing alt tag
* Redirect channel/id/community to the channel's community tab
* update yt-channel-info
* update to 3.0.1
* Update yarn.lock
* add basic multiImage support
* use tiny-slider for multiImage community posts
* update getChannelCommunityPostsMore
* Update yarn.lock
* fix yarn lock
* swap community and about tab
* Update yarn.lock
* Fix missing comma
* Removed trailing spaces
* Clearing all community post data when changing to another channel
* Restructuring of how the post cards are added, Empty page text,
ft-element-list props customization
1) Now the community page uses the same setup of ft-element-list as the
other pages on the channel.
2) If no posts are available, now it displays a message saying so
3) The ft-element-list component's display style can now be forced into
a certain display mode (list/grid) with the new prop. It will overwrite
the corresponding default value for list display
* Fixed display text path
* Fix lint"
* Adjusted css to fit to new layout
* Final touches community page to tidy up the console
* fix icons, fix linter
* fix hiding showmore button for community page
* fix showToast calls
* change all this.showToast to showToaast
* reinstall tinyslider
* use helpers
* small fixes
* fix: getting continuation of community posts
* remove unused code
* improve slider style import
* fix hiding 'ShowMore' button
* fix weird typo in css
* add invidous community tab support
* remove console testing code
* Apply suggestions from code review
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
* implement suggestions, improve thumbnail replacement
* use flip horizontal
* readd invidious fallback code, remove author name workaround
* replace another google domain when using invidious
* suppport invidious multiImage posts
* Use youtube.js for community posts
* add invidious polls, remove support for fetching more
* reorder icons alpabetically
* re-allow loading more when using localapi
* fix styling of multiImage, hide NA text
* fix loading playlist
* fix spacing of items
* fix issue with direct url to community tab
* make review recommendations
Co-Authored-By: absidue <48293849+absidue@users.noreply.github.com>
* fix displaying selected tab, get best quality image
---------
Co-authored-by: Preston <freetubeapp@protonmail.com>
Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
* Migrate channel related functionality to YouTube.js
* Better alert handling
* Add support for special autogenerated channels
* Add support for latest YouTube.js changes
* Add support for age restricted channels
* Update YouTube.js to 3.0.0
* Obey hide search bar setting for the tag searching
* Choose a better parameter name
* Allow sharing terminated and age restricted channels
* Add handle support for handles on Invidious
* Fix the backend fallback
* Use a positive parameter name
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
* Fix duplicate tags causing errors
* Fix sorting for the Invidious API
* Move URL resolving to the channel page
* Update YouTube.js to 3.1.0
---------
Co-authored-by: PikachuEXE <pikachuexe@gmail.com>
* 2622 Remove select-on-focus behaviour from ft-input.
Replace this with show-clear-text-button.
* 2622 Make channel search a little wider so placeholder not truncated.
Co-authored-by: Simon Epstein <simon.epstein@67bricks.com>
* #1414: Add share button ton Channel view
- Update src/renderer/components/ft-share-button to handle Channels
- Update english locale entries for 'Share channel'
* #1414: Add share button ton Channel view
- update youtubeShareURL() in src/renderer/components/ft-share-button
* #1414: Add share button ton Channel view
- implemented the new button in src/renderer/views/Channel
* #1414: Add share button ton Channel view
- renamed mediaType to shareTargetType in ft-share-button.js
- switched logic from !isChannel to isVideo in ft-share-button.vue
* #1414: Add share button ton Channel view
- renamed target type in ft-share-button.vue
- updated implementation in Channel.vue
* Fixes#1733
* Improves Trending & Channel tab styling
Removes :focus styling for unintended effects with auto-focusing on Trending page. Replaces underline with bold text weight & primary color bottom border on selected/active tab. Replaces animated background color change with bold text weight on tab:hover. Changes inactive tab color to tertiary. Removes unnecessary margin beneath tabs. Removes some of the empty vertical space between Channel info section & channel banner. Adds margin changes to maintain good appearance on smaller screens.
Jason
absidue
ChunkyProgrammer
Emma
Luca Hohmann
Simon Epstein
Alhuin
vallode
JInfantesC
Preston
Cadence Ember