From f83674c1439ad8c8dfbeee0ab883846660d77392 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 5 Nov 2024 10:03:40 +0100 Subject: [PATCH] Global client redesign * Split "my library" into "video space (channels, videos...)" and "my library (playlists, history...)" * Split "admin" into "overview (users, videos...)", "moderation (abuses, blocks, registrations...)" and "settings (configuration, runners...)" * Reorganize the header and the left menu: account settings/notifications are now in the header * Add instance information context in the left menu * Merge dedicated videos pages for "recently added", "trending", "local videos" into a "browse videos" page that includes quick filters * Clean up entire CSS * Clean CSS variables so it's easier to theme PeerTube (some new variables fallback to old variables to limit currnet themes breakages) * Replace the current light theme into a new one (beige) * Add a dark (brown) theme (included in PeerTube core) * Fix accessibility issues with old light theme colors (white on orange button for example) * Redesign the left menu, the horizontal menu, form controls and buttons, "Discover videos" page and common video filters panel * Replace/remove/add some global icon --- client/e2e/src/po/admin-config.po.ts | 2 +- client/e2e/src/po/admin-plugin.po.ts | 2 +- client/e2e/src/po/my-account.po.ts | 4 +- client/e2e/src/po/video-list.po.ts | 12 +- client/e2e/src/po/video-watch.po.ts | 4 +- client/package.json | 1 + .../about-follows.component.html | 4 +- .../about-instance.component.html | 10 +- .../about-instance.component.scss | 10 +- .../contact-admin-modal.component.html | 4 +- .../contact-admin-modal.component.scss | 1 + .../about-peertube.component.html | 12 +- client/src/app/+about/about.component.html | 12 +- client/src/app/+about/about.component.ts | 32 +- .../account-video-channels.component.html | 6 +- .../account-video-channels.component.scss | 18 +- .../account-videos.component.html | 5 +- .../account-videos.component.ts | 1 - .../src/app/+accounts/accounts.component.html | 11 +- .../src/app/+accounts/accounts.component.scss | 36 +- .../src/app/+accounts/accounts.component.ts | 9 +- .../+admin/admin-moderation.component.html | 11 + .../app/+admin/admin-moderation.component.ts | 87 +++ .../app/+admin/admin-overview.component.html | 11 + .../app/+admin/admin-overview.component.ts | 54 ++ .../app/+admin/admin-settings.component.html | 11 + .../app/+admin/admin-settings.component.ts | 179 ++++++ client/src/app/+admin/admin.component.html | 9 - client/src/app/+admin/admin.component.scss | 10 - client/src/app/+admin/admin.component.ts | 240 ------- client/src/app/+admin/config/config.routes.ts | 2 +- .../edit-basic-configuration.component.html | 24 +- .../edit-basic-configuration.component.ts | 36 +- .../edit-custom-config.component.html | 1 + .../edit-custom-config.component.scss | 23 +- .../edit-instance-information.component.html | 2 +- .../edit-live-configuration.component.html | 2 +- .../edit-vod-transcoding.component.html | 8 +- .../followers-list.component.html | 9 +- .../followers-list.component.scss | 16 - .../follow-modal.component.html | 4 +- .../following-list.component.html | 11 +- .../following-list.component.scss | 14 +- .../src/app/+admin/follows/follows.routes.ts | 2 +- .../video-redundancies-list.component.html | 7 - .../video-redundancies-list.component.scss | 15 +- .../video-redundancies-list.component.ts | 6 +- .../abuse-list/abuse-list.component.html | 7 - .../+admin/moderation/moderation.routes.ts | 4 +- .../process-registration-modal.component.html | 4 +- .../registration-list.component.html | 11 +- .../video-block-list.component.html | 9 +- .../watched-words-list-admin.component.html | 7 - .../src/app/+admin/overview/comments/index.ts | 1 - .../video-comment-list.component.html | 9 - .../overview/comments/video-comment.routes.ts | 30 - .../app/+admin/overview/overview.routes.ts | 138 +++- client/src/app/+admin/overview/users/index.ts | 1 - .../users/user-edit/user-create.component.ts | 2 +- .../users/user-edit/user-edit.component.html | 10 +- .../users/user-edit/user-edit.component.scss | 8 +- .../user-edit/user-password.component.html | 9 +- .../user-edit/user-password.component.scss | 1 + .../users/user-edit/user-update.component.ts | 2 +- .../users/user-list/user-list.component.html | 13 +- .../users/user-list/user-list.component.scss | 5 - .../users/user-list/user-list.component.ts | 6 +- .../app/+admin/overview/users/users.routes.ts | 49 -- .../src/app/+admin/overview/videos/index.ts | 1 - .../overview/videos/video-list.component.html | 11 +- .../overview/videos/video-list.component.scss | 2 + .../+admin/overview/videos/video.routes.ts | 30 - .../plugin-list-installed.component.html | 8 +- .../plugin-list-installed.component.ts | 14 +- .../plugin-search.component.html | 36 +- .../plugin-search.component.scss | 7 +- .../plugin-search/plugin-search.component.ts | 4 +- .../plugin-show-installed.component.html | 4 +- .../plugin-show-installed.component.scss | 14 - .../plugin-show-installed.component.ts | 1 - .../src/app/+admin/plugins/plugins.routes.ts | 4 +- .../plugins/shared/plugin-card.component.html | 6 +- .../plugins/shared/plugin-card.component.scss | 11 +- .../shared/plugin-navigation.component.html | 11 - .../shared/plugin-navigation.component.scss | 11 - .../shared/plugin-navigation.component.ts | 15 - client/src/app/+admin/routes.ts | 180 ++++-- .../shared/user-email-info.component.scss | 2 +- .../+admin/system/debug/debug.component.html | 7 - .../+admin/system/jobs/jobs.component.html | 7 - .../+admin/system/jobs/jobs.component.scss | 1 + .../app/+admin/system/jobs/jobs.component.ts | 12 +- .../+admin/system/logs/logs.component.html | 7 - .../+admin/system/logs/logs.component.scss | 3 +- .../app/+admin/system/logs/logs.component.ts | 6 +- .../runner-job-list.component.html | 20 +- .../runner-list/runner-list.component.html | 16 +- ...ner-registration-token-list.component.html | 18 +- client/src/app/+admin/system/system.routes.ts | 2 +- .../app/+error-page/error-page.component.html | 2 +- client/src/app/+error-page/routes.ts | 3 - client/src/app/+home/home.component.ts | 2 +- client/src/app/+login/login.component.html | 32 +- client/src/app/+login/login.component.scss | 7 +- client/src/app/+manage/routes.ts | 4 +- .../my-account-abuses-list.component.html | 7 - .../my-account-applications.component.html | 9 +- .../comments-on-my-videos.component.html | 9 - .../my-account-export.component.html | 8 +- .../my-account-import-export.component.html | 7 - .../my-account-import.component.html | 2 +- .../my-account-import.component.scss | 3 +- .../my-account-notifications.component.html | 21 +- .../my-account-notifications.component.scss | 55 +- .../my-account-change-email.component.html | 2 +- .../my-account-change-email.component.scss | 6 +- .../my-account-change-password.component.html | 2 +- .../my-account-change-password.component.scss | 7 - ...y-account-email-preferences.component.html | 2 +- .../my-account-profile.component.html | 2 +- .../my-account-profile.component.scss | 8 +- ...y-account-two-factor-button.component.html | 4 +- .../my-account-two-factor.component.html | 11 +- .../app/+my-account/my-account.component.html | 8 +- .../app/+my-account/my-account.component.scss | 13 - .../app/+my-account/my-account.component.ts | 42 +- client/src/app/+my-account/routes.ts | 32 +- .../my-video-channels.component.html | 23 +- .../my-video-channels.component.scss | 29 +- .../my-video-channels.component.ts | 2 +- .../+my-library/+my-video-channels/routes.ts | 16 +- .../comments-on-my-videos.component.html | 2 + .../comments-on-my-videos.component.ts | 0 .../automatic-tag.service.ts | 0 .../my-auto-tag-policies.component.html} | 7 - .../my-auto-tag-policies.component.ts} | 4 +- .../my-follows/my-followers.component.html | 10 +- .../my-follows/my-followers.component.scss | 1 + .../my-follows/my-followers.component.ts | 4 +- .../my-subscriptions.component.html | 10 +- .../my-subscriptions.component.scss | 1 + .../my-follows/my-subscriptions.component.ts | 4 +- .../my-history/my-history.component.html | 13 +- .../my-history/my-history.component.scss | 7 +- .../my-history/my-history.component.ts | 31 +- .../app/+my-library/my-library.component.html | 9 +- .../app/+my-library/my-library.component.scss | 13 - .../app/+my-library/my-library.component.ts | 63 +- .../my-accept-ownership.component.html | 4 +- .../my-accept-ownership.component.scss | 1 + .../my-ownership/my-ownership.component.html | 7 - .../my-video-channel-syncs.component.html | 21 +- .../video-channel-sync-edit.component.html | 2 +- .../video-channel-sync-edit.component.scss | 1 + .../my-video-imports.component.html | 14 - .../my-video-playlist-edit.component.html | 2 +- .../my-video-playlist-edit.component.scss | 1 + .../my-video-playlist-elements.component.html | 6 +- .../my-video-playlist-elements.component.scss | 18 +- .../my-video-playlist-elements.component.ts | 24 +- .../my-video-playlists.component.html | 12 +- .../my-video-playlists.component.scss | 10 +- .../my-video-playlists.component.ts | 4 +- .../+my-library/my-video-space.component.html | 12 + .../+my-library/my-video-space.component.ts | 90 +++ .../video-change-ownership.component.html | 4 +- .../my-videos/my-videos.component.html | 31 +- .../my-videos/my-videos.component.scss | 35 +- .../my-videos/my-videos.component.ts | 9 +- .../my-watched-words-list.component.html} | 7 - .../my-watched-words-list.component.ts} | 6 +- client/src/app/+my-library/routes.ts | 407 +++++++----- .../reset-password.component.html | 2 +- .../app/+search/search-filters.component.html | 5 +- .../app/+search/search-filters.component.scss | 6 +- client/src/app/+search/search.component.html | 4 +- client/src/app/+search/search.component.scss | 28 +- client/src/app/+search/search.component.ts | 6 +- .../+register/custom-stepper.component.scss | 25 +- .../+signup/+register/register.component.html | 30 +- .../+signup/+register/register.component.scss | 26 - .../+signup/+register/register.component.ts | 4 +- .../steps/register-step-about.component.html | 6 +- .../steps/register-step-terms.component.html | 4 +- .../+register/steps/step.component.scss | 6 +- ...rify-account-ask-send-email.component.html | 2 +- ...rify-account-ask-send-email.component.scss | 1 + .../verify-account-email.component.html | 2 +- .../shared/signup-mascot.component.scss | 4 +- .../shared/signup-step-title.component.scss | 2 +- .../signup-success-after-email.component.html | 2 +- ...signup-success-before-email.component.html | 2 +- .../+stats/video/video-stats.component.html | 6 +- .../+stats/video/video-stats.component.scss | 5 +- .../app/+stats/video/video-stats.component.ts | 12 +- .../video-channel-playlists.component.html | 4 - .../video-channel-playlists.component.scss | 9 +- .../video-channel-videos.component.html | 5 +- .../video-channel-videos.component.ts | 1 - .../video-channels.component.html | 30 +- .../video-channels.component.scss | 73 +-- .../video-channels.component.ts | 9 +- .../edit/video-studio-edit.component.html | 20 +- .../edit/video-studio-edit.component.scss | 15 +- .../edit/video-studio-edit.component.ts | 4 +- .../video-caption-add-modal.component.html | 4 +- ...-caption-edit-modal-content.component.html | 8 +- ...-caption-edit-modal-content.component.scss | 4 +- .../thumbnail-manager.component.html | 8 +- .../thumbnail-manager.component.scss | 2 +- .../shared/video-edit.component.html | 6 +- .../shared/video-edit.component.scss | 14 +- .../video-go-live.component.html | 3 +- .../video-import-torrent.component.html | 6 +- .../video-import-torrent.component.scss | 2 +- .../video-import-url.component.html | 4 +- .../video-add-components/video-send.scss | 17 +- .../video-upload.component.html | 6 +- .../+video-edit/video-add.component.html | 165 ++--- .../+video-edit/video-add.component.scss | 26 +- .../+video-edit/video-update.component.html | 7 +- .../action-buttons.component.html | 2 +- .../action-buttons.component.scss | 49 +- .../action-buttons/video-rate.component.scss | 4 +- .../comment/video-comment-add.component.html | 18 +- .../comment/video-comment-add.component.scss | 16 +- .../comment/video-comment.component.scss | 22 +- .../comment/video-comments.component.html | 7 +- .../comment/video-comments.component.scss | 11 +- .../privacy-concerns.component.html | 4 +- .../privacy-concerns.component.scss | 52 +- .../information/privacy-concerns.component.ts | 6 +- .../metadata/video-attributes.component.scss | 4 +- .../metadata/video-description.component.scss | 2 +- .../player-widget.component.scss | 4 +- .../video-transcription.component.scss | 3 +- .../video-watch-playlist.component.scss | 2 +- .../recommended-videos.component.html | 2 +- .../recommended-videos.component.scss | 5 +- .../+video-watch/video-watch.component.html | 60 +- .../+video-watch/video-watch.component.scss | 29 +- client/src/app/+videos/routes.ts | 57 +- client/src/app/+videos/video-list/index.ts | 2 +- .../overview/video-overview.component.html | 83 ++- .../overview/video-overview.component.scss | 87 ++- .../overview/video-overview.component.ts | 115 +++- .../overview/videos-overview.model.ts | 1 - .../video-user-subscriptions.component.html | 4 +- .../video-user-subscriptions.component.ts | 4 +- ...nt.html => videos-list-all.component.html} | 6 +- ...ponent.ts => videos-list-all.component.ts} | 122 +--- client/src/app/app.component.html | 27 +- client/src/app/app.component.scss | 82 +-- client/src/app/app.component.ts | 58 +- client/src/app/app.routes.ts | 51 +- client/src/app/core/auth/auth-user.model.ts | 31 +- client/src/app/core/auth/auth.service.ts | 10 +- client/src/app/core/menu/menu.service.ts | 159 +---- client/src/app/core/routing/index.ts | 1 - .../app/core/routing/menu-guard.service.ts | 82 --- .../src/app/core/routing/redirect.service.ts | 28 +- client/src/app/core/theme/theme.service.ts | 185 +++++- client/src/app/core/users/user.model.ts | 2 +- .../src/app/core/wrappers/screen.service.ts | 20 +- client/src/app/header/header.component.html | 89 ++- client/src/app/header/header.component.scss | 215 ++++++- client/src/app/header/header.component.ts | 180 +++++- .../notification-dropdown.component.html | 39 +- .../notification-dropdown.component.scss | 99 +++ .../notification-dropdown.component.ts | 0 .../header/search-typeahead.component.html | 14 +- .../header/search-typeahead.component.scss | 58 +- .../src/app/header/suggestion.component.html | 4 +- .../src/app/header/suggestion.component.scss | 16 +- .../hotkeys-cheat-sheet.component.scss | 12 +- client/src/app/menu/home-menu.component.html | 3 + client/src/app/menu/home-menu.component.ts | 37 ++ .../app/menu/language-chooser.component.html | 2 +- .../app/menu/language-chooser.component.scss | 12 - client/src/app/menu/menu.component.html | 261 +++----- client/src/app/menu/menu.component.scss | 567 +++++++---------- client/src/app/menu/menu.component.ts | 437 ++++++------- .../menu/notification-dropdown.component.scss | 177 ------ .../menu/quick-settings-modal.component.html | 4 +- ...account-setup-warning-modal.component.html | 4 +- .../account-setup-warning-modal.component.ts | 6 +- .../modal/admin-welcome-modal.component.html | 10 +- .../modal/admin-welcome-modal.component.scss | 2 +- .../modal/admin-welcome-modal.component.ts | 6 +- client/src/app/modal/confirm.component.html | 4 +- client/src/app/modal/confirm.component.scss | 1 + .../src/app/modal/custom-modal.component.html | 4 +- ...stance-config-warning-modal.component.html | 6 +- ...instance-config-warning-modal.component.ts | 8 +- .../abuse-details.component.html | 8 +- .../abuse-details.component.scss | 4 +- .../abuse-list-table.component.html | 6 +- .../abuse-list-table.component.scss | 2 +- .../abuse-message-modal.component.html | 2 +- .../abuse-message-modal.component.scss | 15 +- .../moderation-comment-modal.component.html | 4 +- .../moderation-comment-modal.component.scss | 1 + .../actor-avatar-edit.component.html | 4 +- .../actor-avatar-edit.component.scss | 6 +- .../actor-banner-edit.component.html | 4 +- .../actor-banner-edit.component.scss | 4 +- .../actor-image-edit.scss | 5 +- .../actor-avatar.component.scss | 15 +- .../actor-avatar.component.ts | 12 +- .../button-markup.component.ts | 4 +- .../channel-miniature-markup.component.scss | 8 +- .../playlist-miniature-markup.component.ts | 2 +- .../video-miniature-markup.component.ts | 2 +- .../videos-list-markup.component.scss | 2 +- .../videos-list-markup.component.ts | 2 +- .../advanced-input-filter.component.scss | 6 + .../dynamic-form-field.component.scss | 1 + .../shared-forms/input-switch.component.scss | 9 +- .../shared-forms/input-text.component.html | 2 +- .../shared-forms/input-text.component.scss | 17 +- .../markdown-textarea.component.scss | 42 +- .../peertube-checkbox.component.html | 6 +- .../peertube-checkbox.component.scss | 24 +- .../preview-upload.component.html | 2 +- .../preview-upload.component.scss | 2 +- .../shared-forms/reactive-file.component.scss | 3 +- .../shared-forms/reactive-file.component.ts | 4 +- .../timestamp-input.component.html | 2 +- .../timestamp-input.component.scss | 27 +- .../shared-forms/timestamp-input.component.ts | 2 +- .../shared-icons/global-icon.component.scss | 3 +- .../shared-icons/global-icon.component.ts | 26 +- .../instance-about-accordion.component.scss | 3 +- .../instance-features-table.component.html | 48 +- .../instance-features-table.component.scss | 12 +- .../instance-follow.service.ts | 2 +- .../buttons/action-dropdown.component.html | 59 +- .../buttons/action-dropdown.component.scss | 33 +- .../buttons/action-dropdown.component.ts | 4 +- .../shared-main/buttons/button.component.html | 30 +- .../shared-main/buttons/button.component.scss | 42 +- .../shared-main/buttons/button.component.ts | 69 +- .../buttons/copy-button.component.html | 2 +- .../buttons/copy-button.component.scss | 5 + .../buttons/copy-button.component.ts | 1 - .../buttons/delete-button.component.ts | 2 +- .../shared-main/buttons/help.component.scss | 8 +- .../channels-setup-message.component.html | 2 +- .../channels-setup-message.component.scss | 2 - .../shared-main/common/alert.component.html | 2 +- .../common/infinite-scroller.directive.ts | 8 +- .../shared-main/common/link.component.html | 2 + .../shared-main/common/link.component.ts | 7 +- .../common/progress-bar.component.scss | 11 +- .../shared-main/feeds/feed.component.scss | 2 +- .../menu/horizontal-menu.component.html | 24 + .../menu/horizontal-menu.component.scss | 103 +++ .../menu/horizontal-menu.component.ts | 103 +++ .../menu/list-overflow.component.html | 87 ++- .../menu/list-overflow.component.scss | 40 +- .../menu/list-overflow.component.ts | 66 +- .../menu/top-menu-dropdown.component.html | 63 -- .../menu/top-menu-dropdown.component.scss | 56 -- .../menu/top-menu-dropdown.component.ts | 144 ----- .../plugins/plugin-selector.directive.ts | 2 + .../search/simple-search-input.component.scss | 7 +- .../users/login-link.component.html | 4 +- .../users/login-link.component.scss | 6 + .../shared-main/users/login-link.component.ts | 4 +- .../users/signup-label.component.html | 15 +- .../users/signup-label.component.ts | 13 +- .../users/user-notification.model.ts | 6 +- .../users/user-quota.component.html | 4 +- .../account-blocklist.component.html | 9 +- .../batch-domains-modal.component.html | 4 +- .../shared/shared-moderation/moderation.scss | 3 +- .../report-modals/report.component.html | 4 +- .../report-modals/report.component.scss | 3 +- .../report-modals/video-report.component.html | 4 +- .../server-blocklist.component.html | 11 +- .../server-blocklist.component.scss | 14 +- .../user-ban-modal.component.html | 4 +- .../user-ban-modal.component.scss | 1 + .../user-moderation-dropdown.component.ts | 2 +- .../video-block.component.html | 4 +- .../video-block.component.scss | 1 + .../video-share.component.html | 8 +- .../video-share.component.scss | 8 +- .../support-modal.component.html | 2 +- .../shared-tables/video-cell.component.scss | 8 +- .../video-thumbnail.component.html | 11 +- .../video-thumbnail.component.scss | 44 +- .../video-thumbnail.component.ts | 12 +- .../user-interface-settings.component.html | 11 +- .../user-interface-settings.component.scss | 10 +- .../user-interface-settings.component.ts | 36 +- .../user-video-settings.component.html | 4 +- .../user-video-settings.component.scss | 8 +- .../remote-subscribe.component.html | 18 +- .../remote-subscribe.component.scss | 6 - .../remote-subscribe.component.ts | 1 - .../subscribe-button.component.scss | 2 + .../subscribe-button.component.ts | 4 +- ...eo-comment-list-admin-owner.component.html | 10 +- ...eo-comment-list-admin-owner.component.scss | 4 +- .../live-documentation-link.component.html | 2 +- .../live-stream-information.component.html | 2 +- .../subtitle-files-download.component.html | 2 +- .../download/video-download.component.html | 10 +- .../download/video-download.component.scss | 4 +- .../video-files-download.component.html | 2 +- .../video-files-download.component.scss | 2 +- .../video-generate-download.component.html | 2 +- .../video-actions-dropdown.component.scss | 2 +- .../video-filters-header.component.html | 201 +++--- .../video-filters-header.component.scss | 152 ++--- .../video-filters-header.component.ts | 116 ++-- .../video-filters.model.ts | 8 +- .../video-miniature.component.html | 116 ++-- .../video-miniature.component.scss | 176 ++--- .../video-miniature.component.ts | 26 +- .../videos-list.component.html | 37 +- .../videos-list.component.scss | 36 +- .../videos-list.component.ts | 46 +- .../videos-selection.component.html | 2 +- .../videos-selection.component.scss | 5 - .../video-add-to-playlist.component.html | 3 +- .../video-add-to-playlist.component.scss | 22 +- ...-playlist-element-miniature.component.html | 4 +- ...-playlist-element-miniature.component.scss | 58 +- .../video-playlist-miniature.component.scss | 40 +- .../video-channel-create.component.ts | 10 +- .../video-channel-edit.component.html | 4 +- .../video-channel-edit.component.scss | 1 + .../video-channel-edit.ts | 0 .../video-channel-update.component.ts | 10 +- .../user-notifications.component.scss | 14 +- .../upload-progress.component.html | 6 +- ...ched-words-list-admin-owner.component.html | 2 +- ...tched-words-list-save-modal.component.html | 4 +- client/src/app/videos-parent.component.html | 3 + client/src/app/videos-parent.component.ts | 23 + .../assets/images/feather/arrow-up-right.svg | 1 - client/src/assets/images/feather/bell.svg | 2 +- client/src/assets/images/feather/channel.svg | 54 ++ .../assets/images/feather/chevron-left.svg | 1 + client/src/assets/images/feather/cog.svg | 52 +- client/src/assets/images/feather/command.svg | 1 - client/src/assets/images/feather/config.svg | 3 + client/src/assets/images/feather/delete.svg | 2 +- client/src/assets/images/feather/edit-2.svg | 2 +- client/src/assets/images/feather/help.svg | 6 +- client/src/assets/images/feather/history.svg | 5 + client/src/assets/images/feather/home.svg | 2 +- client/src/assets/images/feather/keyboard.svg | 1 + client/src/assets/images/feather/list.svg | 1 - client/src/assets/images/feather/menu.svg | 1 + .../src/assets/images/feather/moderation.svg | 5 + .../assets/images/feather/more-vertical.svg | 2 +- .../src/assets/images/feather/opened-bell.svg | 59 ++ client/src/assets/images/feather/overview.svg | 1 + .../src/assets/images/feather/playlists.svg | 77 +++ .../src/assets/images/feather/plus-circle.svg | 1 - client/src/assets/images/feather/plus.svg | 1 + .../src/assets/images/feather/refresh-cw.svg | 2 +- client/src/assets/images/feather/registry.svg | 1 + client/src/assets/images/feather/repeat.svg | 2 +- .../assets/images/feather/subscriptions.svg | 57 ++ client/src/assets/images/feather/trending.svg | 2 +- client/src/assets/images/feather/tv.svg | 1 - client/src/assets/images/feather/upload.svg | 60 +- client/src/assets/images/feather/videos.svg | 5 + client/src/assets/images/logo.svg | 14 +- client/src/assets/images/misc/history.svg | 1 - client/src/assets/images/misc/local.svg | 3 - client/src/assets/images/misc/markdown.svg | 2 +- client/src/assets/images/misc/menu.svg | 4 - client/src/assets/images/misc/npm.svg | 6 - .../src/assets/images/misc/subscriptions.svg | 1 - client/src/assets/images/misc/video-lang.svg | 51 +- .../src/assets/images/misc/video-library.svg | 1 - client/src/index.html | 8 +- client/src/main.ts | 2 - client/src/sass/application.scss | 369 +++++------ client/src/sass/bootstrap.scss | 141 ++-- client/src/sass/class-helpers/_buttons.scss | 74 ++- client/src/sass/class-helpers/_common.scss | 76 ++- client/src/sass/class-helpers/_forms.scss | 24 +- client/src/sass/class-helpers/_images.scss | 6 +- client/src/sass/class-helpers/_layout.scss | 17 +- client/src/sass/class-helpers/_menu.scss | 51 +- client/src/sass/class-helpers/_text.scss | 82 ++- .../sass/include/_account-channel-page.scss | 26 +- client/src/sass/include/_actor.scss | 6 +- client/src/sass/include/_badges.scss | 10 +- .../sass/include/_bootstrap-variables.scss | 45 +- client/src/sass/include/_button-mixins.scss | 247 +++++++ client/src/sass/include/_form-mixins.scss | 261 ++++++++ client/src/sass/include/_icons.scss | 4 +- client/src/sass/include/_miniature.scss | 61 +- client/src/sass/include/_mixins.scss | 600 ++---------------- client/src/sass/include/_nav.scss | 2 +- client/src/sass/include/_variables.scss | 205 +++--- client/src/sass/player/_player-variables.scss | 2 - client/src/sass/player/context-menu.scss | 2 +- client/src/sass/player/control-bar.scss | 10 +- client/src/sass/player/dock.scss | 16 +- .../src/sass/player/offline-notification.scss | 4 +- client/src/sass/player/peertube-skin.scss | 10 +- client/src/sass/player/playlist.scss | 6 +- client/src/sass/player/settings-menu.scss | 2 +- client/src/sass/primeng-custom.scss | 329 +++++----- client/src/standalone/videos/embed.ts | 4 +- .../src/standalone/videos/shared/auth-http.ts | 6 +- client/yarn.lock | 5 + config/default.yaml | 3 +- config/production.yaml.example | 1 - .../src/plugins/client/client-hook.model.ts | 4 + .../models/src/server/server-config.model.ts | 4 +- scripts/nightly.sh | 5 +- .../core/helpers/custom-validators/plugins.ts | 3 +- .../core/initializers/checker-before-init.ts | 1 - server/core/initializers/config.ts | 3 +- server/core/lib/plugins/theme-utils.ts | 14 +- server/core/lib/server-config-manager.ts | 13 +- 525 files changed, 6861 insertions(+), 6725 deletions(-) create mode 100644 client/src/app/+admin/admin-moderation.component.html create mode 100644 client/src/app/+admin/admin-moderation.component.ts create mode 100644 client/src/app/+admin/admin-overview.component.html create mode 100644 client/src/app/+admin/admin-overview.component.ts create mode 100644 client/src/app/+admin/admin-settings.component.html create mode 100644 client/src/app/+admin/admin-settings.component.ts delete mode 100644 client/src/app/+admin/admin.component.html delete mode 100644 client/src/app/+admin/admin.component.scss delete mode 100644 client/src/app/+admin/admin.component.ts delete mode 100644 client/src/app/+admin/overview/comments/video-comment.routes.ts delete mode 100644 client/src/app/+admin/overview/users/users.routes.ts delete mode 100644 client/src/app/+admin/overview/videos/video.routes.ts delete mode 100644 client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss delete mode 100644 client/src/app/+admin/plugins/shared/plugin-navigation.component.html delete mode 100644 client/src/app/+admin/plugins/shared/plugin-navigation.component.scss delete mode 100644 client/src/app/+admin/plugins/shared/plugin-navigation.component.ts delete mode 100644 client/src/app/+my-account/my-account-comments-on-my-videos/comments-on-my-videos.component.html delete mode 100644 client/src/app/+my-account/my-account.component.scss create mode 100644 client/src/app/+my-library/comments-on-my-videos/comments-on-my-videos.component.html rename client/src/app/{+my-account/my-account-comments-on-my-videos => +my-library/comments-on-my-videos}/comments-on-my-videos.component.ts (100%) rename client/src/app/{+my-account/my-account-auto-tag-policies => +my-library/my-auto-tag-policies}/automatic-tag.service.ts (100%) rename client/src/app/{+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.html => +my-library/my-auto-tag-policies/my-auto-tag-policies.component.html} (64%) rename client/src/app/{+my-account/my-account-auto-tag-policies/my-account-auto-tag-policies.component.ts => +my-library/my-auto-tag-policies/my-auto-tag-policies.component.ts} (93%) delete mode 100644 client/src/app/+my-library/my-library.component.scss create mode 100644 client/src/app/+my-library/my-video-space.component.html create mode 100644 client/src/app/+my-library/my-video-space.component.ts rename client/src/app/{+my-account/my-account-watched-words-list/my-account-watched-words-list.component.html => +my-library/my-watched-words-list/my-watched-words-list.component.html} (66%) rename client/src/app/{+my-account/my-account-watched-words-list/my-account-watched-words-list.component.ts => +my-library/my-watched-words-list/my-watched-words-list.component.ts} (72%) rename client/src/app/+videos/video-list/{videos-list-common-page.component.html => videos-list-all.component.html} (80%) rename client/src/app/+videos/video-list/{videos-list-common-page.component.ts => videos-list-all.component.ts} (52%) delete mode 100644 client/src/app/core/routing/menu-guard.service.ts rename client/src/app/{menu => header}/notification-dropdown.component.html (59%) create mode 100644 client/src/app/header/notification-dropdown.component.scss rename client/src/app/{menu => header}/notification-dropdown.component.ts (100%) create mode 100644 client/src/app/menu/home-menu.component.html create mode 100644 client/src/app/menu/home-menu.component.ts delete mode 100644 client/src/app/menu/notification-dropdown.component.scss create mode 100644 client/src/app/shared/shared-main/menu/horizontal-menu.component.html create mode 100644 client/src/app/shared/shared-main/menu/horizontal-menu.component.scss create mode 100644 client/src/app/shared/shared-main/menu/horizontal-menu.component.ts delete mode 100644 client/src/app/shared/shared-main/menu/top-menu-dropdown.component.html delete mode 100644 client/src/app/shared/shared-main/menu/top-menu-dropdown.component.scss delete mode 100644 client/src/app/shared/shared-main/menu/top-menu-dropdown.component.ts create mode 100644 client/src/app/shared/shared-main/users/login-link.component.scss delete mode 100644 client/src/app/shared/shared-user-subscription/remote-subscribe.component.scss rename client/src/app/{+manage/video-channel-edit => shared/standalone-channels}/video-channel-create.component.ts (89%) rename client/src/app/{+manage/video-channel-edit => shared/standalone-channels}/video-channel-edit.component.html (95%) rename client/src/app/{+manage/video-channel-edit => shared/standalone-channels}/video-channel-edit.component.scss (93%) rename client/src/app/{+manage/video-channel-edit => shared/standalone-channels}/video-channel-edit.ts (100%) rename client/src/app/{+manage/video-channel-edit => shared/standalone-channels}/video-channel-update.component.ts (93%) create mode 100644 client/src/app/videos-parent.component.html create mode 100644 client/src/app/videos-parent.component.ts delete mode 100644 client/src/assets/images/feather/arrow-up-right.svg create mode 100644 client/src/assets/images/feather/channel.svg create mode 100644 client/src/assets/images/feather/chevron-left.svg delete mode 100644 client/src/assets/images/feather/command.svg create mode 100644 client/src/assets/images/feather/config.svg create mode 100644 client/src/assets/images/feather/history.svg create mode 100644 client/src/assets/images/feather/keyboard.svg delete mode 100644 client/src/assets/images/feather/list.svg create mode 100644 client/src/assets/images/feather/menu.svg create mode 100644 client/src/assets/images/feather/moderation.svg create mode 100644 client/src/assets/images/feather/opened-bell.svg create mode 100644 client/src/assets/images/feather/overview.svg create mode 100644 client/src/assets/images/feather/playlists.svg delete mode 100644 client/src/assets/images/feather/plus-circle.svg create mode 100644 client/src/assets/images/feather/plus.svg create mode 100644 client/src/assets/images/feather/registry.svg create mode 100644 client/src/assets/images/feather/subscriptions.svg delete mode 100644 client/src/assets/images/feather/tv.svg create mode 100644 client/src/assets/images/feather/videos.svg delete mode 100644 client/src/assets/images/misc/history.svg delete mode 100644 client/src/assets/images/misc/local.svg delete mode 100644 client/src/assets/images/misc/menu.svg delete mode 100644 client/src/assets/images/misc/npm.svg delete mode 100644 client/src/assets/images/misc/subscriptions.svg delete mode 100644 client/src/assets/images/misc/video-library.svg create mode 100644 client/src/sass/include/_button-mixins.scss create mode 100644 client/src/sass/include/_form-mixins.scss diff --git a/client/e2e/src/po/admin-config.po.ts b/client/e2e/src/po/admin-config.po.ts index 8e3d90f45..778959c80 100644 --- a/client/e2e/src/po/admin-config.po.ts +++ b/client/e2e/src/po/admin-config.po.ts @@ -8,7 +8,7 @@ export class AdminConfigPage { 'basic-configuration': 'APPEARANCE', 'instance-information': 'INSTANCE' } - await go('/admin/config/edit-custom#' + tab) + await go('/admin/settings/config/edit-custom#' + tab) await $('h2=' + waitTitles[tab]).waitForDisplayed() } diff --git a/client/e2e/src/po/admin-plugin.po.ts b/client/e2e/src/po/admin-plugin.po.ts index 0259f34d6..0d6aca7f4 100644 --- a/client/e2e/src/po/admin-plugin.po.ts +++ b/client/e2e/src/po/admin-plugin.po.ts @@ -3,7 +3,7 @@ import { browserSleep, go } from '../utils' export class AdminPluginPage { async navigateToPluginSearch () { - await go('/admin/plugins/search') + await go('/admin/settings/plugins/search') await $('my-plugin-search').waitForDisplayed() } diff --git a/client/e2e/src/po/my-account.po.ts b/client/e2e/src/po/my-account.po.ts index cc1555e9b..1054c117b 100644 --- a/client/e2e/src/po/my-account.po.ts +++ b/client/e2e/src/po/my-account.po.ts @@ -77,7 +77,7 @@ export class MyAccountPage { async countVideos (names: string[]) { const elements = await $$('.video').filter(async e => { - const t = await e.$('.video-miniature-name').getText() + const t = await e.$('.video-name').getText() return names.some(n => t.includes(n)) }) @@ -140,7 +140,7 @@ export class MyAccountPage { private async getVideoElement (name: string) { const video = async () => { const videos = await $$('.video').filter(async e => { - const t = await e.$('.video-miniature-name').getText() + const t = await e.$('.video-name').getText() return t.includes(name) }) diff --git a/client/e2e/src/po/video-list.po.ts b/client/e2e/src/po/video-list.po.ts index 81afbd992..c2dad8571 100644 --- a/client/e2e/src/po/video-list.po.ts +++ b/client/e2e/src/po/video-list.po.ts @@ -66,25 +66,25 @@ export class VideoListPage { } async getVideosListName () { - const elems = await $$('.videos .video-miniature .video-miniature-name') + const elems = await $$('.videos .video-miniature .video-name') const texts = await elems.map(e => e.getText()) return texts.map(t => t.trim()) } videoExists (name: string) { - return $('.video-miniature-name=' + name).isDisplayed() + return $('.video-name=' + name).isDisplayed() } async videoIsBlurred (name: string) { - const filter = await $('.video-miniature-name=' + name).getCSSProperty('filter') + const filter = await $('.video-name=' + name).getCSSProperty('filter') return filter.value !== 'none' } async clickOnVideo (videoName: string) { const video = async () => { - const videos = await $$('.videos .video-miniature .video-miniature-name').filter(async e => { + const videos = await $$('.videos .video-miniature .video-name').filter(async e => { const t = await e.getText() return t === videoName @@ -106,7 +106,7 @@ export class VideoListPage { async clickOnFirstVideo () { const video = () => $('.videos .video-miniature .video-thumbnail') - const videoName = () => $('.videos .video-miniature .video-miniature-name') + const videoName = () => $('.videos .video-miniature .video-name') await video().waitForClickable() @@ -119,7 +119,7 @@ export class VideoListPage { } private waitForList () { - return $('.videos .video-miniature .video-miniature-name').waitForDisplayed() + return $('.videos .video-miniature .video-name').waitForDisplayed() } private waitForTitle (title: string) { diff --git a/client/e2e/src/po/video-watch.po.ts b/client/e2e/src/po/video-watch.po.ts index 544930c6c..699a0b635 100644 --- a/client/e2e/src/po/video-watch.po.ts +++ b/client/e2e/src/po/video-watch.po.ts @@ -199,7 +199,7 @@ export class VideoWatchPage { await textarea.setValue(comment) - const confirmButton = await $('.comment-buttons .orange-button') + const confirmButton = await $('.comment-buttons .primary-button') await confirmButton.waitForClickable() await confirmButton.click() @@ -218,7 +218,7 @@ export class VideoWatchPage { await textarea.waitForClickable() await textarea.setValue(comment) - const confirmButton = await $('my-video-comment .comment-buttons .orange-button') + const confirmButton = await $('my-video-comment .comment-buttons .primary-button') await confirmButton.waitForClickable() await confirmButton.click() diff --git a/client/package.json b/client/package.json index a211ac541..42d3ad03e 100644 --- a/client/package.json +++ b/client/package.json @@ -89,6 +89,7 @@ "buffer": "^6.0.3", "chart.js": "^4.3.0", "chartjs-plugin-zoom": "~2.0.1", + "color-bits": "^1.0.4", "core-js": "^3.22.8", "debug": "^4.3.1", "dompurify": "^3.1.6", diff --git a/client/src/app/+about/about-follows/about-follows.component.html b/client/src/app/+about/about-follows/about-follows.component.html index 34427452c..c4bda1944 100644 --- a/client/src/app/+about/about-follows/about-follows.component.html +++ b/client/src/app/+about/about-follows/about-follows.component.html @@ -11,7 +11,7 @@ {{ follower.name }} - +
@@ -23,7 +23,7 @@ {{ following.name }} - +
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html index 876f29821..5754aa7dc 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html @@ -1,15 +1,15 @@ - -
+ +

