diff --git a/package-lock.json b/package-lock.json
index d4b0705b..3753c90e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10119,7 +10119,7 @@
},
"finalhandler": {
"version": "1.1.2",
- "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+ "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
"integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
"dev": true,
"requires": {
@@ -11167,7 +11167,7 @@
},
"got": {
"version": "9.6.0",
- "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+ "resolved": "http://registry.npmjs.org/got/-/got-9.6.0.tgz",
"integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
"dev": true,
"requires": {
@@ -11511,7 +11511,7 @@
},
"http-errors": {
"version": "1.7.2",
- "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+ "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
"integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
"dev": true,
"requires": {
@@ -14687,7 +14687,7 @@
},
"media-typer": {
"version": "0.3.0",
- "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+ "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
"dev": true
},
@@ -17927,7 +17927,7 @@
"dependencies": {
"http-errors": {
"version": "1.6.3",
- "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+ "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
"integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
"dev": true,
"requires": {
@@ -19052,7 +19052,7 @@
},
"through": {
"version": "2.3.8",
- "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+ "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
"dev": true
},
diff --git a/src/renderer/assets/img/invidious-logo-dark.svg b/src/renderer/assets/img/invidious-logo-dark.svg
new file mode 100644
index 00000000..a0542d63
--- /dev/null
+++ b/src/renderer/assets/img/invidious-logo-dark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/renderer/assets/img/invidious-logo-light.svg b/src/renderer/assets/img/invidious-logo-light.svg
new file mode 100644
index 00000000..d1c7c196
--- /dev/null
+++ b/src/renderer/assets/img/invidious-logo-light.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/renderer/assets/img/yt_logo_mono_dark.png b/src/renderer/assets/img/yt_logo_mono_dark.png
new file mode 100644
index 00000000..05a4df7c
Binary files /dev/null and b/src/renderer/assets/img/yt_logo_mono_dark.png differ
diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
index f5378730..8da474f1 100644
--- a/src/renderer/components/ft-button/ft-button.css
+++ b/src/renderer/components/ft-button/ft-button.css
@@ -17,7 +17,7 @@
font-weight: 500;
vertical-align: middle;
margin: 5px;
- box-shadow: 0 0 2px -2px rgba(29, 39, 231, .1), 0 0 3px 0 rgba(29, 39, 231, .1), 0 0 5px 0 rgba(29, 39, 231, .1), 0 2px 2px -4px rgba(29, 39, 231, .1), 0 4px 8px 0 rgba(29, 39, 231, .1), 0 2px 15px 0 rgba(29, 39, 231, .1);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.ripple {
diff --git a/src/renderer/components/ft-button/ft-button.js b/src/renderer/components/ft-button/ft-button.js
index 7c70ddb3..c4b66418 100644
--- a/src/renderer/components/ft-button/ft-button.js
+++ b/src/renderer/components/ft-button/ft-button.js
@@ -15,7 +15,7 @@ export default Vue.extend({
props: {
label: {
type: String,
- required: true
+ default: ""
},
textColor: {
type: String,
diff --git a/src/renderer/components/ft-button/ft-button.vue b/src/renderer/components/ft-button/ft-button.vue
index 4ae16773..24cbfdb6 100644
--- a/src/renderer/components/ft-button/ft-button.vue
+++ b/src/renderer/components/ft-button/ft-button.vue
@@ -8,7 +8,9 @@
}"
@click="$emit('click')"
>
- {{ label }}
+
+ {{ label }}
+
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.css b/src/renderer/components/ft-icon-button/ft-icon-button.css
deleted file mode 100644
index bd65f661..00000000
--- a/src/renderer/components/ft-icon-button/ft-icon-button.css
+++ /dev/null
@@ -1,121 +0,0 @@
-.ftIconButton {
- display: flex;
- flex-flow: row wrap;
- justify-content: space-evenly;
- position: relative;
-}
-
-.iconButton {
- width: 1em;
- height: 1em;
- padding: 10px;
- font-size: 20px;
- border-radius: 50%;
- cursor: pointer;
- -moz-transition: background 0.2s ease-out;
- -o-transition: background 0.2s ease-out;
- transition: background 0.2s ease-out;
-}
-
-.shadow {
- box-shadow: 0 1px 2px rgba(0,0,0,.5);
-}
-
-.iconButton:hover {
- -moz-transition: background 0.2s ease-in;
- -o-transition: background 0.2s ease-in;
- transition: background 0.2s ease-in;
-}
-
-.base {
- background-color: var(--card-bg-color);
- color: var(--primary-text-color);
-}
-
-.base:hover {
- background-color: var(--side-nav-hover-color);
-}
-
-.base:active {
- background-color: var(--side-nav-active-color);
-}
-
-.primary {
- background-color: var(--primary-color);
- color: var(--text-with-main-color);
-}
-
-.primary:hover {
- background-color: var(--primary-color-hover);
-}
-
-.primary:active {
- background-color: var(--primary-color-active);
-}
-
-.secondary {
- background-color: var(--accent-color);
- color: var(--text-with-accent-color);
-}
-
-.secondary:hover {
- background-color: var(--accent-color-hover);
-}
-
-.secondary:active {
- background-color: var(--accent-color-active);
-}
-
-.iconDropdown {
- position: absolute;
- text-align: center;
- list-style-type: none;
- z-index: 100;
- margin-top: 45px;
- font-size: 12px;
- box-shadow: 0 1px 2px rgba(0,0,0,.5);
- background-color: var(--card-bg-color);
- color: var(--secondary-text-color);
-}
-
-.iconDropdown .dropdownItem {
- padding: 10px;
- margin: 0;
- white-space: nowrap;
- cursor: pointer;
- -moz-transition: background 0.2s ease-out;
- -o-transition: background 0.2s ease-out;
- transition: background 0.2s ease-out;
-}
-
-.iconDropdown .dropdownItem:hover {
- background-color: var(--side-nav-hover-color);
- -moz-transition: background 0.2s ease-in;
- -o-transition: background 0.2s ease-in;
- transition: background 0.2s ease-in;
-}
-
-.iconDropdown .dropdownItem:active {
- background-color: var(--side-nav-active-color);
- -moz-transition: background 0.1s ease-in;
- -o-transition: background 0.1s ease-in;
- transition: background 0.1s ease-in;
-}
-
-.iconDropdown .dropdownItem a {
- text-decoration: none;
- color: inherit;
-}
-
-.left {
- right: 50%;
-}
-
-.right {
- left: 50%;
-}
-
-.top {
- margin-top: 0px;
- bottom: 60px;
-}
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass
new file mode 100644
index 00000000..338e9228
--- /dev/null
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.sass
@@ -0,0 +1,85 @@
+.ftIconButton
+ display: flex
+ flex-flow: row wrap
+ justify-content: space-evenly
+ position: relative
+
+.iconButton
+ width: 1em
+ height: 1em
+ padding: 10px
+ font-size: 20px
+ border-radius: 50%
+ cursor: pointer
+ transition: background 0.15s ease-out
+
+ &.shadow
+ box-shadow: 0 1px 2px rgba(0,0,0,.5)
+
+ &.base
+ background-color: var(--card-bg-color)
+ color: var(--primary-text-color)
+
+ &:hover
+ background-color: var(--side-nav-hover-color)
+
+ &:active
+ background-color: var(--side-nav-active-color)
+
+ &.primary
+ background-color: var(--primary-color)
+ color: var(--text-with-main-color)
+
+ &:hover
+ background-color: var(--primary-color-hover)
+
+ &:active
+ background-color: var(--primary-color-active)
+
+ &.secondary
+ background-color: var(--accent-color)
+ color: var(--text-with-accent-color)
+
+ &:hover
+ background-color: var(--accent-color-hover)
+
+ &:active
+ background-color: var(--accent-color-active)
+
+.iconDropdown
+ position: absolute
+ text-align: center
+ list-style-type: none
+ z-index: 3
+ margin-top: 45px
+ font-size: 12px
+ box-shadow: 0 1px 2px rgba(0,0,0,.5)
+ background-color: var(--side-nav-color)
+ color: var(--secondary-text-color)
+ user-select: none
+
+ &.left
+ right: calc(50% - 20px)
+
+ &.right
+ left: calc(50% - 20px)
+
+ .list
+ margin: 0
+ padding: 0
+ list-style-type: none
+
+ .listItem
+ padding: 10px
+ margin: 0
+ white-space: nowrap
+ cursor: pointer
+ transition: background 0.2s ease-out
+
+ &:hover
+ background-color: var(--side-nav-hover-color)
+ transition: background 0.2s ease-in
+
+ &:active
+ background-color: var(--side-nav-active-color)
+ transition: background 0.1s ease-in
diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue
index 913dc8e3..e445a5d2 100644
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue
@@ -24,22 +24,23 @@
}"
>
-
+
+
-
+
diff --git a/src/renderer/components/ft-list-video/ft-list-video.css b/src/renderer/components/ft-list-video/ft-list-video.css
index 52c13222..7d8f22d8 100644
--- a/src/renderer/components/ft-list-video/ft-list-video.css
+++ b/src/renderer/components/ft-list-video/ft-list-video.css
@@ -190,3 +190,58 @@
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-share-button/ft-share-button.js b/src/renderer/components/ft-share-button/ft-share-button.js
new file mode 100644
index 00000000..ac9799c0
--- /dev/null
+++ b/src/renderer/components/ft-share-button/ft-share-button.js
@@ -0,0 +1,96 @@
+import Vue from 'vue'
+
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+export default Vue.extend({
+ name: 'FtShareButton',
+ components: {
+ 'ft-icon-button': FtIconButton,
+ 'ft-button': FtButton
+ },
+ props: {
+ id: {
+ type: String,
+ required: true
+ }
+ },
+ computed: {
+ invidiousInstance: function () {
+ return this.$store.getters.getInvidiousInstance
+ },
+
+ usingElectron: function () {
+ return this.$store.getters.getUsingElectron
+ },
+
+ invidiousURL() {
+ return `${this.invidiousInstance}/watch?v=${this.id}`
+ },
+
+ invidiousEmbedURL() {
+ return `${this.invidiousInstance}/embed/${this.id}`
+ },
+
+ youtubeURL() {
+ return `https://www.youtube.com/watch?v=${this.id}`
+ },
+
+ youtubeEmbedURL() {
+ return `https://www.youtube-nocookie.com/embed/${this.id}`
+ },
+
+ },
+ methods: {
+ copy(text) {
+ navigator.clipboard.writeText(text)
+ },
+
+ open(url) {
+ if (this.usingElectron) {
+ const shell = require('electron').shell
+ shell.openExternal(url)
+ }
+ },
+
+ openInvidious() {
+ this.open(this.invidiousURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ copyInvidious() {
+ this.copy(this.invidiousURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ openYoutube() {
+ this.open(this.youtubeURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ copyYoutube() {
+ this.copy(this.youtubeURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ openYoutubeEmbed() {
+ this.open(this.youtubeEmbedURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ copyYoutubeEmbed() {
+ this.copy(this.youtubeEmbedURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ openInvidiousEmbed() {
+ this.open(this.invidiousEmbedURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+
+ copyInvidiousEmbed() {
+ this.copy(this.invidiousEmbedURL)
+ this.$refs.iconButton.toggleDropdown()
+ },
+ }
+})
diff --git a/src/renderer/components/ft-share-button/ft-share-button.sass b/src/renderer/components/ft-share-button/ft-share-button.sass
new file mode 100644
index 00000000..21239972
--- /dev/null
+++ b/src/renderer/components/ft-share-button/ft-share-button.sass
@@ -0,0 +1,55 @@
+.shareLinks
+ display: grid
+ grid-template-rows: auto auto
+ grid-auto-flow: column
+ padding: 12px
+ width: max-content
+
+ .header
+ font-size: 18px
+ font-weight: bold
+ margin: 4px 0px 8px
+ color: var(--primary-text-color)
+
+ .buttons
+ display: flex
+ flex-direction: column
+
+ .action
+ padding: 6px
+
+ .divider
+ grid-row: span 3
+ margin: 0px 12px
+ width: 1px
+ background: var(--tertiary-text-color)
+
+ .youtubeLogo
+ height: 18px
+ width: auto
+
+ @at-root
+ .dark &
+ filter: brightness(0.868)
+
+ .light &
+ filter: invert(0.87)
+
+ .invidious
+ display: flex
+ justify-content: center
+ letter-spacing: -0.4px
+
+ .invidiousLogo
+ display: inline-block
+ width: 20px
+ height: 20px
+ background-size: cover
+ margin-right: 2px
+
+ @at-root
+ .dark &
+ background-image: url(~../../assets/img/invidious-logo-dark.svg)
+
+ .light &
+ background-image: url(~../../assets/img/invidious-logo-light.svg)
diff --git a/src/renderer/components/ft-share-button/ft-share-button.vue b/src/renderer/components/ft-share-button/ft-share-button.vue
new file mode 100644
index 00000000..61ff16c6
--- /dev/null
+++ b/src/renderer/components/ft-share-button/ft-share-button.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
+ Copy link
+
+
+
+ Open link
+
+
+
+ Copy embed
+
+
+
+ Open embed
+
+
+
+
+
+
+
+
+
+
+ Copy link
+
+
+
+ Open link
+
+
+
+ Copy embed
+
+
+
+ Open embed
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/ft-video-player/ft-video-player.css b/src/renderer/components/ft-video-player/ft-video-player.css
index 0e9e0705..0bd28f8f 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.css
+++ b/src/renderer/components/ft-video-player/ft-video-player.css
@@ -1,9 +1,7 @@
.relative {
position: relative;
- width: 85%;
}
.ftVideoPlayer {
- width: 85%;
max-height: 50vh;
}
diff --git a/src/renderer/components/side-nav/side-nav.css b/src/renderer/components/side-nav/side-nav.css
index 0be50dbd..c5e748ad 100644
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/src/renderer/components/side-nav/side-nav.css
@@ -2,19 +2,30 @@
display: block;
height: calc(100vh - 60px);
width: 200px;
- overflow-y: auto;
+ overflow-x: hidden;
position: fixed;
left: 0px;
top: 0px;
z-index: 1;
margin-top: 60px;
- -webkit-box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
+ box-shadow: 1px -1px 1px -1px var(--primary-shadow-color);
background-color: var(--side-nav-color);
transition-property: width;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
}
+.inner {
+ height: 100%;
+ width: 200px;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.closed .inner {
+ width: 80px;
+}
+
.topNavOption {
margin-top: 10px;
}
@@ -97,6 +108,10 @@
}
@media only screen and (max-width: 680px) {
+ .inner {
+ display: contents; /* sunglasses emoji */
+ }
+
hr, .mobileHidden, .refreshIcon {
display: none;
}
@@ -117,7 +132,7 @@
width: 100%;
bottom: 0px;
top: auto;
- overflow-y: inherit;
+ overflow-y: hidden;
}
.navOption, .closed .navOption {
diff --git a/src/renderer/components/side-nav/side-nav.vue b/src/renderer/components/side-nav/side-nav.vue
index 30435826..b4d3e362 100644
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/src/renderer/components/side-nav/side-nav.vue
@@ -4,99 +4,101 @@
class="sideNav"
:class="{closed: !isOpen}"
>
-
-
-
- Subscriptions
-
-
+
+
+
+ Subscriptions
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
diff --git a/src/renderer/components/watch-video-description/watch-video-description.css b/src/renderer/components/watch-video-description/watch-video-description.css
index e7035208..ef3c71c2 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.css
+++ b/src/renderer/components/watch-video-description/watch-video-description.css
@@ -1,7 +1,10 @@
+.videoDescription {
+ overflow-y: auto;
+ max-height: 300px;
+}
+
.description {
font-family: 'Roboto', sans-serif;
font-size: 17px;
white-space: pre-wrap;
- max-height: 300px;
- overflow-y: auto;
}
diff --git a/src/renderer/components/watch-video-description/watch-video-description.js b/src/renderer/components/watch-video-description/watch-video-description.js
index c5a45e8b..095dc038 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.js
+++ b/src/renderer/components/watch-video-description/watch-video-description.js
@@ -23,15 +23,10 @@ export default Vue.extend({
},
data: function () {
return {
- dateString: '',
shownDescription: ''
}
},
mounted: function () {
- const date = new Date(this.published)
- const dateSplit = date.toDateString().split(' ')
- this.dateString = `${dateSplit[0]} ${dateSplit[1]} ${dateSplit[2]}, ${dateSplit[3]}`
-
if (this.descriptionHtml !== '') {
this.shownDescription = this.parseDescriptionHtml(this.descriptionHtml)
} else {
diff --git a/src/renderer/components/watch-video-description/watch-video-description.vue b/src/renderer/components/watch-video-description/watch-video-description.vue
index ee3e4132..8ed65de6 100644
--- a/src/renderer/components/watch-video-description/watch-video-description.vue
+++ b/src/renderer/components/watch-video-description/watch-video-description.vue
@@ -1,6 +1,5 @@
- Published on {{ dateString }}
-
-
- {{ title }}
-
-
+
+
+ Published {{ dateString }}
+
+
+ {{ parsedViewCount }}
+
+
+
+
+
+ {{ likeCount }}
+ {{ dislikeCount }}
+
+
+
+
+
+
+
+
-
-
- {{ likeCount }}
-
-
- {{ dislikeCount }}
-
-
+
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 8a0f27fc..292fdedd 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -75,32 +75,3 @@
position: relative;
bottom: 7px;
}
-
-/deep/ .list {
- height: 60px;
- width: calc(100% - 30px);
-}
-
-/deep/ .list .videoThumbnail {
- width: 100px;
- height: 60px;
-}
-
-/deep/ .list .videoThumbnail img {
- height: 60px;
-}
-
-/deep/ .list .videoTitle {
- font-size: 12px;
- margin-left: 105px;
- margin-right: 30px;
-}
-
-/deep/ .list .channelName {
- margin-left: 105px;
- margin-right: 30px;
-}
-
-/deep/ .list .viewCount {
- margin-left: 5px;
-}
diff --git a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
index 4e95dfed..e83928a1 100644
--- a/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
+++ b/src/renderer/components/watch-video-recommendations/watch-video-recommendations.css
@@ -5,29 +5,3 @@
.videoRecommendation {
margin-bottom: -15px;
}
-
-/deep/ .list {
- height: 110px;
-}
-
-/deep/ .list .videoThumbnail {
- width: 180px;
- height: 100px;
-}
-
-/deep/ .list .videoThumbnail img {
- height: 100px;
-}
-
-/deep/ .list .videoTitle {
- font-size: 12px;
- margin-left: 185px;
-}
-
-/deep/ .list .channelName {
- margin-left: 185px;
-}
-
-/deep/ .list .viewCount {
- margin-left: 5px;
-}
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 27b3ac37..6e082cd3 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -20,7 +20,7 @@
.dark {
--primary-text-color: #EEEEEE;
--secondary-text-color: #ddd;
- --tertiary-text-color: #888;
+ --tertiary-text-color: #999;
--primary-input-color: rgba(0, 0, 0, 0.50);
--primary-shadow-color: rgba(0, 0, 0, 0.75);
--title-color: #EEEEEE;
diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css
index 580a77ec..3e7f106e 100644
--- a/src/renderer/videoJS.css
+++ b/src/renderer/videoJS.css
@@ -166,10 +166,15 @@
font-family: VideoJS;
font-weight: normal;
font-style: normal;
+ position: relative;
+ top: -3px;
}
.vjs-icon-cog:before {
content: "\f110";
}
+.video-js .vjs-icon-cog {
+ font-size: 2em;
+}
.vjs-icon-circle, .vjs-seek-to-live-control .vjs-icon-placeholder, .video-js .vjs-volume-level, .video-js .vjs-play-progress {
font-family: VideoJS;
@@ -335,7 +340,6 @@
.video-js {
display: block;
- vertical-align: top;
box-sizing: border-box;
color: #fff;
background-color: #000;
@@ -774,7 +778,7 @@ body.vjs-full-window {
}
.vjs-button > .vjs-icon-placeholder:before {
- font-size: 1.8em;
+ font-size: 2em;
line-height: 1.67;
}
@@ -810,6 +814,7 @@ body.vjs-full-window {
align-items: center;
min-width: 4em;
touch-action: none;
+ z-index: 1;
}
.video-js .vjs-progress-control.disabled {
@@ -1012,7 +1017,7 @@ body.vjs-full-window {
transition: left 0s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
- width: 10em;
+ width: 8em;
transition: width 0.1s;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
@@ -1057,6 +1062,8 @@ body.vjs-full-window {
.vjs-volume-bar.vjs-slider-horizontal {
width: 5em;
height: 0.3em;
+ position: relative;
+ top: -2px;
}
.vjs-volume-bar.vjs-slider-vertical {
@@ -1237,6 +1244,8 @@ body.vjs-full-window {
.video-js .vjs-play-control {
cursor: pointer;
+ position: relative;
+ top: -1px;
}
.video-js .vjs-play-control .vjs-icon-placeholder {
@@ -1285,15 +1294,19 @@ video::-webkit-media-text-track-display {
.video-js .vjs-picture-in-picture-control {
cursor: pointer;
flex: none;
+ position: relative;
+ top: -1px;
}
.video-js .vjs-fullscreen-control {
cursor: pointer;
flex: none;
+ position: relative;
+ top: -1px;
}
.vjs-playback-rate > .vjs-menu-button,
.vjs-playback-rate .vjs-playback-rate-value {
position: absolute;
- top: 16px;
+ top: 12px;
left: 0;
width: 100%;
height: 100%;
@@ -1760,7 +1773,10 @@ video::-webkit-media-text-track-display {
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
- width: auto
+ width: auto;
+ font-size: 14px;
+ position: relative;
+ top: -6px;
}
.video-js .vjs-time-control.vjs-time-divider {
@@ -1815,8 +1831,8 @@ video::-webkit-media-text-track-display {
}
.video-js .vjs-progress-control:hover {
- height: 1em;
- top: -1em
+ height: 1.25em;
+ top: -0.95em
}
.video-js .vjs-control-bar {
@@ -1831,6 +1847,7 @@ video::-webkit-media-text-track-display {
visibility: visible;
opacity: 1;
-webkit-backface-visibility: hidden;
+ backface-visibility: hidden;
-webkit-transform: translateY(3em);
-moz-transform: translateY(3em);
-ms-transform: translateY(3em);
@@ -1896,6 +1913,12 @@ video::-webkit-media-text-track-display {
width: 5.5em;
left: 1.5em;
padding-bottom: .5em;
+ z-index: 1;
+ bottom: 1.15em;
+}
+
+.video-js .vjs-menu-button-popup.vjs-http-source-selector .vjs-menu .vjs-menu-content {
+ bottom: 1.5em;
}
.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item,.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title {
@@ -1988,3 +2011,13 @@ video::-webkit-media-text-track-display {
.video-js .vjs-http-source-selector {
top: 4px;
}
+
+.vjs-subs-caps-button.vjs-control {
+ position: relative;
+ top: -1px;
+}
+
+.vjs-volume-panel .vjs-mute-control {
+ position: relative;
+ top: -1px;
+}
diff --git a/src/renderer/views/Watch/Watch.css b/src/renderer/views/Watch/Watch.css
deleted file mode 100644
index 0500876b..00000000
--- a/src/renderer/views/Watch/Watch.css
+++ /dev/null
@@ -1,123 +0,0 @@
-.watchVideo {
- width: 65%;
- float: left;
- margin-top: 0px;
- margin-bottom: 10px;
-}
-
-.theatreWatchVideo {
- float: none;
- margin: 0 auto;
- width: 85%;
- margin-bottom: 10px;
-}
-
-.videoPlayer {
- width: calc(65% + 30px);
- float: left;
- margin-top: 0px;
- margin-left: 10px;
- margin-bottom: 10px;
-}
-
-.theatrePlayer {
- width: 100%;
- float: none;
- margin: 0 auto;
- margin-bottom: 10px;
-}
-
-.watchVideoSideBar {
- width: 27%;
- max-width: 425px;
- float: right;
- margin-bottom: 10px;
- position: absolute;
-}
-
-.watchVideoPlaylist {
- right: 10px;
- top: 70px;
- height: 500px;
-}
-
-.theatrePlaylist {
- float: none;
- margin: 0 auto;
- width: 85%;
- height: 500px;
- margin-bottom: 10px;
- max-width: none;
- position: static;
-}
-
-.watchVideoRecommendations {
- right: 10px;
-}
-
-.watchVideoRecommendationsNoCard {
- top: 70px;
-}
-
-.watchVideoRecommendationsLowerCard {
- top: 600px;
-}
-
-.theatreRecommendations {
- float: none;
- margin: 0 auto;
- width: 85%;
- max-width: none;
- position: static;
-}
-
-@media only screen and (max-width: 1500px) {
- .watchVideo {
- width: 63%;
- }
-
- .videoPlayer {
- width: calc(63% + 30px);
- }
-
- .theatreWatchVideo {
- width: 85%;
- }
-
- .theatrePlayer {
- width: calc(85% + 30px);
- }
-}
-
-@media only screen and (max-width: 1350px) {
- .watchVideo {
- float: none;
- margin: 0 auto;
- width: 85%;
- margin-bottom: 10px;
- }
-
- .videoPlayer {
- float: none;
- margin: 0 auto;
- width: calc(85% + 30px);
- margin-bottom: 10px;
- }
-
- .watchVideoPlaylist {
- float: none;
- margin: 0 auto;
- margin-bottom: 10px;
- width: 85%;
- max-width: none;
- position: static;
- }
-
- .watchVideoRecommendations {
- float: none;
- margin: 0 auto;
- width: 85%;
- max-width: none;
- position: static;
- }
-}
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
new file mode 100644
index 00000000..1372bbb7
--- /dev/null
+++ b/src/renderer/views/Watch/Watch.sass
@@ -0,0 +1,57 @@
+=dual-column-template
+ grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+
+=theatre-mode-template
+ grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+
+=single-column-template
+ grid-template: "video" auto "info" auto "sidebar" auto / auto
+
+.videoLayout
+ display: grid
+ align-items: start
+ +dual-column-template
+
+ @media only screen and (max-width: 1350px)
+ +theatre-mode-template
+
+ @media only screen and (min-width: 901px)
+ &.useTheatreMode
+ +theatre-mode-template
+
+ @media only screen and (max-width: 900px)
+ +single-column-template
+
+ &.isLoading
+ +single-column-template
+
+ .videoArea
+ grid-area: video
+
+ .videoAreaMargin
+ margin: 0px 8px 16px
+
+ .videoPlayer
+ grid-column: 1
+ max-width: calc(80vh * 1.78)
+ margin: 0 auto
+
+ .watchVideo
+ margin: 0px 8px 16px
+ grid-column: 1
+
+ .infoArea
+ grid-area: info
+
+ .sidebarArea
+ grid-area: sidebar
+
+ @media only screen and (min-width: 901px)
+ min-width: 380px
+
+ .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
+ height: 500px
+ margin: 0 8px 16px
+
+ .watchVideoRecommendations, .theatreRecommendations
+ margin: 0 8px 16px
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 43bf9f25..a47b638e 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -1,81 +1,95 @@
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
+