Представляем вашему вниманию Almost Netflix: Клон Netflix, созданный с помощью Vue и Appwrite

<template>
  <h1 class="text-blue-500 text-4xl">
    Almost Netflix 🎬
  </h1>
</template>

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Inter', sans-serif;
}

import { Appwrite, Models, Query } from "appwrite";

const sdk = new Appwrite();
sdk
    .setEndpoint("http://localhost/v1")
    .setProject("almostNetflix");

export type AppwriteMovie = {
  name: string,
  description: string,
  durationMinutes: number,
  thumbnailImageId: string,
  releaseDate: number,
  ageRestriction: string,

  relationId?: string
} & Models.Document;

export type AppwriteWatchlist = {
  movieId: string,
  userId: string
} & Models.Document;

export const AppwriteService = {
    // Register new user into Appwrite
    async register(name: string, email: string, password: string): Promise<void> {
        await sdk.account.create("unique()", email, password, name);
    },

    // Login existing user into his account
    async login(email: string, password: string): Promise<void> {
        await sdk.account.createSession(email, password);
    },

    // Logout from server removing the session on backend
    async logout(): Promise<boolean> {
        try {
            await sdk.account.deleteSession("current");
            return true;
        } catch (err) {
            // If error occured, we should not redirect to login page
            return false;
        }
    },

    // Figure out if user is logged in or not
    async getAuthStatus(): Promise<boolean> {
        try {
            await sdk.account.get();
            return true;
        } catch (err) {
            // If there is error, user is not logged in
            return false;
        }
    },  
};

<form @submit.prevent="onLogin()">
    <input v-model="email" type="email" />
    <input v-model="pass" type="password"/>
    <button type="submit">Sign In</button>
</form>

export default Vue.extend({
  data: () => {
    return {
      email: '',
      pass: '',
    }
  },
  methods: {
    async onLogin() {
      try {
        await AppwriteService.login(this.email, this.pass)
        this.$router.push('/app')
      } catch (err: any) {
        alert(err.message)
      }
    },
  },
})

export default Vue.extend({
    data: () => {
        return {
            name: '',
            email: '',
            pass: '',
            passAgain: '',
            agreeTerms: false,
        }
    },
    methods: {
        async onRegister() {
            if (this.pass !== this.passAgain) {
                alert('Passwords need to match.')
                return
            }

            if (!this.agreeTerms) {
                alert('You have to agree to our terms.')
                return
            }

            try {
                await AppwriteService.register(this.name, this.email, this.pass)
                await AppwriteService.login(this.email, this.pass)
                this.$router.push('/app')
            } catch (err: any) {
                alert(err.message)
            }
        },
    },
})

<template></template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  middleware: [
    function ({ redirect }) {
      redirect('/app/movies')
    },
  ],
})
</script>

<template>
  <h1>Welcome logged in user 👋</h1>
</template>

import { Middleware } from "@nuxt/types";
import { AppwriteService } from "../services/appwrite";

const middleware: Middleware = async ({ redirect }) => {
    const isLoggedIn = await AppwriteService.getAuthStatus();

    if (isLoggedIn) {
        // OK
    } else {
        return redirect("/login");
    }
}

export default middleware;

<template>
    <h1>Welcome logged in user 👋</h1>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  middleware: 'only-authenticated',
})
</script>

import { Middleware } from "@nuxt/types";
import { AppwriteService } from "../services/appwrite";

const middleware: Middleware = async ({ redirect }) => {
    const isLoggedIn = await AppwriteService.getAuthStatus();

    if (isLoggedIn) {
        return redirect("/app");
    } else {
        // OK
    }
}

export default middleware;

<template>
    <h1>Header</h1>
    <hr>
    <Nuxt />
    <hr>
    <h1>Footer</h1>
</template>

<!-- ... -->

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  layout: 'app',
    // ...
})
</script>

