diff --git a/src/renderer/views/Player/MediaHandler.svelte b/src/renderer/views/Player/MediaHandler.svelte
index 654c042..473c8d2 100644
--- a/src/renderer/views/Player/MediaHandler.svelte
+++ b/src/renderer/views/Player/MediaHandler.svelte
@@ -68,6 +68,8 @@
     }
   }
 
+  const TYPE_EXCLUSIONS = ['ED', 'ENDING', 'NCED', 'NCOP', 'OP', 'OPENING', 'PREVIEW', 'PV']
+
   async function handleFiles (files) {
     console.info('MediaHandler: got files', files)
     if (!files?.length) return processed.set(files)
@@ -87,11 +89,7 @@
       return file
     })
 
-    videoFiles = videoFiles.filter(file => {
-      if (file.media.parseObject.anime_type?.toLowerCase() === 'nced') return false
-      if (file.media.parseObject.anime_type?.toLowerCase() === 'ncop') return false
-      return true
-    })
+    videoFiles = videoFiles.filter(file => !TYPE_EXCLUSIONS.includes(file.media.parseObject.anime_type))
 
     console.info('MediaHandler: resolved video files', { videoFiles })
 
diff --git a/src/renderer/views/ViewAnime/ViewAnime copy.svelte b/src/renderer/views/ViewAnime/ViewAnime copy.svelte
new file mode 100644
index 0000000..3068893
--- /dev/null
+++ b/src/renderer/views/ViewAnime/ViewAnime copy.svelte	
@@ -0,0 +1,199 @@
+<script>
+  import { playAnime } from '../RSSView.svelte'
+  import { alRequest } from '@/modules/anilist.js'
+  import { getMediaMaxEp } from '@/modules/anime.js'
+  import { getContext } from 'svelte'
+  import Details from './Details.svelte'
+  import Following from './Following.svelte'
+  import Controls from './Controls.svelte'
+  import ToggleList from './ToggleList.svelte'
+  import { click } from '@/modules/click.js'
+
+  const view = getContext('view')
+  const trailer = getContext('trailer')
+  function close () {
+    $view = null
+  }
+  $: media = $view
+  let modal
+  $: media && modal?.focus()
+  $: !$trailer && modal?.focus()
+  $: maxPlayEp = getMediaMaxEp($view || {}, true)
+  function checkClose ({ keyCode }) {
+    if (keyCode === 27) close()
+  }
+</script>
+
+<div class='modal modal-full z-40' class:show={media} on:keydown={checkClose} tabindex='-1' role='button' bind:this={modal}>
+  {#if media}
+    <div class='h-full modal-content bg-very-dark p-0 overflow-y-auto'>
+      <button class='close pointer z-30 bg-dark top-20 right-0 position-absolute' type='button' use:click={close}> &times; </button>
+      <div class='h-md-half w-full position-relative z-20'>
+        <div class='h-full w-full position-absolute bg-dark-light banner' style:--bannerurl={`url('${media.bannerImage || ''}')`} />
+        <div class='d-flex h-full top w-full'>
+          <div class='container-xl w-full'>
+            <div class='row d-flex justify-content-end flex-row h-full px-20 pt-20 px-xl-0'>
+              <div class='col-md-3 col-4 d-flex h-full justify-content-end flex-column pb-15 align-items-center'>
+                <img class='contain-img rounded mw-full mh-full shadow' alt='cover' src={media.coverImage?.extraLarge || media.coverImage?.medium} />
+              </div>
+              <div class='col-md-9 col-8 row align-content-end'>
+                <div class='col-md-8 col-12 d-flex justify-content-end flex-column pl-20'>
+                  <div class='px-md-20 d-flex flex-column font-size-12'>
+                    <span class='title font-weight-bold pb-sm-15 text-white select-all'>
+                      {media.title.userPreferred}
+                    </span>
+                    <div class='d-flex flex-row font-size-18 pb-sm-15'>
+                      {#if media.averageScore}
+                        <span class='material-symbols-outlined mr-10 font-size-24'> trending_up </span>
+                        <span class='mr-20'>
+                          Rating: {media.averageScore + '%'}
+                        </span>
+                      {/if}
+                      {#if media.format}
+                        <span class='material-symbols-outlined mx-10 font-size-24'> monitor </span>
+                        <span class='mr-20 text-capitalize'>
+                          Format: {media.format === 'TV' ? media.format : media.format?.replace(/_/g, ' ').toLowerCase()}
+                        </span>
+                      {/if}
+                      {#if media.episodes !== 1 && getMediaMaxEp(media)}
+                        <span class='material-symbols-outlined mx-10 font-size-24'> theaters </span>
+                        <span class='mr-20'>
+                          Episodes: {getMediaMaxEp(media)}
+                        </span>
+                      {:else if media.duration}
+                        <span class='material-symbols-outlined mx-10 font-size-24'> timer </span>
+                        <span class='mr-20'>
+                          Length: {media.duration + ' min'}
+                        </span>
+                      {/if}
+                    </div>
+                    <div class='pb-15 pt-5 px-5 overflow-x-auto text-nowrap font-weight-bold'>
+                      {#each media.genres as genre}
+                        <div class='badge badge-pill shadow'>
+                          {genre}
+                        </div>
+                      {/each}
+                    </div>
+                  </div>
+                </div>
+                <Controls bind:media={$view} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class='container-xl bg-very-dark z-10'>
+        <div class='row p-20 px-xl-0 flex-column-reverse flex-md-row'>
+          <div class='col-md-9 pr-50'>
+            <h1 class='title font-weight-bold text-white'>Synopsis</h1>
+            <div class='font-size-16 pre-wrap select-all card m-0'>
+              {media.description?.replace(/<[^>]*>/g, '') || ''}
+            </div>
+            <ToggleList list={media.relations?.edges?.filter(({ node }) => node.type === 'ANIME')} let:item title='Relations'>
+              <div class='w-150 mx-15 my-10 rel pointer'
+                use:click={async () => { $view = null; $view = (await alRequest({ method: 'SearchIDSingle', id: item.node.id })).data.Media }}>
+                <img loading='lazy' src={item.node.coverImage.medium || ''} alt='cover' class='cover-img w-full h-200 rel-img rounded' />
+                <div class='pt-5'>{item.relationType.replace(/_/g, ' ').toLowerCase()}</div>
+                <h5 class='font-weight-bold text-white mb-5'>{item.node.title.userPreferred}</h5>
+              </div>
+            </ToggleList>
+            {#if maxPlayEp}
+              <h1 class='title font-weight-bold text-white pt-20'>Episodes</h1>
+              <div class='card m-0 d-inline-block'>
+                <table class='table table-hover w-500 table-auto '>
+                  <tbody>
+                    {#each Array(maxPlayEp) as _, i}
+                      {@const ep = maxPlayEp - i}
+                      <tr class="font-size-20 py-10 pointer {ep <= media.mediaListEntry?.progress ? 'text-muted' : 'text-white'}"
+                        use:click={() => {
+                          playAnime(media, ep)
+                          close()
+                        }}>
+                        <td class='w-full font-weight-semi-bold'>Episode {ep}</td>
+                        <td class='material-symbols-outlined text-right h-full d-table-cell'>play_arrow</td>
+                      </tr>
+                    {/each}
+                  </tbody>
+                </table>
+              </div>
+            {/if}
+            <ToggleList list={media.recommendations.edges.filter(edge => edge.node.mediaRecommendation)} let:item title='Recommendations'>
+              <div class='w-150 mx-15 my-10 rel pointer'
+                use:click={async () => { $view = null; $view = (await alRequest({ method: 'SearchIDSingle', id: item.node.mediaRecommendation.id })).data.Media }}>
+                <img loading='lazy' src={item.node.mediaRecommendation.coverImage.medium || ''} alt='cover' class='cover-img w-full h-200 rel-img rounded' />
+                <h5 class='font-weight-bold text-white mb-5'>{item.node.mediaRecommendation.title.userPreferred}</h5>
+              </div>
+            </ToggleList>
+          </div>
+          <div class='col-md-3 px-sm-0 px-20'>
+            {#if media.mediaListEntry?.progress}
+              <h1 class='title font-weight-bold text-white'>Progress</h1>
+              <div class='card m-0 pt-20 pb-15 d-flex flex-md-column flex-row text-capitalize align-items-start'>
+                <div class='progress w-full'>
+                  <div class='progress-bar' role='progressbar' style='width: {media.mediaListEntry?.progress / getMediaMaxEp(media) * 100}%;' />
+                </div>
+                <div class='font-weight-bold pt-10'>
+                  {media.mediaListEntry?.progress} / {getMediaMaxEp(media)} Available Episodes
+                </div>
+              </div>
+            {/if}
+            <Details {media} />
+            <Following {media} />
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .pre-wrap {
+    white-space: pre-wrap
+  }
+  .banner {
+    background: no-repeat center center;
+    background-size: cover;
+    background-image: linear-gradient(0deg, rgba(17, 20, 23, 1) 0%, rgba(17, 20, 23, 0.8) 25%, rgba(17, 20, 23, 0.4) 50%, rgba(37, 40, 44, 0) 100%), var(--bannerurl) !important;
+  }
+
+  .d-table-cell {
+    display: table-cell !important;
+  }
+
+  .top {
+    backdrop-filter: blur(10px);
+  }
+  .title {
+    font-size: 4rem;
+  }
+  .pr-50 {
+    padding-right: 5rem;
+  }
+  .close {
+    top: 4rem !important;
+    left: unset !important;
+    right: 2.5rem !important;
+  }
+  .badge {
+    background-color: var(--dm-button-bg-color) !important;
+    padding: 0.6rem 2rem;
+    font-size: 1.4rem;
+    border: none;
+    margin-right: 0.6rem;
+  }
+  .rel-img{
+    height: 27rem;
+    width: 17rem
+  }
+
+  .cover-img {
+    object-fit: cover;
+  }
+
+  .rel {
+    transition: transform 0.2s ease;
+  }
+  .rel:hover {
+    transform: scale(1.05);
+  }
+</style>