TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Port more classes.

Browse source
This commit is contained in:
FireMasterK 2021-12-27 14:46:29 +00:00
parent 5b59c54904
commit 4899c9717c
No known key found for this signature in database
GPG key ID: 49451E4482CC5BCD
12 changed files with 60 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/App.vue
View file

@ -117,14 +117,28 @@ b {
} }
.btn { .btn {
@apply py-2 px-4 rounded bg-dark-400; @apply py-2 px-4 rounded;
} }
.dark { .dark {
@apply text-white bg-dark-800; @apply text-white bg-dark-800;
} }
.dark .input,
.dark .select,
.dark .btn {
@apply text-gray-400 bg-dark-400 w-auto;
}
.dark hr {
@apply border-dark-100;
}
h1 { h1 {
@apply text-2xl font-bold; @apply m-0 !text-5xl font-bold;
}
hr {
@apply !mt-2 !mb-3;
} }
</style> </style>

4
src/components/FeedPage.vue
View file

@ -9,9 +9,9 @@
<a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a> <a :href="getRssUrl"><font-awesome-icon icon="rss" style="padding-top: 0.2rem"></font-awesome-icon></a>
</span> </span>
<span class="uk-align-right@m"> <span class="md:float-right">
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label> <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
<select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()"> <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" /> <option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" /> <option v-t="'actions.least_recent'" value="ascending" />
<option v-t="'actions.channel_name_asc'" value="channel_ascending" /> <option v-t="'actions.channel_name_asc'" value="channel_ascending" />

2
src/components/HistoryPage.vue
View file

@ -7,7 +7,7 @@
<div style="text-align: right"> <div style="text-align: right">
<label for="ddlSortBy">{{ $t("actions.sort_by") }}</label> <label for="ddlSortBy">{{ $t("actions.sort_by") }}</label>
<select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()"> <select id="ddlSortBy" v-model="selectedSort" class="select w-auto" @change="onChange()">
<option v-t="'actions.most_recent'" value="descending" /> <option v-t="'actions.most_recent'" value="descending" />
<option v-t="'actions.least_recent'" value="ascending" /> <option v-t="'actions.least_recent'" value="ascending" />
<option v-t="'actions.channel_name_asc'" value="channel_ascending" /> <option v-t="'actions.channel_name_asc'" value="channel_ascending" />

2
src/components/ImportPage.vue
View file

@ -11,7 +11,7 @@
<b>Override: <input v-model="override" class="uk-checkbox" type="checkbox"/></b> <b>Override: <input v-model="override" class="uk-checkbox" type="checkbox"/></b>
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<a class="uk-width-1-1 btn uk-button-large uk-width-auto" @click="handleImport">Import</a> <a class="uk-width-1-1 btn uk-button-large w-auto" @click="handleImport">Import</a>
</div> </div>
</form> </form>
<br /> <br />

6
src/components/LoginPage.vue
View file

@ -4,7 +4,7 @@
<div class="uk-form-row"> <div class="uk-form-row">
<input <input
v-model="username" v-model="username"
class="uk-width-1-1 uk-form-large uk-input uk-width-auto" class="uk-width-1-1 uk-form-large input w-auto"
type="text" type="text"
autocomplete="username" autocomplete="username"
:placeholder="$t('login.username')" :placeholder="$t('login.username')"
@ -14,7 +14,7 @@
<div class="uk-form-row"> <div class="uk-form-row">
<input <input
v-model="password" v-model="password"
class="uk-width-1-1 uk-form-large uk-input uk-width-auto" class="uk-width-1-1 uk-form-large input w-auto"
type="password" type="password"
autocomplete="password" autocomplete="password"
:placeholder="$t('login.password')" :placeholder="$t('login.password')"
@ -22,7 +22,7 @@
/> />
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<a class="uk-width-1-1 uk-button uk-button-large uk-width-auto" @click="login"> <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="login">
{{ $t("titles.login") }} {{ $t("titles.login") }}
</a> </a>
</div> </div>