export const AppwriteService = {
    // ...

    // Generate profile photo from initials
    async getProfilePhoto(): Promise<URL> {
        let name = "Anonymous";

        try {
            const account = await sdk.account.get();

            if (account.name) {
                // If we have name, use that for initials
                name = account.name;
            } else {
                // If not, use email. That is 100% available always
                name = account.email;
            }
        } catch (err) {
            // Means we don't have account, fallback to anonymous image
        }

        // Generate URL from previously picked keyword (name)
        return sdk.avatars.getInitials(name, 50, 50);
    } 
};

export const AppwriteService = {
    // ...

    // Same as above. Generates URL, setting some limits on size and format
    getMainThumbnail(imageId: string): URL {
        return sdk.storage.getFilePreview(imageId, 2000, undefined, "top", undefined, undefined, undefined, undefined, undefined, undefined, undefined, "webp");
    }
};

export const AppwriteService = {
    // ...

    // Simple query to get the most trading movie
    async getMainMovie(): Promise<AppwriteMovie> {
        const response = await sdk.database.listDocuments<AppwriteMovie>("movies", [], 1, undefined, undefined, undefined, ["trendingIndex"], ["DESC"]);
        return response.documents[0];
    }
};

export type AppwriteCategory = {
  title: string;
  queries: string[];
  orderAttributes: string[];
  orderTypes: string[];
  collectionName?: string;
}

