diff --git a/client/e2e/src/po/anonymous-settings.po.ts b/client/e2e/src/po/anonymous-settings.po.ts index 21216a8f2..17ee7a65d 100644 --- a/client/e2e/src/po/anonymous-settings.po.ts +++ b/client/e2e/src/po/anonymous-settings.po.ts @@ -3,10 +3,8 @@ import { getCheckbox } from '../utils' export class AnonymousSettingsPage { async openSettings () { - const link = await $$('.menu-link').filter(async i => { - return await i.getText() === 'My settings' - }).then(links => links[0]) - + const link = await $('my-header .settings-button') + await link.waitForClickable() await link.click() await $('my-user-video-settings').waitForDisplayed() diff --git a/client/e2e/src/po/login.po.ts b/client/e2e/src/po/login.po.ts index d0951d313..fad2b23ac 100644 --- a/client/e2e/src/po/login.po.ts +++ b/client/e2e/src/po/login.po.ts @@ -76,7 +76,7 @@ export class LoginPage { } async logout () { - const loggedInDropdown = $('.logged-in-more .logged-in-info') + const loggedInDropdown = $('.logged-in-container .logged-in-info') await loggedInDropdown.waitForClickable() await loggedInDropdown.click() @@ -87,7 +87,7 @@ export class LoginPage { await logout.click() await browser.waitUntil(() => { - return $$('.login-buttons-block, my-error-page a[href="/login"]').some(e => e.isDisplayed()) + return $$('my-login-link, my-error-page a[href="/login"]').some(e => e.isDisplayed()) }) } @@ -98,7 +98,7 @@ export class LoginPage { } private getLoggedInInfoElem () { - return $('.logged-in-display-name') + return $('.logged-in-info .display-name') } private getSuffix () { diff --git a/client/e2e/src/po/signup.po.ts b/client/e2e/src/po/signup.po.ts index 4da35a7d4..02cdbd2cd 100644 --- a/client/e2e/src/po/signup.po.ts +++ b/client/e2e/src/po/signup.po.ts @@ -6,7 +6,7 @@ export class SignupPage { return $('.create-account-button') } - async clickOnRegisterInMenu () { + async clickOnRegisterButton () { const button = this.getRegisterMenuButton() await button.waitForClickable() @@ -74,7 +74,7 @@ export class SignupPage { name: string } }) { - await this.clickOnRegisterInMenu() + await this.clickOnRegisterButton() await this.validateStep() await this.checkTerms() await this.validateStep() diff --git a/client/e2e/src/po/video-list.po.ts b/client/e2e/src/po/video-list.po.ts index c2dad8571..e7cd542a2 100644 --- a/client/e2e/src/po/video-list.po.ts +++ b/client/e2e/src/po/video-list.po.ts @@ -11,9 +11,9 @@ export class VideoListPage { // We did not upload a file on a mobile device if (this.isMobileDevice === true || this.isSafari === true) { - url = 'https://peertube2.cpy.re/videos/local' + url = 'https://peertube2.cpy.re/videos/browse?scope=local' } else { - url = '/videos/recently-added' + url = '/videos/browse' } await go(url) @@ -24,19 +24,13 @@ export class VideoListPage { await this.waitForList() } - async goOnLocal () { - await $('.menu-link[href="/videos/local"]').click() - await this.waitForTitle('Local videos') - } + async goOnBrowseVideos () { + await $('.menu-link*=Home').click() - async goOnRecentlyAdded () { - await $('.menu-link[href="/videos/recently-added"]').click() - await this.waitForTitle('Recently added') - } - - async goOnTrending () { - await $('.menu-link[href="/videos/trending"]').click() - await this.waitForTitle('Trending') + const browseVideos = $('a*=Browse videos') + await browseVideos.waitForClickable() + await browseVideos.click() + await this.waitForList() } async goOnHomepage () { @@ -59,10 +53,11 @@ export class VideoListPage { await this.waitForList() } - getNSFWFilter () { - return $$('.active-filter').filter(async a => { - return (await a.getText()).includes('Sensitive') - }).then(f => f[0]) + async getNSFWFilter () { + const el = $('.active-filter*=Sensitive') + await el.waitForDisplayed() + + return el } async getVideosListName () { diff --git a/client/e2e/src/po/video-upload.po.ts b/client/e2e/src/po/video-upload.po.ts index 2ea692ec9..0dd25ee94 100644 --- a/client/e2e/src/po/video-upload.po.ts +++ b/client/e2e/src/po/video-upload.po.ts @@ -3,7 +3,7 @@ import { getCheckbox, selectCustomSelect } from '../utils' export class VideoUploadPage { async navigateTo () { - const publishButton = await $('.root-header .publish-button') + const publishButton = await $('.publish-button > a') await publishButton.waitForClickable() await publishButton.click() @@ -28,7 +28,7 @@ export class VideoUploadPage { // Wait for the upload to finish await browser.waitUntil(async () => { const warning = await $('=Publish will be available when upload is finished').isDisplayed() - const progress = await $('.progress-bar=100%').isDisplayed() + const progress = await $('.progress-container=100%').isDisplayed() return !warning && progress }) diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts index 699a0b635..92a46bbba 100644 --- a/client/e2e/src/po/video-watch.po.ts +++ b/client/e2e/src/po/video-watch.po.ts @@ -222,8 +222,9 @@ export class VideoWatchPage { await confirmButton.waitForClickable() await confirmButton.click() - const createdComment = await (await $('.is-child .comment-html p')).getText() + const createdComment = await $('.is-child .comment-html p') + await createdComment.waitForDisplayed() - return expect(createdComment).toBe(comment) + return expect(await createdComment.getTagName()).toBe(comment) } } diff --git a/client/e2e/src/suites-local/plugins.e2e-spec.ts b/client/e2e/src/suites-local/plugins.e2e-spec.ts index 363c7f836..b15dfdedb 100644 --- a/client/e2e/src/suites-local/plugins.e2e-spec.ts +++ b/client/e2e/src/suites-local/plugins.e2e-spec.ts @@ -13,7 +13,7 @@ describe('Plugins', () => { } async function expectSubmitState ({ disabled }: { disabled: boolean }) { - const disabledSubmit = await $('my-button .disabled') + const disabledSubmit = await $('my-button [disabled]') if (disabled) expect(await disabledSubmit.isDisplayed()).toBeTruthy() else expect(await disabledSubmit.isDisplayed()).toBeFalsy() diff --git a/client/e2e/src/suites-local/signup.e2e-spec.ts b/client/e2e/src/suites-local/signup.e2e-spec.ts index 3e3518a79..1e55549b3 100644 --- a/client/e2e/src/suites-local/signup.e2e-spec.ts +++ b/client/e2e/src/suites-local/signup.e2e-spec.ts @@ -126,7 +126,7 @@ describe('Signup', () => { }) it('Should go on signup page', async function () { - await signupPage.clickOnRegisterInMenu() + await signupPage.clickOnRegisterButton() }) it('Should validate the first step (about page)', async function () { @@ -179,7 +179,7 @@ describe('Signup', () => { }) it('Should go on signup page', async function () { - await signupPage.clickOnRegisterInMenu() + await signupPage.clickOnRegisterButton() }) it('Should validate the first step (about page)', async function () { @@ -260,7 +260,7 @@ describe('Signup', () => { }) it('Should go on signup page', async function () { - await signupPage.clickOnRegisterInMenu() + await signupPage.clickOnRegisterButton() }) it('Should validate the first step (about page)', async function () { @@ -328,7 +328,7 @@ describe('Signup', () => { }) it('Should go on signup page', async function () { - await signupPage.clickOnRegisterInMenu() + await signupPage.clickOnRegisterButton() }) it('Should validate the first step (about page)', async function () { diff --git a/client/e2e/src/suites-local/videos-list.e2e-spec.ts b/client/e2e/src/suites-local/videos-list.e2e-spec.ts index 9f0623af5..3e39049a7 100644 --- a/client/e2e/src/suites-local/videos-list.e2e-spec.ts +++ b/client/e2e/src/suites-local/videos-list.e2e-spec.ts @@ -52,9 +52,7 @@ describe('Videos list', () => { async function checkCommonVideoListPages (policy: NSFWPolicy) { const promisesWithFilters = [ videoListPage.goOnRootAccount.bind(videoListPage), - videoListPage.goOnLocal.bind(videoListPage), - videoListPage.goOnRecentlyAdded.bind(videoListPage), - videoListPage.goOnTrending.bind(videoListPage), + videoListPage.goOnBrowseVideos.bind(videoListPage), videoListPage.goOnRootChannel.bind(videoListPage) ] diff --git a/client/e2e/src/utils/elements.ts b/client/e2e/src/utils/elements.ts index d9435e520..cca69bea7 100644 --- a/client/e2e/src/utils/elements.ts +++ b/client/e2e/src/utils/elements.ts @@ -10,12 +10,12 @@ function isCheckboxSelected (name: string) { } async function selectCustomSelect (id: string, valueLabel: string) { - const wrapper = $(`[formcontrolname=${id}] .ng-arrow-wrapper`) + const wrapper = $(`[formcontrolname=${id}] span[role=combobox]`) await wrapper.waitForClickable() await wrapper.click() - const option = await $$(`[formcontrolname=${id}] .ng-option`).filter(async o => { + const option = await $$(`[formcontrolname=${id}] li[role=option]`).filter(async o => { const text = await o.getText() return text.trimStart().startsWith(valueLabel) diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html index d996e012b..493ebeb61 100644 --- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html +++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.html @@ -21,7 +21,6 @@
- +
diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss index a2b797180..6dfe850e2 100644 --- a/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss +++ b/client/src/app/+videos/+video-watch/shared/action-buttons/action-buttons.component.scss @@ -15,6 +15,7 @@ display: inline-block; white-space: nowrap; text-transform: uppercase; + border: 0; @include peertube-button; @include button-with-icon(21px, 0, -1px); diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html index 50e50b559..3f6152708 100644 --- a/client/src/app/header/header.component.html +++ b/client/src/app/header/header.component.html @@ -9,9 +9,9 @@
@if (!loggedIn) { - + - + @@ -22,7 +22,7 @@
} diff --git a/client/src/app/shared/shared-main/common/progress-bar.component.scss b/client/src/app/shared/shared-main/common/progress-bar.component.scss index 5e772d981..cf8dbfb84 100644 --- a/client/src/app/shared/shared-main/common/progress-bar.component.scss +++ b/client/src/app/shared/shared-main/common/progress-bar.component.scss @@ -2,11 +2,13 @@ @use '_mixins' as *; @use '_button-mixins' as *; +$height: 36px; + .progress-container { background-color: pvar(--bg-secondary-500); display: flex; overflow: hidden; - height: 2rem; + height: $height; font-size: 0.85rem; font-weight: $font-semibold; border-radius: 0.25rem; @@ -15,7 +17,7 @@ span { position: absolute; color: pvar(--fg-400); - line-height: 2rem; + line-height: $height; margin: 0 12px; } diff --git a/client/src/app/shared/shared-main/users/signup-label.component.ts b/client/src/app/shared/shared-main/users/signup-label.component.ts index 4210f3ac5..e4651587b 100644 --- a/client/src/app/shared/shared-main/users/signup-label.component.ts +++ b/client/src/app/shared/shared-main/users/signup-label.component.ts @@ -1,12 +1,11 @@ import { booleanAttribute, Component, Input } from '@angular/core' -import { NgIf } from '@angular/common' import { ServerService } from '@app/core' @Component({ selector: 'my-signup-label', templateUrl: './signup-label.component.html', standalone: true, - imports: [ NgIf ] + imports: [] }) export class SignupLabelComponent { @Input({ transform: booleanAttribute }) requiresApproval: boolean diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html index 2c7f041f3..423337882 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html @@ -24,7 +24,7 @@
@for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) { @if (filter.key !== 'scope') { -
+
{{ filter.label }}: {{ getFilterValue(filter) || filter.label }}
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss index 697e05e5c..e10a6bbf8 100644 --- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss +++ b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss @@ -70,7 +70,7 @@ $filters-background: pvar(--bg-secondary-400); } .active-filters { - > div:not(:last-child)::after { + .active-filter:not(:last-child)::after { content: '•'; font-weight: normal; display: inline-block; diff --git a/client/src/sass/include/_button-mixins.scss b/client/src/sass/include/_button-mixins.scss index bb107ffd1..e7e3c5def 100644 --- a/client/src/sass/include/_button-mixins.scss +++ b/client/src/sass/include/_button-mixins.scss @@ -147,7 +147,6 @@ @mixin peertube-button { padding: pvar(--input-y-padding) pvar(--input-x-padding); - border: 0; font-weight: $font-semibold; border-radius: 4px; diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss index 79520fa1f..de2317668 100644 --- a/client/src/sass/primeng-custom.scss +++ b/client/src/sass/primeng-custom.scss @@ -2,7 +2,7 @@ @use '_mixins' as *; @use '_icons' as *; -$hover-bg: pvar(--bg-secondary-350); +$hover-bg: pvar(--bg-secondary-400); /* stylelint-disable */ @import 'primeng/resources/primeng.css'; @@ -233,11 +233,11 @@ body .p-dropdown-panel .p-dropdown-items .p-dropdown-item { margin-top: 0; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { - color: pvar(--fg); - background: pvar(--bg-secondary-500); + color: pvar(--on-primary); + background: pvar(--primary); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { - background: pvar(--bg-secondary-500); + background: pvar(--primary); } .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { color: pvar(--fg);