10
src/components/Navigation.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<nav class="uk-navbar w-100 relative" :style="[{ background: backgroundColor, colour: foregroundColor }]" uk-navbar> <nav
class="uk-navbar w-full relative"
:style="[{ background: backgroundColor, colour: foregroundColor }]"
uk-navbar
>
<div class="uk-navbar-left"> <div class="uk-navbar-left">
<router-link <router-link
class="uk-navbar-item uk-logo font-bold font-2xl font-sans font-bold" class="uk-navbar-item uk-logo font-bold font-2xl font-sans font-bold"
@ -17,7 +21,7 @@
<div class="uk-navbar-center uk-flex md:visible"> <div class="uk-navbar-center uk-flex md:visible">
<input <input
v-model="searchText" v-model="searchText"
class="uk-input uk-width-medium" class="input uk-width-medium"
type="text" type="text"
role="search" role="search"
:title="$t('actions.search')" :title="$t('actions.search')"
@ -51,7 +55,7 @@
<div class="w-full md:hidden"> <div class="w-full md:hidden">
<input <input
v-model="searchText" v-model="searchText"
class="uk-input" class="input"
type="text" type="text"
role="search" role="search"
:title="$t('actions.search')" :title="$t('actions.search')"

2
src/components/Player.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="w-100"> <div class="w-full">
<div <div
ref="container" ref="container"
data-shaka-player-container data-shaka-player-container

48
src/components/Preferences.vue
View file