export const AppwriteMovieCategories: AppwriteCategory[] = [
  {

    title: "Popular this week",
    queries: [],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {

    title: "Only on Almost Netflix",
    queries: [
      Query.equal("isOriginal", true)
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {

    title: "New releases",
    queries: [
      Query.greaterEqual('releaseDate', 2018),
    ],
    orderAttributes: ["releaseDate"],
    orderTypes: ["DESC"]
  },
  {

    title: "Movies longer than 2 hours",
    queries: [
      Query.greaterEqual('durationMinutes', 120)
    ],
    orderAttributes: ["durationMinutes"],
    orderTypes: ["DESC"]
  },
  {

    title: "Love is in the air",
    queries: [
      Query.search('genres', "Romance")
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {

    title: "Animated worlds",
    queries: [
      Query.search('genres', "Animation")
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {

    title: "It's getting scarry",
    queries: [
      Query.search('genres', "Horror")
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {

    title: "Sci-Fi awaits...",
    queries: [
      Query.search('genres', "Science Fiction")
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {

    title: "Anime?",
    queries: [
      Query.search('tags', "anime")
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
  {
    title: "Thriller!",
    queries: [
      Query.search('genres', "Thriller")
    ],
    orderAttributes: ["trendingIndex"],
    orderTypes: ["DESC"]
  },
];

export const AppwriteService = {
    // ...
};

export const AppwriteService = {
    // ...

    // List movies. Most important function
    async getMovies(perPage: number, category: AppwriteCategory, cursorDirection: 'before' | 'after' = 'after', cursor: string | undefined = undefined): Promise<{
        documents: AppwriteMovie[],
        hasNext: boolean;
    }> {
        // Get queries from category configuration. Used so this function is generic and can be easily re-used
        const queries = category.queries;

        const collectionName = category.collectionName ? category.collectionName : "movies";
        let documents = [];

        // Fetch data with configuration from category
        // Limit increased +1 on purpose so we know if there is next page
        let response: Models.DocumentList<any> = await sdk.database.listDocuments<AppwriteMovie | AppwriteWatchlist>(collectionName, queries, perPage + 1, undefined, cursor, cursorDirection, category.orderAttributes, category.orderTypes);

        // Create clone of documents we got, but depeding on cursor direction, remove additional document we fetched by setting limit to +1
        if (cursorDirection === "after") {
            documents.push(...response.documents.filter((_d, dIndex) => dIndex < perPage));
        } else {
            documents.push(...response.documents.filter((_d, dIndex) => dIndex > 0 || response.documents.length === perPage));
        }

        if (category.collectionName) {
            const nestedResponse = await sdk.database.listDocuments<AppwriteMovie>("movies", [
                Query.equal("$id", documents.map((d) => d.movieId))
            ], documents.length);

            documents = nestedResponse.documents.map((d) => {
                return {
                    ...d,
                    relationId: response.documents.find((d2) => d2.movieId === d.$id).$id
                }
            }).sort((a, b) => {
                const aIndex = response.documents.findIndex((d) => d.movieId === a.$id);
                const bIndex = response.documents.findIndex((d) => d.movieId === b.$id);

                return aIndex < bIndex ? -1 : 1;
            })
        }

        // Return documents, but also figure out if there was this +1 document we requested. If yes, there is next page. If not, there is not
        return {
            documents: documents as AppwriteMovie[],
            hasNext: response.documents.length === perPage + 1
        };
    }
};

export const AppwriteService = {
    // ...

    // Generate URL that will resize image to 500px from original potemtially 4k image
    // Also, use webp format for better performance
    getThumbnail(imageId: string): URL {
        return sdk.storage.getFilePreview(imageId, 500, undefined, "top", undefined, undefined, undefined, undefined, undefined, undefined, undefined, "webp");
    }
};

<template>
  <div>
    <div class="flex flex-col space-y-20">
      <movie-list
        v-for="category in categories"
        :key="category.title"
        :category="category"
      />
    </div>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue'
    import {
        AppwriteMovieCategories,
    } from '~/services/appwrite'

    export default Vue.extend({
        data: () => {
            return {
                categories: AppwriteMovieCategories,
            }
        },
    })
</script>

<template>
  <div>
    <h1 class="text-4xl text-zinc-200">{{ category.title }}</h1>

    <div
      v-if="movies.length > 0"
      class="relative grid grid-cols-2 gap-4 mt-6  sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
    >
      <Movie
        v-for="(movie, index) in movies"

        :isPaginationEnabled="true"
        :onPageChange="onPageChange"
        :moviesLength="movies.length"
        :isLoading="isLoading"
        :isCursorAllowed="isCursorAllowed"
        class="col-span-1"
        :key="movie.$id"
        :appwrite-id="movie.$id"
        :movie="movie"
        :index="index"
      />
    </div>

    <div v-if="movies.length <= 0" class="relative mt-6 text-zinc-500">
      <p>This list is empty at the moment...</p>
    </div>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue'

    export default Vue.extend({
        props: ['category'],
    });
</script>

export default Vue.extend({
    // ...

    data: () => {
        const width = window.innerWidth
        let perPage: number

        // Depending on the device size, use different page size
        if (width < 640) {
            perPage = 2
        } else if (width < 768) {
            perPage = 3
        } else if (width < 1024) {
            perPage = 4
        } else if (width < 1280) {
            perPage = 5
        } else {
            perPage = 6
        }

        return {
            perPage,
            isLoading: true,
            isBeforeAllowed: false,
            isAfterAllowed: true,
            movies: [] as AppwriteMovie[],

            lastCursor: undefined as undefined | string,
            lastDirection: undefined as undefined | 'before' | 'after',
        }
    },

    async created() {
        // When component loads, fetch movie list with defaults for pagination (no cursor)
        const data = await AppwriteService.getMovies(
            this.perPage,
            this.$props.category
        )

        // Store fetched data into component variables
        this.movies = data.documents
        this.isLoading = false
        this.isAfterAllowed = data.hasNext
    },
});

export default Vue.extend({
    // ...

    isCursorAllowed(index: number) {
        // Simply use variables we fill during fetching data from API
        // Depending on index (direction) we want to return different variables
        if (index === 0) {
            return this.isBeforeAllowed
        }

        if (index === this.movies.length - 1) {
            return this.isAfterAllowed
        }
    },

    async onPageChange(direction: 'before' | 'after') {
        // Show spinners instead of arrows
        this.isLoading = true

        // Use relation ID if provided
        const lastRelationId =
            direction === 'before'
                ? this.movies[0].relationId
                : this.movies[this.movies.length - 1].relationId

        // Depending on direction, get ID of last document we have
        let lastId = lastRelationId
            ? lastRelationId
            : direction === 'before'
                ? this.movies[0].$id
                : this.movies[this.movies.length - 1].$id

        // Fetch new list of movies using direction and last document ID
        const newMovies = await AppwriteService.getMovies(
            this.perPage,
            this.$props.category,
            direction,
            lastId
        )

        // Fetch status if movie is on My List or not
        await this.LOAD_FAVOURITE(newMovies.documents.map((d) => d.$id))

        // Now lets figure out if we have previous and next page...
        // Let's start with saying we have them both, then we will set it to false if we are sure there isnt any
        // By setting default to true, we never hide it when we shouldnt.. Worst case scenario, we show it when we shoulding, resulsing in you seing the arrow, but taking no effect and then dissapearing
        this.isBeforeAllowed = true
        this.isAfterAllowed = true

        // If we dont get any documents, it means we got to edge-case when we thought there is next/previous page, but there isnt
        if (newMovies.documents.length === 0) {
            // Depending on direction, set that arrow to disabled
            if (direction === 'before') {
                this.isBeforeAllowed = false
            } else {
                this.isAfterAllowed = false
            }
        } else {
            // If we got some documents, store them to component variable and keep both arrows enabled
            this.movies = newMovies.documents
        }

        // If our Appwrite service says there isn' next page, then...
        if (!newMovies.hasNext) {
            // Depnding on direction, set that specific direction to disabled
            if (direction === 'before') {
                this.isBeforeAllowed = false
            } else {
                this.isAfterAllowed = false
            }
        }

        // Store cursor and direction if I ever need to refresh the current page
        this.lastDirection = direction
        this.lastCursor = lastId

        // Hide spinners, show arrows again
        this.isLoading = false
    },
});

export const AppwriteService = {
    // ...

    async addToMyList(movieId: string): Promise<boolean> {
        try {
            const { $id: userId } = await sdk.account.get();

            await sdk.database.createDocument("watchlists", "unique()", {
                userId,
                movieId,
                createdAt: Math.round(Date.now() / 1000)
            });
            return true;
        } catch (err: any) {
            alert(err.message);
            return false;
        }
    },

    async deleteFromMyList(movieId: string): Promise<boolean> {
        try {
            const { $id: userId } = await sdk.account.get();

            const watchlistResponse = await sdk.database.listDocuments<AppwriteWatchlist>("watchlists", [
                Query.equal("userId", userId),
                Query.equal("movieId", movieId)
            ], 1);

            const watchlistId = watchlistResponse.documents[0].$id;

            await sdk.database.deleteDocument("watchlists", watchlistId);
            return true;
        } catch (err: any) {
            alert(err.message);
            return false;
        }
    }
};

export const AppwriteService = {
    // ...

    async getOnlyMyList(movieIds: string[]): Promise<string[]> {
        const { $id: userId } = await sdk.account.get();

        const watchlistResponse = await sdk.database.listDocuments<AppwriteWatchlist>("watchlists", [
            Query.equal("userId", userId),
            Query.equal("movieId", movieIds)
        ], movieIds.length);

        return watchlistResponse.documents.map((d) => d.movieId);
    }
};

<template>
  <div>
      <movie-list :category="category" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { AppwriteCategory } from '../../services/appwrite'

export default Vue.extend({
  middleware: 'only-authenticated',
  layout: 'app',
  data() {
    const category: AppwriteCategory = {
      collectionName: 'watchlists',
      title: 'Movies in My List',
      queries: [],
      orderAttributes: [],
      orderTypes: [],
    }

    return {
      category,
    }
  },
})
</script>