mirror of
https://github.com/FreeTubeApp/FreeTube.git
synced 2025-12-05 01:10:31 +00:00
d829cc2b16
* Update to Vue 3 * Fix toasts and removing videos from playlists * Fix duplicate app ID * Simplify aria-selected handling now that false doesn't remove attributes * Fix various errors * Fix toasts and hiding watched videos * Update vue-router to 4.6.3 --------- Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>
123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
v-if="dataReady"
|
|
class="app"
|
|
:class="{
|
|
hideOutlines: outlinesHidden,
|
|
isLocaleRightToLeft: isLocaleRightToLeft,
|
|
isSideNavOpen: isSideNavOpen,
|
|
hideLabelsSideBar: hideLabelsSideBar && !isSideNavOpen
|
|
}"
|
|
>
|
|
<portal-target
|
|
name="promptPortal"
|
|
multiple
|
|
@change="handlePromptPortalUpdate"
|
|
/>
|
|
<ft-prompt
|
|
v-if="showReleaseNotes"
|
|
theme="readable-width"
|
|
@click="showReleaseNotes = !showReleaseNotes"
|
|
>
|
|
<template #label="{ labelId }">
|
|
<h1
|
|
:id="labelId"
|
|
class="changeLogTitle"
|
|
>
|
|
{{ changeLogTitle }}
|
|
</h1>
|
|
</template>
|
|
<span
|
|
class="changeLogText"
|
|
lang="en"
|
|
v-html="updateChangelog"
|
|
/>
|
|
<ft-flex-box>
|
|
<ft-button
|
|
:label="$t('Download From Site')"
|
|
@click="openDownloadsPage"
|
|
/>
|
|
<ft-button
|
|
:label="$t('Close')"
|
|
:text-color="null"
|
|
:background-color="null"
|
|
@click="showReleaseNotes = !showReleaseNotes"
|
|
/>
|
|
</ft-flex-box>
|
|
</ft-prompt>
|
|
<ft-prompt
|
|
v-if="showExternalLinkOpeningPrompt"
|
|
:label="$t('Are you sure you want to open this link?')"
|
|
:extra-labels="[lastExternalLinkToBeOpened]"
|
|
:option-names="externalLinkOpeningPromptNames"
|
|
:option-values="externalLinkOpeningPromptValues"
|
|
@click="handleExternalLinkOpeningPromptAnswer"
|
|
/>
|
|
<ft-search-filters
|
|
v-if="showSearchFilters"
|
|
/>
|
|
<ft-keyboard-shortcut-prompt
|
|
v-if="isKeyboardShortcutPromptShown"
|
|
/>
|
|
<ft-playlist-add-video-prompt
|
|
v-if="showAddToPlaylistPrompt"
|
|
/>
|
|
<ft-create-playlist-prompt
|
|
v-if="showCreatePlaylistPrompt"
|
|
/>
|
|
<ft-toast />
|
|
<ft-progress-bar
|
|
v-if="showProgressBar"
|
|
/>
|
|
<top-nav
|
|
:inert="isPromptOpen"
|
|
/>
|
|
<side-nav
|
|
ref="sideNav"
|
|
:inert="isPromptOpen"
|
|
/>
|
|
<ft-flex-box
|
|
class="flexBox routerView"
|
|
role="main"
|
|
:inert="isPromptOpen"
|
|
>
|
|
<div
|
|
v-if="showUpdatesBanner || showBlogBanner"
|
|
class="banner-wrapper"
|
|
>
|
|
<ft-notification-banner
|
|
v-if="showUpdatesBanner"
|
|
class="banner"
|
|
:message="updateBannerMessage"
|
|
role="link"
|
|
@click="handleUpdateBannerClick"
|
|
/>
|
|
<ft-notification-banner
|
|
v-if="showBlogBanner"
|
|
class="banner"
|
|
:message="blogBannerMessage"
|
|
role="link"
|
|
@click="handleNewBlogBannerClick"
|
|
/>
|
|
</div>
|
|
<RouterView
|
|
v-if="dataReady"
|
|
v-slot="{ Component }"
|
|
class="routerView"
|
|
>
|
|
<Transition
|
|
mode="out-in"
|
|
name="fade"
|
|
>
|
|
<component :is="Component" />
|
|
</Transition>
|
|
</RouterView>
|
|
</ft-flex-box>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./App.js" />
|
|
|
|
<style src="./themes.css" />
|
|
<style scoped src="./App.css" />
|