About {{ instanceName }}

- Contact us + Contact us
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss index ffb8ce307..cb7324f06 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -15,8 +15,11 @@ .middle-title { margin-top: 0; + text-transform: uppercase; + color: pvar(--fg); + font-weight: $font-bold; - @include in-content-small-title; + @include font-size(22px); @include margin-bottom(1.5rem); } @@ -42,9 +45,6 @@ .middle-title, .section-title { display: inline-block; - } - - .section-title { - color: var(--mainForegroundColor); + color: pvar(--fg-400); } } diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html index 0a2c30b30..8f414d168 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.html +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html @@ -50,11 +50,11 @@
- +
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss index 80b962a37..dc4010c8a 100644 --- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss @@ -1,5 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; +@use '_form-mixins' as *; .modal-subtitle { line-height: 1rem; diff --git a/client/src/app/+about/about-peertube/about-peertube.component.html b/client/src/app/+about/about-peertube/about-peertube.component.html index a066f0e46..73ea2bd75 100644 --- a/client/src/app/+about/about-peertube/about-peertube.component.html +++ b/client/src/app/+about/about-peertube/about-peertube.component.html @@ -11,12 +11,12 @@

- It is free and open-source software, under AGPLv3 + It is free and open-source software, under AGPLv3 licence.

- For more information, please visit joinpeertube.org. + For more information, please visit joinpeertube.org.

@@ -25,7 +25,7 @@
- Use PeerTube documentation + Use PeerTube documentation
@@ -37,7 +37,7 @@
- PeerTube Applications + PeerTube Applications
@@ -49,7 +49,7 @@
- Contribute on PeerTube + Contribute on PeerTube
@@ -112,7 +112,7 @@ Web peers are not publicly accessible: because we use the websocket transport, the protocol is different from classic BitTorrent tracker. When you are in a web browser, you send a signal containing your IP address to the tracker that will randomly choose other peers to forward the information to. - See this document for more information + See this document for more information diff --git a/client/src/app/+about/about.component.html b/client/src/app/+about/about.component.html index 149a999fa..2241fe716 100644 --- a/client/src/app/+about/about.component.html +++ b/client/src/app/+about/about.component.html @@ -1,13 +1,7 @@
-
- Instance - - PeerTube - - Network +
+
-
- -
+
diff --git a/client/src/app/+about/about.component.ts b/client/src/app/+about/about.component.ts index f0f26f902..01672ba6a 100644 --- a/client/src/app/+about/about.component.ts +++ b/client/src/app/+about/about.component.ts @@ -1,22 +1,30 @@ import { Component } from '@angular/core' -import { ScreenService } from '@app/core' -import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router' -import { PluginSelectorDirective } from '../shared/shared-main/plugins/plugin-selector.directive' -import { NgClass } from '@angular/common' +import { RouterOutlet } from '@angular/router' +import { HorizontalMenuComponent, HorizontalMenuEntry } from '@app/shared/shared-main/menu/horizontal-menu.component' @Component({ selector: 'my-about', templateUrl: './about.component.html', standalone: true, - imports: [ NgClass, PluginSelectorDirective, RouterLink, RouterLinkActive, RouterOutlet ] + imports: [ RouterOutlet, HorizontalMenuComponent ] }) export class AboutComponent { - constructor ( - private screenService: ScreenService - ) { } - - get isBroadcastMessageDisplayed () { - return this.screenService.isBroadcastMessageDisplayed - } + menuEntries: HorizontalMenuEntry[] = [ + { + label: $localize`Platform`, + routerLink: '/about/instance', + pluginSelectorId: 'about-menu-instance' + }, + { + label: $localize`PeerTube`, + routerLink: '/about/peertube', + pluginSelectorId: 'about-menu-peertube' + }, + { + label: $localize`Network`, + routerLink: '/about/follows', + pluginSelectorId: 'about-menu-network' + } + ] } diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index e3b499773..644504cf3 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html @@ -17,7 +17,7 @@ >

- + {{ videoChannel.displayName }}

@@ -35,7 +35,7 @@ - Show this channel + Show this channel
@@ -47,7 +47,7 @@ >
- SHOW THIS CHANNEL > + SHOW THIS CHANNEL >
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 9a415a320..8842b5403 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -9,7 +9,7 @@ .channel { max-width: $max-channels-width; - background-color: pvar(--channelBackgroundColor); + background-color: pvar(--bg-secondary-350); display: grid; grid-template-columns: 1fr auto; @@ -36,7 +36,7 @@ } a { - color: pvar(--mainForegroundColor); + color: pvar(--fg); @include peertube-word-wrap; } @@ -60,7 +60,7 @@ max-height: 80px; - @include fade-text(50px, pvar(--channelBackgroundColor)); + @include fade-text(50px, pvar(--bg-secondary-350)); } } @@ -95,14 +95,9 @@ my-subscribe-button { height: 100%; position: absolute; right: 0; - background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); + background: linear-gradient(90deg, transparent 0, pvar(--bg-secondary-350) 45px); padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px; z-index: z(miniature) + 1; - - a { - color: pvar(--mainColor); - font-weight: $font-semibold; - } } .button-show-channel { @@ -130,11 +125,6 @@ my-subscribe-button { } } - .show-channel a { - @include peertube-button-link; - @include orange-button-inverted; - } - .videos { display: none; } diff --git a/client/src/app/+accounts/account-videos/account-videos.component.html b/client/src/app/+accounts/account-videos/account-videos.component.html index 86cfca3e1..887667ddf 100644 --- a/client/src/app/+accounts/account-videos/account-videos.component.html +++ b/client/src/app/+accounts/account-videos/account-videos.component.html @@ -1,11 +1,10 @@ +

Videos

+ -