@ -67,7 +67,7 @@
<br /> <br />
<label for="ddlTheme"><b v-t="'actions.theme'"/></label> <label for="ddlTheme"><b v-t="'actions.theme'"/></label>
<br /> <br />
<select id="ddlTheme" v-model="selectedTheme" class="uk-select uk-width-auto" @change="onChange($event)"> <select id="ddlTheme" v-model="selectedTheme" class="select w-auto" @change="onChange($event)">
<option v-t="'actions.auto'" value="auto" /> <option v-t="'actions.auto'" value="auto" />
<option v-t="'actions.dark'" value="dark" /> <option v-t="'actions.dark'" value="dark" />
<option v-t="'actions.light'" value="light" /> <option v-t="'actions.light'" value="light" />
@ -89,40 +89,24 @@
<br /> <br />
<label for="ddlDefaultQuality"><b v-t="'actions.default_quality'"/></label> <label for="ddlDefaultQuality"><b v-t="'actions.default_quality'"/></label>
<br /> <br />
<select id="ddlDefaultQuality" v-model="defaultQuality" class="uk-select uk-width-auto" @change="onChange($event)"> <select id="ddlDefaultQuality" v-model="defaultQuality" class="select w-auto" @change="onChange($event)">
<option v-t="'actions.auto'" value="0" /> <option v-t="'actions.auto'" value="0" />
<option v-for="resolution in resolutions" :key="resolution" :value="resolution">{{ resolution }}p</option> <option v-for="resolution in resolutions" :key="resolution" :value="resolution">{{ resolution }}p</option>
</select> </select>
<br /> <br />
<label for="txtBufferingGoal"><b v-t="'actions.buffering_goal'"/></label> <label for="txtBufferingGoal"><b v-t="'actions.buffering_goal'"/></label>
<br /> <br />
<input <input id="txtBufferingGoal" v-model="bufferingGoal" class="input w-auto" type="text" @change="onChange($event)" />
id="txtBufferingGoal"
v-model="bufferingGoal"
class="uk-input uk-width-auto"
type="text"
@change="onChange($event)"
/>
<br /> <br />
<label for="ddlCountrySelection"><b v-t="'actions.country_selection'"/></label> <label for="ddlCountrySelection"><b v-t="'actions.country_selection'"/></label>
<br /> <br />
<select <select id="ddlCountrySelection" v-model="countrySelected" class="select w-auto" @change="onChange($event)">
id="ddlCountrySelection"
v-model="countrySelected"
class="uk-select uk-width-auto"
@change="onChange($event)"
>
<option v-for="country in countryMap" :key="country.code" :value="country.code">{{ country.name }}</option> <option v-for="country in countryMap" :key="country.code" :value="country.code">{{ country.name }}</option>
</select> </select>
<br /> <br />
<label for="ddlDefaultHomepage"><b v-t="'actions.default_homepage'"/></label> <label for="ddlDefaultHomepage"><b v-t="'actions.default_homepage'"/></label>
<br /> <br />
<select <select id="ddlDefaultHomepage" v-model="defaultHomepage" class="select w-auto" @change="onChange($event)">
id="ddlDefaultHomepage"
v-model="defaultHomepage"
class="uk-select uk-width-auto"
@change="onChange($event)"
>
<option v-t="'titles.trending'" value="trending" /> <option v-t="'titles.trending'" value="trending" />
<option v-t="'titles.feed'" value="feed" /> <option v-t="'titles.feed'" value="feed" />
</select> </select>
@ -153,24 +137,13 @@
<br /> <br />
<label for="ddlLanguageSelection"><b v-t="'actions.language_selection'"/></label> <label for="ddlLanguageSelection"><b v-t="'actions.language_selection'"/></label>
<br /> <br />
<select <select id="ddlLanguageSelection" v-model="selectedLanguage" class="select w-auto" @change="onChange($event)">
id="ddlLanguageSelection"
v-model="selectedLanguage"
class="uk-select uk-width-auto"
@change="onChange($event)"
>
<option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option> <option v-for="language in languages" :key="language.code" :value="language.code">{{ language.name }}</option>
</select> </select>
<br /> <br />
<label for="ddlEnabledCodecs"><b v-t="'actions.enabled_codecs'"/></label> <label for="ddlEnabledCodecs"><b v-t="'actions.enabled_codecs'"/></label>
<br /> <br />
<select <select id="ddlEnabledCodecs" v-model="enabledCodecs" class="select w-auto" multiple @change="onChange($event)">
id="ddlEnabledCodecs"
v-model="enabledCodecs"
class="uk-select uk-width-auto"
multiple
@change="onChange($event)"
>
<option value="av1">AV1</option> <option value="av1">AV1</option>
<option value="vp9">VP9</option> <option value="vp9">VP9</option>
<option value="avc">AVC (h.264)</option> <option value="avc">AVC (h.264)</option>
@ -211,12 +184,7 @@
><b>{{ $t("actions.instance_selection") }}:</b></label ><b>{{ $t("actions.instance_selection") }}:</b></label
> >
<br /> <br />
<select <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
id="ddlInstanceSelection"
v-model="selectedInstance"
class="uk-select uk-width-auto"
@change="onChange($event)"
>
<option v-for="instance in instances" :key="instance.name" :value="instance.apiurl"> <option v-for="instance in instances" :key="instance.name" :value="instance.apiurl">
{{ instance.name }} {{ instance.name }}
</option> </option>

6
src/components/RegisterPage.vue
View file

@ -4,7 +4,7 @@
<div class="uk-form-row"> <div class="uk-form-row">
<input <input
v-model="username" v-model="username"
class="uk-width-1-1 uk-form-large uk-input uk-width-auto" class="uk-width-1-1 uk-form-large input w-auto"
type="text" type="text"
autocomplete="username" autocomplete="username"
:placeholder="$t('login.username')" :placeholder="$t('login.username')"
@ -14,7 +14,7 @@
<div class="uk-form-row"> <div class="uk-form-row">
<input <input
v-model="password" v-model="password"
class="uk-width-1-1 uk-form-large uk-input uk-width-auto" class="uk-width-1-1 uk-form-large input w-auto"
type="password" type="password"
autocomplete="password" autocomplete="password"
:placeholder="$t('login.password')" :placeholder="$t('login.password')"
@ -22,7 +22,7 @@
/> />
</div> </div>
<div class="uk-form-row"> <div class="uk-form-row">
<a class="uk-width-1-1 uk-button uk-button-large uk-width-auto" @click="register"> <a class="uk-width-1-1 uk-button uk-button-large w-auto" @click="register">
{{ $t("titles.register") }}</a {{ $t("titles.register") }}</a
> >
</div> </div>

