diff --git a/_scripts/build.js b/_scripts/build.js index 621d3b5b..8ac729db 100644 --- a/_scripts/build.js +++ b/_scripts/build.js @@ -17,14 +17,14 @@ if (platform == 'darwin') { const config = { appId: `io.freetubeapp.${name}`, - copyright: 'Copyleft ©2020 freetubeapp@protonmail.com', + copyright: 'Copyleft © 2020 freetubeapp@protonmail.com', // asar: false, // compression: 'store', productName, directories: { output: './build/', }, - files: ['_icons/icon.*', './dist/**/*', '!./dist/web/**/*'], + files: ['_icons/**/*', './dist/**/*', '!./dist/web/**/*'], dmg: { contents: [ { @@ -46,7 +46,7 @@ const config = { }, linux: { icon: '_icons/iconColor.png', - target: ['deb', 'rpm', 'zip', 'AppImage'], + target: ['deb'], }, mac: { category: 'public.app-category.utilities', diff --git a/_scripts/webpack.main.config.js b/_scripts/webpack.main.config.js index 8da85eb9..4bca7a68 100644 --- a/_scripts/webpack.main.config.js +++ b/_scripts/webpack.main.config.js @@ -80,7 +80,7 @@ if (isDevMode) { }, { from: path.join(__dirname, '../_icons'), - to: path.join(__dirname, '../dist/web/_icons'), + to: path.join(__dirname, '../dist/_icons'), globOptions: { ignore: ['.*'], }, diff --git a/package.json b/package.json index 5aca1519..f0a7d32b 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "productName": "FreeTube-Vue", "repository": { "type": "git", - "url": "git+https://github.com/mubaidr/vue-electron-template.git" + "url": "git+https://github.com/FreeTubeApp/FreeTube-Vue.git" }, "scripts": { "build": "run-s rebuild:electron pack build-release", diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js index 2bc5b9c9..50304108 100644 --- a/src/renderer/components/ft-video-player/ft-video-player.js +++ b/src/renderer/components/ft-video-player/ft-video-player.js @@ -220,9 +220,9 @@ export default Vue.extend({ this.player.volume(this.volume) this.player.playbackRate(this.defaultPlayback) - this.player.vttThumbnails({ - src: this.storyboardSrc - }) + // this.player.vttThumbnails({ + // src: this.storyboardSrc + // }) if (this.useDash) { this.dataSetup.plugins.httpSourceSelector = { diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js index f68c4b64..77ebd409 100644 --- a/src/renderer/components/general-settings/general-settings.js +++ b/src/renderer/components/general-settings/general-settings.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import $ from 'jquery' import { mapActions } from 'vuex' import FtCard from '../ft-card/ft-card.vue' import FtSelect from '../ft-select/ft-select.vue' @@ -16,6 +17,9 @@ export default Vue.extend({ data: function () { return { title: 'General Settings', + showInvidiousInstances: false, + instanceNames: [], + instanceValues: [], backendNames: [ 'Invidious API', 'Local API' @@ -541,6 +545,9 @@ export default Vue.extend({ } }, computed: { + invidiousInstance: function () { + return this.$store.getters.getInvidiousInstance + }, backendFallback: function () { return this.$store.getters.getBackendFallback }, @@ -563,6 +570,34 @@ export default Vue.extend({ return this.$store.getters.getThumbnailPreference } }, + mounted: function () { + const requestUrl = 'https://instances.invidio.us/instances.json' + $.getJSON(requestUrl, (response) => { + console.log(response) + const instances = response.filter((instance) => { + if (instance[0].includes('.onion') || instance[0].includes('.i2p')) { + return false + } else { + return true + } + }) + + this.instanceNames = instances.map((instance) => { + return instance[0] + }) + + this.instanceValues = instances.map((instance) => { + return instance[1].uri.replace(/\/$/, '') + }) + + this.showInvidiousInstances = true + }).fail((xhr, textStatus, error) => { + console.log(xhr) + console.log(textStatus) + console.log(requestUrl) + console.log(error) + }) + }, methods: { ...mapActions([ 'updateBackendFallback', @@ -572,7 +607,8 @@ export default Vue.extend({ 'updateLandingPage', 'updateRegion', 'updateListType', - 'updateThumbnailPreference' + 'updateThumbnailPreference', + 'updateInvidiousInstance' ]) } }) diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue index a33bac72..d9341f78 100644 --- a/src/renderer/components/general-settings/general-settings.vue +++ b/src/renderer/components/general-settings/general-settings.vue @@ -13,6 +13,7 @@ @change="updateBackendFallback" /> + diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue index cab45f7a..8d075a7a 100644 --- a/src/renderer/components/player-settings/player-settings.vue +++ b/src/renderer/components/player-settings/player-settings.vue @@ -9,12 +9,14 @@
{ - comment.messageHtml = comment.messageHtml + text.text + if (typeof (text.navigationEndpoint) !== 'undefined') { + if (typeof (text.navigationEndpoint.watchEndpoint) !== 'undefined') { + const htmlRef = `${text.text}` + comment.messageHtml = comment.messageHtml + htmlRef + } else { + comment.messageHtml = comment.messageHtml + text.text + } + } else if (typeof (text.alt) !== 'undefined') { + const htmlImg = `${text.alt}` + comment.messageHtml = comment.messageHtml + htmlImg + } else { + comment.messageHtml = comment.messageHtml + text.text + } }) comment.messageHtml = autolinker.link(comment.messageHtml) const liveChatComments = $('.liveChatComments') + const liveChatMessage = $('.liveChatMessage') - if (typeof (liveChatComments.get(0)) === 'undefined' && this.comments.length !== 0) { + if (typeof (liveChatComments.get(0)) === 'undefined' && typeof (liveChatMessage.get(0)) === 'undefined') { + console.log("Can't find chat object. Stopping chat connection") this.liveChat.stop() return } diff --git a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue index 4b0a542f..4a21390d 100644 --- a/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue +++ b/src/renderer/components/watch-video-live-chat/watch-video-live-chat.vue @@ -24,7 +24,7 @@

diff --git a/src/renderer/main.js b/src/renderer/main.js index e15e863f..ce8f7e1b 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -3,6 +3,7 @@ import Vue from 'vue' import App from './App.vue' import router from './router/index' import store from './store/index' +import 'material-design-icons/iconfont/material-icons.css' import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js index 494d78c5..8bf25b06 100644 --- a/src/renderer/store/modules/settings.js +++ b/src/renderer/store/modules/settings.js @@ -48,7 +48,7 @@ const state = { defaultVolume: 1, defaultPlayback: 1, defaultVideoFormat: 'dash', - defaultQuality: 'auto', + defaultQuality: '720', useTor: false, proxy: 'SOCKS5://127.0.0.1:9050', debugMode: false, @@ -156,6 +156,9 @@ const actions = { console.log(results) results.forEach((result) => { switch (result._id) { + case 'invidiousInstance': + commit('setInvidiousInstance', result.value) + break case 'backendFallback': commit('setBackendFallback', result.value) break @@ -223,6 +226,15 @@ const actions = { }) }, + updateInvidiousInstance ({ commit }, invidiousInstance) { + console.log(invidiousInstance) + settingsDb.update({ _id: 'invidiousInstance' }, { _id: 'invidiousInstance', value: invidiousInstance }, { upsert: true }, (err, numReplaced) => { + if (!err) { + commit('setInvidiousInstance', invidiousInstance) + } + }) + }, + updateBackendFallback ({ commit }, backendFallback) { settingsDb.update({ _id: 'backendFallback' }, { _id: 'backendFallback', value: backendFallback }, { upsert: true }, (err, numReplaced) => { if (!err) { @@ -394,6 +406,9 @@ const actions = { } const mutations = { + setInvidiousInstance (state, invidiousInstance) { + state.invidiousInstance = invidiousInstance + }, setCurrentTheme (state, currentTheme) { state.barColor = currentTheme }, diff --git a/src/renderer/themes.css b/src/renderer/themes.css index 6dda8363..67acbba1 100644 --- a/src/renderer/themes.css +++ b/src/renderer/themes.css @@ -12,8 +12,8 @@ --side-nav-hover-color: #e0e0e0; --side-nav-active-color: #757575; --search-bar-color: #f5f5f5; - --logo-icon: url("/_icons/iconColorSmall.png"); - --logo-text: url("/_icons/textColorSmall.png"); + --logo-icon: url("~../../_icons/iconColorSmall.png"); + --logo-text: url("~../../_icons/textColorSmall.png"); } @@ -31,8 +31,8 @@ --side-nav-hover-color: #212121; --side-nav-active-color: #303030; --search-bar-color: #262626; - --logo-icon: url("/_icons/iconColorSmall.png"); - --logo-text: url("/_icons/textColorSmall.png"); + --logo-icon: url("~../../_icons/iconColorSmall.png"); + --logo-text: url("~../../_icons/textColorSmall.png"); } @@ -50,8 +50,8 @@ --side-nav-hover-color: #212121; --side-nav-active-color: #303030; --search-bar-color: #212121; - --logo-icon: url("/_icons/iconColorSmall.png"); - --logo-text: url("/_icons/textColorSmall.png"); + --logo-icon: url("~../../_icons/iconColorSmall.png"); + --logo-text: url("~../../_icons/textColorSmall.png"); } .mainRed { @@ -59,8 +59,8 @@ --primary-color-hover: #e53935; --primary-color-active: #c62828; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainPink { @@ -68,8 +68,8 @@ --primary-color-hover: #D81B60; --primary-color-active: #AD1457; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainPurple { @@ -77,8 +77,8 @@ --primary-color-hover: #8E24AA; --primary-color-active: #6A1B9A; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainDeepPurple { @@ -86,8 +86,8 @@ --primary-color-hover: #5E35B1; --primary-color-active: #4527A0; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainIndigo { @@ -95,8 +95,8 @@ --primary-color-hover: #3949AB; --primary-color-active: #283593; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainBlue { @@ -104,8 +104,8 @@ --primary-color-hover: #1E88E5; --primary-color-active: #1565C0; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainLightBlue { @@ -113,8 +113,8 @@ --primary-color-hover: #039BE5; --primary-color-active: #0277BD; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainCyan { @@ -122,8 +122,8 @@ --primary-color-hover: #00ACC1; --primary-color-active: #00838F; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainTeal { @@ -131,8 +131,8 @@ --primary-color-hover: #00897B; --primary-color-active: #00695C; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainGreen { @@ -140,8 +140,8 @@ --primary-color-hover: #43A047; --primary-color-active: #2E7D32; --text-with-main-color: #FFFFFF; - --logo-icon-bar-color: url("/_icons/iconWhite.png"); - --logo-text-bar-color: url("/_icons/textWhite.png"); + --logo-icon-bar-color: url("~../../_icons/iconWhite.png"); + --logo-text-bar-color: url("~../../_icons/textWhite.png"); } .mainLightGreen { @@ -149,8 +149,8 @@ --primary-color-hover: #7CB342; --primary-color-active: #558B2F; --text-with-main-color: #000000; - --logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); - --logo-text-bar-color: url("/_icons/textBlackSmall.png"); + --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png"); + --logo-text-bar-color: url("~../../_icons/textBlackSmall.png"); } .mainLime { @@ -158,8 +158,8 @@ --primary-color-hover: #C0CA33; --primary-color-active: #9E9D24; --text-with-main-color: #000000; - --logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); - --logo-text-bar-color: url("/_icons/textBlackSmall.png"); + --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png"); + --logo-text-bar-color: url("~../../_icons/textBlackSmall.png"); } .mainYellow { @@ -167,8 +167,8 @@ --primary-color-hover: #FDD835; --primary-color-active: #F9A825; --text-with-main-color: #000000; - --logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); - --logo-text-bar-color: url("/_icons/textBlackSmall.png"); + --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png"); + --logo-text-bar-color: url("~../../_icons/textBlackSmall.png"); } .mainAmber { @@ -176,8 +176,8 @@ --primary-color-hover: #FFB300; --primary-color-active: #FF8F00; --text-with-main-color: #000000; - --logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); - --logo-text-bar-color: url("/_icons/textBlackSmall.png"); + --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png"); + --logo-text-bar-color: url("~../../_icons/textBlackSmall.png"); } .mainOrange { @@ -185,8 +185,8 @@ --primary-color-hover: #FB8C00; --primary-color-active: #EF6C00; --text-with-main-color: #000000; - --logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); - --logo-text-bar-color: url("/_icons/textBlackSmall.png"); + --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png"); + --logo-text-bar-color: url("~../../_icons/textBlackSmall.png"); } .mainDeepOrange { @@ -194,8 +194,8 @@ --primary-color-hover: #F4511E; --primary-color-active: #D84315; --text-with-main-color: #000000; - --logo-icon-bar-color: url("/_icons/iconBlackSmall.png"); - --logo-text-bar-color: url("/_icons/textBlackSmall.png"); + --logo-icon-bar-color: url("~../../_icons/iconBlackSmall.png"); + --logo-text-bar-color: url("~../../_icons/textBlackSmall.png"); } .secRed { diff --git a/src/renderer/videoJS.css b/src/renderer/videoJS.css index 75dca2ed..580a77ec 100644 --- a/src/renderer/videoJS.css +++ b/src/renderer/videoJS.css @@ -1944,7 +1944,9 @@ video::-webkit-media-text-track-display { background: rgba(255,255,255,0.3); } -.vjs-quality-selector .vjs-menu-button { +.vjs-quality-selector .vjs-menu-button{margin:0;padding:0;height:100%;width:100%}.vjs-quality-selector .vjs-icon-placeholder{font-family:'VideoJS';font-weight:normal;font-style:normal}.vjs-quality-selector .vjs-icon-placeholder:before{content:'\f110'}.vjs-quality-changing .vjs-big-play-button{display:none}.vjs-quality-changing .vjs-control-bar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;visibility:visible;opacity:1} + +/* .vjs-quality-selector .vjs-menu-button { margin: 0; padding: 0; height: 100%; @@ -1969,7 +1971,7 @@ video::-webkit-media-text-track-display { display: flex; visibility: visible; opacity: 1; -} +} */ .video-js .vjs-vtt-thumbnails { display: block; diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue index baf93e04..4f287e7c 100644 --- a/src/renderer/views/About/About.vue +++ b/src/renderer/views/About/About.vue @@ -9,7 +9,7 @@ class="logo" >

- {{ versionNumber }} Beta + {{ versionNumber }} Alpha

History

+ +

+ This part of the app is not ready yet. Come back later when progress has been made. +

+

diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue index 89a63dcd..fbdef659 100644 --- a/src/renderer/views/Settings/Settings.vue +++ b/src/renderer/views/Settings/Settings.vue @@ -3,7 +3,6 @@ - diff --git a/src/renderer/views/Subscriptions/Subscriptions.css b/src/renderer/views/Subscriptions/Subscriptions.css index c6ad6abd..b6db9095 100644 --- a/src/renderer/views/Subscriptions/Subscriptions.css +++ b/src/renderer/views/Subscriptions/Subscriptions.css @@ -4,6 +4,10 @@ margin-bottom: 60px; } +.message { + color: var(--tertiary-text-color); +} + @media only screen and (max-width: 680px) { .card { width: 90%; diff --git a/src/renderer/views/Subscriptions/Subscriptions.js b/src/renderer/views/Subscriptions/Subscriptions.js index 0fe5f91e..a76e0a78 100644 --- a/src/renderer/views/Subscriptions/Subscriptions.js +++ b/src/renderer/views/Subscriptions/Subscriptions.js @@ -1,11 +1,13 @@ import Vue from 'vue' import FtCard from '../../components/ft-card/ft-card.vue' +import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue' import FtElementList from '../../components/ft-element-list/ft-element-list.vue' export default Vue.extend({ name: 'Subscriptions', components: { 'ft-card': FtCard, + 'ft-flex-box': FtFlexBox, 'ft-element-list': FtElementList }, mounted: function () { diff --git a/src/renderer/views/Subscriptions/Subscriptions.vue b/src/renderer/views/Subscriptions/Subscriptions.vue index 51071fee..7e267b86 100644 --- a/src/renderer/views/Subscriptions/Subscriptions.vue +++ b/src/renderer/views/Subscriptions/Subscriptions.vue @@ -2,6 +2,11 @@

Subscriptions

+ +

+ This part of the app is not ready yet. Come back later when progress has been made. +

+
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css index c6ad6abd..b6db9095 100644 --- a/src/renderer/views/UserPlaylists/UserPlaylists.css +++ b/src/renderer/views/UserPlaylists/UserPlaylists.css @@ -4,6 +4,10 @@ margin-bottom: 60px; } +.message { + color: var(--tertiary-text-color); +} + @media only screen and (max-width: 680px) { .card { width: 90%; diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js index ae661bd2..a216cfe4 100644 --- a/src/renderer/views/UserPlaylists/UserPlaylists.js +++ b/src/renderer/views/UserPlaylists/UserPlaylists.js @@ -1,11 +1,13 @@ import Vue from 'vue' import FtCard from '../../components/ft-card/ft-card.vue' +import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue' import FtElementList from '../../components/ft-element-list/ft-element-list.vue' export default Vue.extend({ name: 'UserPlaylists', components: { 'ft-card': FtCard, + 'ft-flex-box': FtFlexBox, 'ft-element-list': FtElementList }, mounted: function () { diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue index c9d89e4c..59161a2d 100644 --- a/src/renderer/views/UserPlaylists/UserPlaylists.vue +++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue @@ -2,6 +2,11 @@

Your Playlists

+ +

+ This part of the app is not ready yet. Come back later when progress has been made. +

+
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js index 271d3ea6..cd9f6b50 100644 --- a/src/renderer/views/Watch/Watch.js +++ b/src/renderer/views/Watch/Watch.js @@ -202,7 +202,7 @@ export default Vue.extend({ label: 'Dash', qualityLabel: format.qualityLabel } - }) + }).reverse() } else { this.videoSourceList = result.player_response.streamingData.formats }