fix: clamp video player size

This commit is contained in:
ThaUnknown 2022-03-17 21:01:05 +01:00
parent 2af621ea99
commit dce49feee5
4 changed files with 51 additions and 79 deletions

View file

@ -877,7 +877,7 @@
}
.miniplayer {
transition: width 0.2s ease;
width: 25vw !important;
width: min(40rem, 25vw) !important;
height: auto !important;
bottom: 2rem;
right: 2rem;

View file

@ -2,7 +2,6 @@
import { countdown } from '@/modules/util.js'
import { getContext } from 'svelte'
export let cards = new Promise(() => {})
const view = getContext('view')
function viewMedia(media) {
$view = media
@ -24,64 +23,62 @@
{/each}
{:then cards}
{#each cards as card}
{#key card}
{#if !card.media}
<div class="card m-0 p-0" on:click={card.onclick}>
<div class="row h-full">
<div class="col-4 skeloader" />
<div class="col-8 bg-very-dark px-15 py-10">
<h5 class="m-0 text-capitalize font-weight-bold pb-10">{[card.parseObject.anime_title, card.parseObject.episode_number].filter(s => s).join(' - ')}</h5>
<p class="skeloader w-150 h-10 rounded bg-dark" />
<p class="skeloader w-150 h-10 rounded bg-dark" />
</div>
{#if !card.media}
<div class="card m-0 p-0" on:click={card.onclick}>
<div class="row h-full">
<div class="col-4 skeloader" />
<div class="col-8 bg-very-dark px-15 py-10">
<h5 class="m-0 text-capitalize font-weight-bold pb-10">{[card.parseObject.anime_title, card.parseObject.episode_number].filter(s => s).join(' - ')}</h5>
<p class="skeloader w-150 h-10 rounded bg-dark" />
<p class="skeloader w-150 h-10 rounded bg-dark" />
</div>
</div>
{:else}
<div class="card m-0 p-0" on:click={card.onclick || (() => viewMedia(card.media))} style:--color={card.media.coverImage.color || '#1890ff'}>
<div class="row h-full">
<div class="col-4">
<img loading="lazy" src={card.media.coverImage.extraLarge || ''} alt="cover" class="cover-img w-full h-full" />
</div>
<div class="col-8 h-full card-grid">
<div class="px-15 py-10 bg-very-dark">
<h5 class="m-0 text-capitalize font-weight-bold">{[card.media.title.userPreferred, card.episodeNumber].filter(s => s).join(' - ')}</h5>
{#if card.schedule && card.media.nextAiringEpisode}
<span class="text-muted font-weight-bold">
{'EP ' + card.media.nextAiringEpisode.episode + ' in ' + countdown(card.media.nextAiringEpisode.timeUntilAiring)}
</span>
</div>
{:else}
<div class="card m-0 p-0" on:click={card.onclick || (() => viewMedia(card.media))} style:--color={card.media.coverImage.color || '#1890ff'}>
<div class="row h-full">
<div class="col-4">
<img loading="lazy" src={card.media.coverImage.extraLarge || ''} alt="cover" class="cover-img w-full h-full" />
</div>
<div class="col-8 h-full card-grid">
<div class="px-15 py-10 bg-very-dark">
<h5 class="m-0 text-capitalize font-weight-bold">{[card.media.title.userPreferred, card.episodeNumber].filter(s => s).join(' - ')}</h5>
{#if card.schedule && card.media.nextAiringEpisode}
<span class="text-muted font-weight-bold">
{'EP ' + card.media.nextAiringEpisode.episode + ' in ' + countdown(card.media.nextAiringEpisode.timeUntilAiring)}
</span>
{/if}
<p class="text-muted m-0 text-capitalize details">
{#if card.media.format === 'TV'}
<span>TV Show</span>
{:else if card.media.format}
<span>{card.media.format?.toLowerCase().replace(/_/g, ' ')}</span>
{/if}
<p class="text-muted m-0 text-capitalize details">
{#if card.media.format === 'TV'}
<span>TV Show</span>
{:else if card.media.format}
<span>{card.media.format?.toLowerCase().replace(/_/g, ' ')}</span>
{/if}
{#if card.media.episodes}
<span>{card.media.episodes + ' Episodes'}</span>
{:else if card.media.duration}
<span>{card.media.duration + ' Minutes'}</span>
{/if}
{#if card.media.status}
<span>{card.media.status?.toLowerCase().replace(/_/g, ' ')}</span>
{/if}
<span>
{[card.media.season?.toLowerCase(), card.media.seasonYear].filter(s => s).join(' ')}
</span>
</p>
</div>
<div class="overflow-y-auto px-15 pb-5 bg-very-dark card-desc">
{@html card.media.description}
</div>
<div class="px-15 pb-10 pt-5 genres">
{#each card.media.genres as genre}
<span class="badge badge-pill badge-color text-dark mt-5 mr-5 font-weight-bold">{genre}</span>
{/each}
</div>
{#if card.media.episodes}
<span>{card.media.episodes + ' Episodes'}</span>
{:else if card.media.duration}
<span>{card.media.duration + ' Minutes'}</span>
{/if}
{#if card.media.status}
<span>{card.media.status?.toLowerCase().replace(/_/g, ' ')}</span>
{/if}
<span>
{[card.media.season?.toLowerCase(), card.media.seasonYear].filter(s => s).join(' ')}
</span>
</p>
</div>
<div class="overflow-y-auto px-15 pb-5 bg-very-dark card-desc">
{@html card.media.description}
</div>
<div class="px-15 pb-10 pt-5 genres">
{#each card.media.genres as genre}
<span class="badge badge-pill badge-color text-dark mt-5 mr-5 font-weight-bold">{genre}</span>
{/each}
</div>
</div>
</div>
{/if}
{/key}
</div>
{/if}
{/each}
{/await}

View file

@ -1,8 +1,6 @@
<script>
import Cards from './Cards.svelte'
// TODO: infinite scrolling
export let media
$: update(media)
let loading = true

View file

@ -1,4 +1,3 @@
/* global halfmoon */
import { add } from './torrent.js'
import { DOMPARSER } from './util.js'
import { alRequest } from './anilist.js'
@ -73,28 +72,6 @@ function traceAnime (image, type) { // WAIT lookup logic
}
export const episodeRx = /Episode (\d+) - (.*)/
// export async function nyaaSearch (media, episode, isOffline) {
// if (parseInt(episode) < 10) {
// episode = `0${episode}`
// }
// const table = document.querySelector('tbody.results')
// const results = await nyaaRss(media, episode, isOffline)
// if (results.children.length === 0) {
// halfmoon.initStickyAlert({
// content: `Couldn't find torrent for ${media.title.userPreferred} Episode ${parseInt(episode)}! Try specifying a torrent manually.`,
// title: 'Search Failed',
// alertType: 'alert-danger',
// fillType: ''
// })
// } else {
// table.innerHTML = ''
// table.appendChild(results)
// halfmoon.toggleModal('tsearch')
// }
// }
// resolve anime name based on file name and store it
export async function resolveFileMedia (opts) {