2
src/components/SearchResults.vue
View file

@ -10,7 +10,7 @@
id="ddlSearchFilters" id="ddlSearchFilters"
v-model="selectedFilter" v-model="selectedFilter"
default="all" default="all"
class="uk-select uk-width-auto" class="select w-auto"
style="height: 100%" style="height: 100%"
@change="updateResults()" @change="updateResults()"
> >

33
src/components/VideoItem.vue
View file

@ -3,18 +3,12 @@
<router-link class="uk-text-emphasis" :to="video.url"> <router-link class="uk-text-emphasis" :to="video.url">
<img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" /> <img :height="height" :width="width" style="width: 100%" :src="video.thumbnail" alt="" loading="lazy" />
<div class="relative"> <div class="relative">
<span <span v-if="video.duration" class="thumbnail-overlay bottom-5px right-5px" style="padding: 0 5px">{{
v-if="video.duration" timeFormat(video.duration)
class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px right-5px" }}</span>
style="padding: 0 5px" <span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" style="padding: 0 5px">{{
>{{ timeFormat(video.duration) }}</span $t("video.watched")
> }}</span>
<span
v-if="video.watched"
class="rounded-md absolute video-duration bg-black bg-opacity-75 bottom-5px left-5px"
style="padding: 0 5px"
>{{ $t("video.watched") }}</span
>
</div> </div>
<div> <div>
@ -34,7 +28,7 @@
</div> </div>
</router-link> </router-link>
<div class="uk-align-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%"> <div class="float-right" style="margin-left: 0; margin-bottom: 0; display: inline-block; width: 10%">
<router-link <router-link
:to="video.url + '&listen=1'" :to="video.url + '&listen=1'"
:aria-label="'Listen to ' + video.title" :aria-label="'Listen to ' + video.title"
@ -51,15 +45,14 @@
:src="video.uploaderAvatar" :src="video.uploaderAvatar"
loading="lazy" loading="lazy"
:alt="video.uploaderName" :alt="video.uploaderName"
class="rounded-full" class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
style="margin-right: 0.5rem; margin-top: 0.5rem; width: 32px; height: 32px"
/> />
</router-link> </router-link>
<div style="width: calc(100% - 32px - 8px)"> <div class="w-[calc(100%-32px-1rem)]">
<router-link <router-link
v-if="video.uploaderUrl && video.uploaderName && !hideChannel" v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
class="uk-link-muted uk-overflow-hidden" class="uk-link-muted overflow-hidden block"
:to="video.uploaderUrl" :to="video.uploaderUrl"
:title="video.uploaderName" :title="video.uploaderName"
style="display: block; width: 90%" style="display: block; width: 90%"
@ -87,6 +80,12 @@
</div> </div>
</template> </template>
<style>
.thumbnail-overlay {
@apply rounded-md absolute bg-black bg-opacity-75;
}
</style>
<script> <script>
export default { export default {
props: { props: {

2
src/components/WatchVideo.vue
View file

@ -134,7 +134,7 @@
v-for="related in video.relatedStreams" v-for="related in video.relatedStreams"
v-show="showRecs || !smallView" v-show="showRecs || !smallView"
:key="related.url" :key="related.url"
class="uk-tile-default uk-width-auto" class="uk-tile-default w-auto"
:style="[{ background: backgroundColor }]" :style="[{ background: backgroundColor }]"
> >
<VideoItem :video="related" height="94" width="168" /> <VideoItem :video="related" height="94" width="168" />