- ![]()
+ ![]()
+
+
+
+
+ {{ channelName }}
+
+
-
+
+ {{ subscriberCount }} subscribers
+
+
+ - {{ videoCount }} videos
+
+
+ + {{ description }} +
- {{ channelName }} -
- - {{ subscriberCount }} subscribers - - - - {{ videoCount }} videos - -- {{ description }} -
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
index 292fdedd..e15c6f38 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -37,36 +37,34 @@
.playlistItems {
overflow-y: auto;
height: 395px;
- margin-top: -15px;
- margin-left: -16px;
- margin-right: -16px;
}
.playlistItem {
- height: 75px;
- width: 100%;
+ display: grid;
+ grid-template-columns: 30px 1fr;
+ align-items: center;
transition: background 0.2s ease-out;
}
+.playlistItem:not(:last-child) {
+ margin-bottom: 8px;
+}
+
.playlistItem:hover {
background-color: var(--side-nav-hover-color);
transition: background 0.2s ease-in;
}
+.videoIndexContainer {
+ text-align: center;
+}
+
.videoIndex {
- float: left;
- position: relative;
- top: 15px;
- left: 10px;
color: var(--tertiary-text-color);
}
.videoIndexIcon {
- float: left;
- position: relative;
font-size: 14px;
- top: 32px;
- left: 10px;
color: var(--tertiary-text-color);
}
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index fdff39a8..460e1674 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -47,7 +47,7 @@
@click="playNextVideo"
/>
-
@@ -56,25 +56,27 @@
:key="index"
class="playlistItem"
>
-
-
+
+
![]()
+
-
+
diff --git a/src/renderer/components/ft-list-video/ft-list-video.css b/src/renderer/components/ft-list-video/ft-list-video.css
deleted file mode 100644
index 7d8f22d8..00000000
--- a/src/renderer/components/ft-list-video/ft-list-video.css
+++ /dev/null
@@ -1,247 +0,0 @@
-.videoThumbnail {
- position: relative;
- cursor: pointer;
-}
-
-.videoThumbnail:hover .videoWatched {
- visibility: hidden;
-}
-
-.favoritesIcon {
- position: absolute;
- font-size: 15px;
- top: 0px;
- right: 0px;
- color: #FFFFFF;
- padding: 5px;
- background-color: #000000;
- opacity: 0.7;
- cursor: pointer;
-}
-
-.favorited {
- color: yellow;
-}
-
-.videoDuration {
- position: absolute;
- font-size: 13px;
- bottom: -7px;
- right: 0px;
- color: #FFFFFF;
- padding: 2px;
- background-color: #000000;
- opacity: 0.7;
- cursor: pointer;
-}
-
-.videoWatched {
- position: absolute;
- top: 0px;
- left: 0px;
- width: 100%;
- background-color: rgba(0,0,0,0.4);
- color: #FFFFFF;
- pointer-events: none;
-}
-
-.watchedProgressBar {
- background-color: var(--red-500);
- opacity: 0.8;
- height: 3px;
- position: absolute;
- bottom: 0px;
- left: 0px;
- cursor: pointer;
-}
-
-.videoTitle {
- color: var(--title-color);
- font-weight: bold;
- cursor: pointer;
-}
-
-.channelName {
- color: var(--secondary-text-color);
- cursor: pointer;
- font-size: 14px;
-}
-
-.viewCount {
- cursor: pointer;
- font-size: 13px;
-}
-
-.uploadedTime {
- cursor: pointer;
- font-size: 13px;
-}
-
-.liveText {
- color: var(--red-500);
- font-size: 13px;
- cursor: pointer;
-}
-
-/deep/ .iconButton {
- font-size: 15px;
- padding: 8px;
-}
-
-/deep/ .iconDropdown {
- margin-top: 30px;
-}
-
-.grid {
- width: 240px;
- height: 250px;
- padding: 2px;
- overflow: hidden;
-}
-
-.grid .videoThumbnail {
- width: 100%;
- height: 130px;
- margin-bottom: -5px;
-}
-
-.grid .videoThumbnail img {
- width: 100%;
- height: 130px;
-}
-
-.grid .videoWatched {
- height: 110px;
-}
-
-.grid .optionsButton {
- margin-top: 10px;
- margin-left: 210px;
- position: absolute;
-}
-
-.grid .videoTitle {
- max-height: 55px;
- width: 210px;
- overflow-y: hidden;
- margin-bottom: -15px;
-}
-
-.grid .channelName {
- width: 220px;
- height: 17px;
- margin-bottom: 10px;
- overflow-y: hidden;
-}
-
-.grid .liveText {
- float: right;
-}
-
-.list {
- height: 140px;
- width: 100%;
- margin-left: 5px;
- margin-top: 15px;
-}
-
-.list .videoThumbnail {
- float: left;
- width: 240px;
- height: 130px;
-}
-
-.list .videoThumbnail img {
- width: 100%;
- height: 130px;
-}
-
-.list .videoWatched {
- height: 130px;
-}
-
-.list .optionsButton {
- float: right;
-}
-
-.list .videoTitle {
- margin-left: 250px;
- margin-top: 5px;
- margin-bottom: -10px;
-}
-
-.list .channelName {
- margin-left: 250px;
- max-width: 275px;
-}
-
-.list .viewCount {
- margin-left: 10px;
-}
-
-.list .liveText {
- margin-left: 10px;
-}
-
-.list .description {
- margin-left: 250px;
- font-size: 13px;
- color: var(--secondary-text-color);
- height: 35px;
- overflow: hidden;
-}
-
-.videoRecommendation.list {
- height: 110px;
-}
-
-.videoRecommendation.list .videoThumbnail {
- width: 180px;
- height: 100px;
-}
-
-.videoRecommendation.list .videoThumbnail img {
- height: 100px;
-}
-
-.videoRecommendation.list .videoTitle {
- font-size: 12px;
- margin-left: 185px;
-}
-
-.videoRecommendation.list .channelName {
- margin-left: 185px;
-}
-
-.videoRecommendation.list .viewCount {
- margin-left: 5px;
-}
-
-.playlistItem .list {
- height: 60px;
- width: calc(100% - 30px);
-}
-
-.playlistItem .list .videoThumbnail {
- width: 100px;
- height: 60px;
-}
-
-.playlistItem .list .videoThumbnail img {
- height: 60px;
-}
-
-.playlistItem .list .videoTitle {
- font-size: 12px;
- margin-left: 105px;
- margin-right: 30px;
-}
-
-.playlistItem .list .channelName {
- margin-left: 105px;
- margin-right: 30px;
-}
-
-.playlistItem .list .viewCount {
- margin-left: 5px;
-}
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
index efddb67b..8b2da219 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -18,6 +18,10 @@ export default Vue.extend({
forceListType: {
type: String,
default: null
+ },
+ appearance: {
+ type: String,
+ required: true
}
},
data: function () {
@@ -121,31 +125,6 @@ export default Vue.extend({
}
},
methods: {
- play: function () {
- const playlistInfo = {
- playlistId: this.playlistId
- }
- console.log('playlist info')
- console.log(playlistInfo)
-
- if (this.playlistId !== null) {
- console.log('Sending playlist info')
- this.$router.push(
- {
- path: `/watch/${this.id}`,
- query: playlistInfo
- }
- )
- } else {
- console.log('no playlist found')
- this.$router.push({ path: `/watch/${this.id}` })
- }
- },
-
- goToChannel: function () {
- this.$router.push({ path: `/channel/${this.channelId}` })
- },
-
toggleSave: function () {
console.log('TODO: ft-list-video method toggleSave')
},
diff --git a/src/renderer/components/ft-list-video/ft-list-video.sass b/src/renderer/components/ft-list-video/ft-list-video.sass
new file mode 100644
index 00000000..cdebfe2e
--- /dev/null
+++ b/src/renderer/components/ft-list-video/ft-list-video.sass
@@ -0,0 +1 @@
+@use "../../sass-partials/_ft-list-item"
diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
index 1018a95b..f1ab22f4 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -1,27 +1,39 @@
-
- {{ videoCount }}
-
-
+ -
+
+ {{ videoCount }}
+
+
+ {{ title }}
+
+
-
+
+ {{ channelName }}
+
- {{ title }} -
-- {{ channelName }} -
-
-
+
diff --git a/src/renderer/components/watch-playlist/watch-playlist.css b/src/renderer/components/watch-playlist/watch-playlist.css
deleted file mode 100644
index 4c88fdbd..00000000
--- a/src/renderer/components/watch-playlist/watch-playlist.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.maxWidth {
- width: 100%;
-}
diff --git a/src/renderer/components/watch-playlist/watch-playlist.js b/src/renderer/components/watch-playlist/watch-playlist.js
deleted file mode 100644
index 7a0429e7..00000000
--- a/src/renderer/components/watch-playlist/watch-playlist.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Vue from 'vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtGrid from '../ft-grid/ft-grid.vue'
-import FtListVideo from '../ft-list-video/ft-list-video.vue'
-import FtListChannel from '../ft-list-channel/ft-list-channel.vue'
-import FtListPlaylist from '../ft-list-playlist/ft-list-playlist.vue'
-
-export default Vue.extend({
- name: 'WatchPlaylist',
- components: {
- 'ft-flex-box': FtFlexBox,
- 'ft-grid': FtGrid,
- 'ft-list-video': FtListVideo,
- 'ft-list-channel': FtListChannel,
- 'ft-list-playlist': FtListPlaylist
- },
- props: {
- data: {
- type: Array,
- required: true
- }
- },
- data: function () {
- return {
- test: 'hello'
- }
- },
- computed: {
- listType: function () {
- return this.$store.getters.getListType
- }
- }
-})
diff --git a/src/renderer/components/watch-playlist/watch-playlist.vue b/src/renderer/components/watch-playlist/watch-playlist.vue
deleted file mode 100644
index 09cddb3b..00000000
--- a/src/renderer/components/watch-playlist/watch-playlist.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
- ![]()
+
-
+
- +
- {{ duration }}
-
-
+
- {{ title }} -
-- {{ channelName }} -
- - {{ viewCount }} views - - - - {{ uploadedTime }} - - - {{ viewCount }} watching - -- {{ description }} -
- - LIVE NOW - +
+
+ {{ title }}
+
+
+
+ {{ channelName }}
+
+ • {{ viewCount }} views
+ • {{ uploadedTime }}
+ • {{ viewCount }} watching
+
+ + {{ description }} +
+- {{ index + 1 }} -
+
+
+ {{ index + 1 }} +
+