tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add tooltips and context to the settings page

This commit is contained in:
Preston 2020-10-19 11:32:53 -04:00
parent 43e3aa9f5b
commit f12b85e4f4
14 changed files with 88 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/components/ft-input/ft-input.js
View File

@ -1,7 +1,11 @@
import Vue from 'vue'
import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
export default Vue.extend({
name: 'FtInput',
components: {
'ft-tooltip': FtTooltip
},
props: {
placeholder: {
type: String,
@ -30,6 +34,10 @@ export default Vue.extend({
dataList: {
type: Array,
default: () => { return [] }
},
tooltip: {
type: String,
default: ''
}
},
data: function () {

6
src/renderer/components/ft-input/ft-input.vue
View File

@ -11,6 +11,12 @@
:for="id"
>
{{ placeholder }}
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"
position="right"
:tooltip="tooltip"
/>
</label>
<input
:id="id"

6
src/renderer/components/ft-select/ft-select.css
View File

@ -68,6 +68,12 @@
color: var(--tertiary-text-color);
}
.selectTooltip {
position: absolute;
top: -20px;
right: 17px;
}
/* LABEL ======================================= */
.select-label {

8
src/renderer/components/ft-select/ft-select.js
View File

@ -1,7 +1,11 @@
import Vue from 'vue'
import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
export default Vue.extend({
name: 'FtSelect',
components: {
'ft-tooltip': FtTooltip
},
props: {
placeholder: {
type: String,
@ -18,6 +22,10 @@ export default Vue.extend({
selectValues: {
type: Array,
required: true
},
tooltip: {
type: String,
default: ''
}
}
})

5
src/renderer/components/ft-select/ft-select.vue
View File

@ -22,6 +22,11 @@
<label class="select-label">
{{ placeholder }}
</label>
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"
:tooltip="tooltip"
/>
</div>
</template>

8
src/renderer/components/ft-toggle-switch/ft-toggle-switch.js
View File

@ -1,7 +1,11 @@
import Vue from 'vue'
import FtTooltip from '../ft-tooltip/ft-tooltip.vue'
export default Vue.extend({
name: 'FtToggleSwitch',
components: {
'ft-tooltip': FtTooltip
},
props: {
label: {
type: String,
@ -18,6 +22,10 @@ export default Vue.extend({
disabled: {
type: Boolean,
default: false
},
tooltip: {
type: String,
default: ''
}
},
data: function () {

5
src/renderer/components/ft-toggle-switch/ft-toggle-switch.vue
View File

@ -18,6 +18,11 @@
class="switch-label"
>
{{ label }}
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"
:tooltip="tooltip"
/>
</label>
</div>
</template>

6
src/renderer/components/ft-tooltip/ft-tooltip.css
View File

@ -36,8 +36,8 @@
font-size: 1rem;
line-height: 120%;
margin: 0;
max-width: 10em;
min-width: max-content;
max-width: max-content;
min-width: 15em;
opacity: 0;
padding: 10px 8px;
pointer-events: none;
@ -84,4 +84,4 @@
.tooltip {
display: inline-block;
position: relative;
}
}

12
src/renderer/components/general-settings/general-settings.js
View File

@ -651,6 +651,15 @@ export default Vue.extend({
this.updateInvidiousInstanceBounce(invidiousInstance)
},
handlePreferredApiBackend: function (backend) {
this.updateBackendPreference(backend)
console.log(backend)
if (backend === 'local') {
this.updateForceLocalBackendForLegacy(false)
}
},
updateLocale: function (locale) {
this.$i18n.locale = locale
this.currentLocale = locale
@ -668,7 +677,8 @@ export default Vue.extend({
'updateRegion',
'updateListType',
'updateThumbnailPreference',
'updateInvidiousInstance'
'updateInvidiousInstance',
'updateForceLocalBackendForLegacy'
])
}
})

6
src/renderer/components/general-settings/general-settings.vue
View File

@ -19,6 +19,7 @@
:label="$t('Settings.General Settings.Fallback to Non-Preferred Backend on Failure')"
:default-value="backendFallback"
:compact="true"
:tooltip="$t('Tooltips.General Settings.Fallback to Non-Preferred Backend on Failure')"
@change="updateBackendFallback"
/>
</div>
@ -43,7 +44,8 @@
:value="backendPreference"
:select-names="backendNames"
:select-values="backendValues"
@change="updateBackendPreference"
:tooltip="$t('Tooltips.General Settings.Preferred API Backend')"
@change="handlePreferredApiBackend"
/>
<ft-select
v-if="false"
@ -73,6 +75,7 @@
:value="thumbnailPreference"
:select-names="thumbnailTypeNames"
:select-values="thumbnailTypeValues"
:tooltip="$t('Tooltips.General Settings.Thumbnail Preference')"
@change="updateThumbnailPreference"
/>
<ft-select
@ -90,6 +93,7 @@
:show-label="true"
:value="invidiousInstance"
:data-list="instanceValues"
:tooltip="$t('Tooltips.General Settings.Invidious Instance')"
@input="handleInvidiousInstanceInput"
/>
</ft-flex-box>

4
src/renderer/components/player-settings/player-settings.js
View File

@ -34,6 +34,10 @@ export default Vue.extend({
}
},
computed: {
backendPreference: function () {
return this.$store.getters.getBackendPreference
},
autoplayVideos: function () {
return this.$store.getters.getAutoplayVideos
},

4
src/renderer/components/player-settings/player-settings.vue
View File

@ -19,13 +19,16 @@
<ft-toggle-switch
:label="$t('Settings.Player Settings.Force Local Backend for Legacy Formats')"
:compact="true"
:disabled="backendPreference === 'local'"
:default-value="forceLocalBackendForLegacy"
:tooltip="$t('Tooltips.Player Settings.Force Local Backend for Legacy Formats')"
@change="updateForceLocalBackendForLegacy"
/>
<ft-toggle-switch
:label="$t('Settings.Player Settings.Proxy Videos Through Invidious')"
:compact="true"
:default-value="proxyVideos"
:tooltip="$t('Tooltips.Player Settings.Proxy Videos Through Invidious')"
@change="updateProxyVideos"
/>
<ft-toggle-switch
@ -84,6 +87,7 @@
:value="defaultVideoFormat"
:select-names="formatNames"
:select-values="formatValues"
:tooltip="$t('Tooltips.Player Settings.Default Video Format')"
@change="updateDefaultVideoFormat"
/>
<ft-select

1
src/renderer/components/subscription-settings/subscription-settings.vue
View File

@ -16,6 +16,7 @@
<ft-toggle-switch
:label="$t('Settings.Subscription Settings.Fetch Feeds from RSS')"
:default-value="useRssFeeds"
:tooltip="$t('Tooltips.Subscription Settings.Fetch Feeds from RSS')"
@change="updateUseRssFeeds"
/>
</ft-flex-box>

14
static/locales/en-US.yaml
View File

@ -530,6 +530,20 @@ Comments:
No more comments available: No more comments available
Up Next: Up Next
#Tooltips
Tooltips:
General Settings:
Preferred API Backend: Choose the backend that FreeTube uses to obtain data. The local API is a built in extractor. The Invidious API requires an Invidious server to connect to
Fallback to Non-Preferred Backend on Failure: When your preferred API has a problem, FreeTube will automatically attempt to use your non-preferred API as a fallback method when enabled
Thumbnail Preference: All thumbnails throughout FreeTube will be replaced with a frame of the video instead of the default thumbnail
Invidious Instance: The Invidious instance that FreeTube will connect to for API calls. Clear the current instance to see a list of public instances to choose from
Player Settings:
Force Local Backend for Legacy Formats: Only works when the Invidious API is your default. When enabled, the local API will run and use the legacy formats returned by that instead of the ones returned by Invidious. Helps when the videos returned by Invidious don't play due to country restrictions
Proxy Videos Through Invidious: Will connect to Invidious to serve videos instead of making a direct connection to YouTube. Overrides API preference
Default Video Format: Set the formats used when a video plays. Dash formats can play higher qualities. Legacy formats are limited to a max of 720p but use less bandwidth. Audio formats are audio only streams
Subscription Settings:
Fetch Feeds from RSS: When enabled, FreeTube will use RSS instead of it's default method for grabbing your subscription feed. RSS is faster and prevents IP blocking, but doesn't provide certain information like video duration or live status
# Toast Messages
Local API Error (Click to copy): Local API Error (Click to copy)
Invidious API Error (Click to copy): Invidious API Error (Click to copy)