diff --git a/package.json b/package.json index 7629aeb141ad..99ad3cb839b9 100644 --- a/package.json +++ b/package.json @@ -63,12 +63,12 @@ "autolinker": "^4.0.0", "electron-context-menu": "^4.0.1", "lodash.debounce": "^4.0.8", - "marked": "^13.0.2", + "marked": "^13.0.3", "path-browserify": "^1.0.1", "portal-vue": "^2.1.7", "process": "^0.11.10", "shaka-player": "4.10.8", - "swiper": "^11.1.5", + "swiper": "^11.1.8", "vue": "^2.7.16", "vue-i18n": "^8.28.2", "vue-observe-visibility": "^1.0.0", @@ -78,36 +78,36 @@ }, "devDependencies": { "@babel/core": "^7.24.9", - "@babel/eslint-parser": "^7.24.8", + "@babel/eslint-parser": "^7.25.1", "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/preset-env": "^7.24.8", + "@babel/preset-env": "^7.25.0", "@double-great/stylelint-a11y": "^3.0.2", "@intlify/eslint-plugin-vue-i18n": "^3.0.0", "babel-loader": "^9.1.3", "copy-webpack-plugin": "^12.0.2", "css-loader": "^7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", - "electron": "^31.2.1", + "electron": "^31.3.0", "electron-builder": "^24.13.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsonc": "^2.16.0", - "eslint-plugin-n": "^17.9.0", + "eslint-plugin-n": "^17.10.1", "eslint-plugin-prettier": "^5.2.1", - "eslint-plugin-promise": "^6.6.0", - "eslint-plugin-unicorn": "^54.0.0", + "eslint-plugin-promise": "^7.0.0", + "eslint-plugin-unicorn": "^55.0.0", "eslint-plugin-vue": "^9.27.0", - "eslint-plugin-vuejs-accessibility": "^2.4.0", + "eslint-plugin-vuejs-accessibility": "^2.4.1", "eslint-plugin-yml": "^1.14.0", "html-webpack-plugin": "^5.6.0", "js-yaml": "^4.1.0", "json-minimizer-webpack-plugin": "^5.0.0", - "lefthook": "^1.7.5", + "lefthook": "^1.7.11", "mini-css-extract-plugin": "^2.9.0", "npm-run-all2": "^6.2.2", - "postcss": "^8.4.39", + "postcss": "^8.4.40", "postcss-scss": "^4.0.9", "prettier": "^2.8.8", "rimraf": "^6.0.1", diff --git a/src/renderer/components/ChannelDetails/ChannelDetails.css b/src/renderer/components/ChannelDetails/ChannelDetails.css new file mode 100644 index 000000000000..eeb726179d69 --- /dev/null +++ b/src/renderer/components/ChannelDetails/ChannelDetails.css @@ -0,0 +1,190 @@ +.bannerContainer { + background: center / cover no-repeat var(--banner-url, transparent); + block-size: 13vw; + min-block-size: 110px; + max-block-size: 32vh; + inline-size: 100%; +} + +.bannerContainer.default { + background-color: #000; + background-image: url('../../assets/img/defaultBanner.png'); + background-repeat: repeat; + background-size: contain; +} + +.infoContainer { + position: relative; + background-color: var(--card-bg-color); + margin-block-start: 10px; + padding-block: 0; + padding-inline: 16px; +} + +.info { + display: flex; + flex-flow: row wrap; + inline-size: 100%; + justify-content: space-between; +} + +.infoHasError { + padding-block-end: 10px; +} + +.thumbnail { + inline-size: 100px; + block-size: 100px; + border-radius: 200px; + object-fit: cover; +} + +.name { + font-weight: bold; + inline-size: 100%; + font-size: 25px; +} + +.subCount { + color: var(--tertiary-text-color); + inset-block-start: 50px; + inset-inline-start: 120px; +} + +.infoActionsContainer { + display: flex; + gap: 30px; + justify-content: space-between; + align-items: center; +} + +.shareIcon { + align-self: center; +} + +.channelSearch { + margin-block-start: 10px; + max-inline-size: 250px; + inline-size: 220px; + margin-inline-start: auto; + align-self: flex-end; + flex: 1 1 0%; +} + +.infoTabs { + position: relative; + inline-size: 100%; + block-size: auto; + justify-content: unset; + gap: 32px; + padding-block: 0.3em; + padding-inline: 0; + flex-wrap: nowrap; +} + +.tabs { + display: flex; + flex: 0 1 66%; + flex-wrap: wrap; +} + +.tab { + padding: 15px; + font-size: 15px; + cursor: pointer; + align-self: flex-end; + text-align: center; + color: var(--tertiary-text-color); + border-block-end: 3px solid transparent; +} + +.tab:hover, +.tab:focus { + font-weight: bold; + border-block-end: 3px solid var(--tertiary-text-color); +} + +.selectedTab { + color: var(--primary-text-color); + border-block-end: 3px solid var(--primary-color); + font-weight: bold; + box-sizing: border-box; +} + +.thumbnailContainer { + display: flex; +} + +.lineContainer { + display: flex; + justify-content: center; + flex-direction: column; + padding-inline-start: 1em; +} + +.name, +.subCount { + margin: 0; +} + +@media only screen and (width <=800px) { + .infoTabs { + block-size: auto; + flex-flow: column-reverse; + gap: 0; + } + + .channelSearch { + inline-size: 100%; + max-inline-size: none; + } + + .tabs { + flex: 1 1 0; + } + + .tab { + flex: 1 1 0%; + } +} + +@media only screen and (width <=680px) { + .info { + flex-direction: column; + margin-block: 20px 10px; + } + + .infoActionsContainer { + flex-direction: row-reverse; + justify-content: left; + gap: 10px; + margin-block-start: 5px; + } +} + +@media only screen and (width <=400px) { + .info { + justify-content: center; + gap: 10px; + } + + .infoActionsContainer { + justify-content: center; + } + + .clineContainer { + padding-inline-start: 0; + } + + .thumbnailContainer { + flex-direction: column; + } + + .thumbnailContainer, + .infoActionsContainer { + flex-wrap: wrap; + align-items: center; + text-align: center; + gap: 10px; + } +} diff --git a/src/renderer/components/ChannelDetails/ChannelDetails.vue b/src/renderer/components/ChannelDetails/ChannelDetails.vue new file mode 100644 index 000000000000..c6574c40d81c --- /dev/null +++ b/src/renderer/components/ChannelDetails/ChannelDetails.vue @@ -0,0 +1,357 @@ + + + + +