https://www.brei.men/assets/js/page/movie.in.js

1'use strict';
2(() => {
3  const layer = [
4    {
5      name: 'TOP',
6      href: '/',
7    },
8    {
9      name: 'MOVIE',
10      href: '/movie/',
11    },
12  ];
13
14  PAGE_FUNCTION.add('movie_in', {
15    enter() {
16      var _PAGE_LAYER, _PAGE_LAYER$change;
17      (_PAGE_LAYER = PAGE_LAYER) === null || _PAGE_LAYER === void 0 ? void 0 : (_PAGE_LAYER$change = _PAGE_LAYER.change) === null || _PAGE_LAYER$change === void 0 ? void 0 : _PAGE_LAYER$change.call(_PAGE_LAYER, layer);
18      PAGE_MOVIE_IN.setup();
19    },
20    leave() {
21      bgMovieStop();
22      PAGE_MOVIE_IN.destroy();
23    },
24  });
25
26  const PAGE_MOVIE_IN = {
27    instance: {},
28    setup() {
29      this.instance[CURRENT_AREA_ID] = Vue.createApp(vMovieIn);
30      this.instance[CURRENT_AREA_ID].mount($_CURRENT_CONTENT.find('.v-movie-in').get()[0]);
31    },
32    destroy() {
33      this.instance[PREV_AREA_ID].unmount();
34    },
35  };
36
37  const vMovieInfo = Vue.defineComponent({
38    name: 'v-movie-info',
39    template: '#v-movie-info',
40    props: {
41      vdata: {
42        type: Object,
43        required: true,
44      },
45    },
46    setup() {},
47  });
48
49  const vMovieIn = Vue.defineComponent({
50    components: {
51      vMovieInfo,
52      vScrollVisual,
53    },
54    name: 'MovieIn',
55    setup(props, context) {
56      // ========== INITIAL AREA ==========
57      const init = Vue.ref(false);
58      const state = Vue.ref(vStore.state);
59      Vue.onMounted(() => {
60        var _PAGE_LAYER2, _PAGE_LAYER2$push, _movie$value, _movie$value2;
61        if (!id) Pjax.changePage(''.concat(root.value, '/movie/'));
62        init.value = true;
63
64        (_PAGE_LAYER2 = PAGE_LAYER) === null || _PAGE_LAYER2 === void 0
65          ? void 0
66          : (_PAGE_LAYER2$push = _PAGE_LAYER2.push) === null || _PAGE_LAYER2$push === void 0
67          ? void 0
68          : _PAGE_LAYER2$push.call(_PAGE_LAYER2, {
69              name: movie === null || movie === void 0 ? void 0 : (_movie$value = movie.value) === null || _movie$value === void 0 ? void 0 : _movie$value.title,
70            });
71
72        bgMovieSet(movie === null || movie === void 0 ? void 0 : (_movie$value2 = movie.value) === null || _movie$value2 === void 0 ? void 0 : _movie$value2.video_id);
73
74        Vue.nextTick(() => {
75          Lazy.update();
76        });
77      });
78
79      // MOVIE IN
80      const query = url.getQuery();
81      const id = query.id;
82      const movieApi = vStore.API.movie;
83      const movieIndex = Vue.ref(-1);
84
85      const nextMovie = Vue.computed(() => {
86        const filterIndex = filterList.value.findIndex((data) => String(data.id) === id);
87        const index = filterIndex + 1 < filterList.value.length ? filterIndex + 1 : 0;
88        return filterIndex >= 0 ? filterList.value[index] : null;
89      });
90
91      const movie = Vue.computed(() => {
92        movieIndex.value = movieApi.data.findIndex((data) => String(data.id) === id);
93        return movieIndex.value >= 0 ? movieApi.data[movieIndex.value] : null;
94      });
95
96      const filterList = Vue.computed(() => {
97        var _movie$value3;
98        return movie !== null && movie !== void 0 && (_movie$value3 = movie.value) !== null && _movie$value3 !== void 0 && _movie$value3.category
99          ? movieApi.data.filter((data) => {
100              var _movie$value4;
101              return data.category === (movie === null || movie === void 0 ? void 0 : (_movie$value4 = movie.value) === null || _movie$value4 === void 0 ? void 0 : _movie$value4.category);
102            })
103          : movieApi.data;
104      });
105
106      // scroll
107
108      function ease(x) {
109        return 1 - Math.cos((x * Math.PI) / 2);
110      }
111      function areaH() {
112        return Default.mq() ? 360 : 270;
113      }
114      let change = true;
115      const move_ratio = Vue.ref(0);
116      const add_height = Vue.ref(0);
117
118      const detailEl = Vue.ref(null);
119      function scroll() {
120        const rect = $(detailEl.value).offset().top + $(detailEl.value).innerHeight();
121        const scrollY = window.scrollY + winH * 3;
122        const scrollOver = scrollY - rect;
123        const ratio = scrollOver > 0 ? Math.round((scrollOver / (winH * 2)) * 1000) / 1000 : 0;
124
125        const easeRatio = ease(ratio);
126        move_ratio.value = ratio;
127        const addHeight = easeRatio * winH - areaH() > 0 ? easeRatio * winH - areaH() : 0;
128        add_height.value = addHeight;
129
130        if (ratio >= 1) {
131          if (change) {
132            change = false;

133            ChangePage();
134          }
135        }
136      }
137
138      const ChangePage = () => {
139        var _nextMovie$value;
140        Scroll.stop();
141        bgMovieInSet(nextMovie === null || nextMovie === void 0 ? void 0 : (_nextMovie$value = nextMovie.value) === null || _nextMovie$value === void 0 ? void 0 : _nextMovie$value.video_id);
142        Pjax.changePage(''.concat(root.value, '/movie/detail/?id=').concat(nextMovie.value.id));
143      };
144      const NextClick = () => {
145        var _nextMovie$value2;
146        bgMovieInSet(nextMovie === null || nextMovie === void 0 ? void 0 : (_nextMovie$value2 = nextMovie.value) === null || _nextMovie$value2 === void 0 ? void 0 : _nextMovie$value2.video_id);
147      };
148
149      Vue.onMounted(() => {
150        // window.addEventListener('scroll', scroll);
151        if (Scroll.instance) {
152          window.addEventListener('scroll', scroll);
153        }
154      });
155      Vue.onUnmounted(() => {
156        if (Scroll.instance) {
157          window.removeEventListener('scroll', scroll);
158        }
159      });
160
161      // anim
162
163      return {
164        // initial
165        root: root,
166        init,
167        state, // movie in
168        movie,
169        nl2br,
170        detailEl,
171        nextMovie,
172        move_ratio,
173        add_height,
174        NextClick,
175      };
176    },
177  });
178})();