start implementing download

api/endpoints/views.py

@@ -179,7 +179,7 @@ class DownloadView(viewsets.ViewSet):
                         self.media_id, self.media_slug
                     )
                     episodes_downloader.download_episode(self.download_id)
-                case "OVA":
+                case "OVA" | "SPECIAL":
                     anime_download_film(
                         id_film=self.media_id, title_name=self.media_slug
                     )
@@ -191,7 +191,7 @@ class DownloadView(viewsets.ViewSet):
             }
         except Exception as e:
             response_dict = {
-                "error": "Error while downloading the media, please try again later",
+                "error": "Error while downloading the media",
                 "message": str(e),
             }
 

frontend/src/App.vue

@@ -13,4 +13,24 @@ import { RouterLink, RouterView } from 'vue-router'
   -moz-osx-font-smoothing: grayscale;
   margin-top: 60px;
 }
+
+button {
+  background-color: #42b883;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 8px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+button:hover {
+  background-color: #3a9f74;
+}
+
+button:disabled {
+  background-color: #d3d3d3;
+  cursor: not-allowed;
+}
 </style>

frontend/src/api/api.ts

@@ -11,6 +11,14 @@ function get(url: string): Promise<any> {
     });
 }
 
+function post(url: string, data: any): Promise<any> {
+  return axios.post(`${BASE_URL}${url}`, data)
+    .then(response => response.data)
+    .catch(error => {
+      throw error;
+    });
+}
+
 export default function search(query: string, type: string) : Promise<MediaItemResponse> {
     return get(`/search?search_terms=${query}&type=${type}`)
 }
@@ -23,6 +31,14 @@ export async function getEpisodesInfo(mediaId: number, mediaSlug: string, mediaT
             'Content-Type': 'text/event-stream'
         }
     });
+}
 
-
+export async function downloadFilm(mediaId: number, mediaSlug: string, mediaType: string): Promise<Response> {
+    const url = `/download/`;
+    const data = {
+        media_id: mediaId,
+        media_slug: mediaSlug,
+        type_media: mediaType
+    };
+    return post(url, data);
 }

frontend/src/views/Details.vue

@@ -2,7 +2,7 @@
 import { useRoute } from 'vue-router'
 import type {Episode, MediaItem, Season, SeasonResponse} from "@/api/interfaces";
 import { onMounted, ref } from "vue";
-import { getEpisodesInfo } from "@/api/api";
+import {downloadFilm, getEpisodesInfo} from "@/api/api";
 
 const route = useRoute()
 
@@ -11,9 +11,10 @@ const imageUrl: string = <string>route.params.imageUrl
 const animeEpisodes = ref<Episode[]>([])
 const tvShowEpisodes = ref<any[]>([])
 const loading = ref(false)
+const selectingEpisodes = ref(false)
 
 onMounted(async () => {
-  if (['MOVIE', 'OVA'].includes(item.type)) {
+  if (['MOVIE', 'OVA', 'SPECIAL'].includes(item.type)) {
     return
   } else {
     loading.value = true;
@@ -46,6 +47,33 @@ onMounted(async () => {
     }
   }
 })
+
+const toggleEpisodeSelection = () => {
+  selectingEpisodes.value = !selectingEpisodes.value
+}
+
+const downloadItems = async () => {
+  try {
+    if (item.type === 'MOVIE') {
+      const res = await downloadFilm(item.id, item.slug, item.type)
+      if (res.error) {
+        throw new Error(res.error + ' - ' + res.message)
+      }
+      alertDownload()
+      return
+    }
+  } catch (error) {
+    alertDownload(error)
+  }
+}
+
+const alertDownload = (message?: any) => {
+  if (message) {
+    alert(message)
+    return;
+  }
+  alert('Il downlaod è iniziato, il file sarà disponibile tra qualche minuto nella cartella \'Video\' del progetto...')
+}
 </script>
 
 <template>
@@ -64,6 +92,14 @@ onMounted(async () => {
           </div>
           <h3 v-if="animeEpisodes.length > 0 && !loading">Numero episodi: {{ animeEpisodes[0].episode_total }}</h3>
           <h3 v-if="tvShowEpisodes.length > 0 && !loading">Numero stagioni: {{ tvShowEpisodes.length }}</h3>
+          <hr style="opacity: 0.2"/>
+          <div class="download-section">
+            <button :disabled="loading || selectingEpisodes" @click="downloadItems">Scarica {{['TV_ANIME', 'TV'].includes(item.type)? 'tutto' : ''}}</button>
+            <template v-if="!loading && ['TV_ANIME', 'TV'].includes(item.type)">
+              <button @click="toggleEpisodeSelection">{{selectingEpisodes ? 'Disattiva' : 'Attiva'}} selezione episodi</button>
+              <button>Download episodi</button>
+            </template>
+          </div>
         </div>
       </div>
 
@@ -88,6 +124,11 @@ onMounted(async () => {
           </div>
       </div>
 
+      <!--MOVIES SECTION-->
+      <div v-else-if="!loading && ['MOVIE', 'OVA', 'SPECIAL'].includes(item.type)">
+        <p>Questo è un {{item.type}}</p>
+      </div>
+
       <!--LOADING SECTION-->
       <div v-else-if="loading">
         <p>Loading...</p>
@@ -126,7 +167,7 @@ h3 {
 }
 
 .details-image {
-  max-width: 300px;
+  width: 295px;
   margin-right: 2rem;
   border-radius: 0.5rem;
 }
@@ -205,6 +246,15 @@ h3 {
   font-weight: bold;
 }
 
+.download-section {
+  margin-top: 1rem;
+  flex: fit-content;
+  flex-direction: row;
+  button {
+    margin-right: 5px;
+  }
+}
+
 @media (max-width: 768px) {
   .episodes-container {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

frontend/src/views/HomeView.vue

@@ -49,7 +49,7 @@ function searchTitle() {
       />
       <div class="toggle-button-container">
         <Toggle v-model="selectedOption" class="search-toggle"></Toggle>
-        <button @click="searchTitle" class="search-button">Cerca</button>
+        <button @click="searchTitle">Cerca</button>
       </div>
     </div>
   </div>
@@ -104,21 +104,6 @@ function searchTitle() {
   margin: 0 8px;
 }
 
-.search-button {
-  background-color: #42b883;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  padding: 8px 16px;
-  font-size: 16px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.search-button:hover {
-  background-color: #3a9f74;
-}
-
 .card-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);