Последняя версия с сервера прошлого разработчика

resources/js/Shared/Feed/Adults.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="card-block contain cursor-pointer flex group overflow-hidden relative"
+  >
+    <div class="absolute inset-0 flex items-center justify-center z-10 text-white text-lg w-full h-36 md:h-72 object-cover">
+      18 + Контент
+    </div>
+    <div class="blur-2xl flex flex-grow bg-indigo-300 w-full h-36 md:h-72 object-cover">
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+    props: {
+        entity: Object,
+        user: Object,
+        feed_id: Number,
+    },
+
+}
+</script>

resources/js/Shared/Feed/Feed.vue

@@ -0,0 +1,97 @@
+<template>
+  <modal-feed
+    :modal-feed="modalFeed"
+    :open="show"
+    @close-modal="closeModal"
+    @destroyFeed="destroyFeed"
+  />
+
+  <InfinityScroll :node-element="lastNodeLement" :next-cursor="nextCursor"
+                  @fromPagination="putFromPagination"
+  >
+    <div v-for="feed in feedLists" :key="feed.id"
+         :ref="el => { if (el && feed.id === lastElementID) lastNodeLement = el }"
+    >
+      <feed-node :feed="feed" @open-modal="openModal" />
+    </div>
+  </InfinityScroll>
+</template>
+
+<script>
+import { ref, computed, watch } from 'vue'
+import { Inertia } from '@inertiajs/inertia'
+import findIndex from 'lodash/findIndex'
+
+import FeedNode from '@/Shared/Feed/FeedNode.vue'
+import ModalFeed from '@/Shared/Overlay/ModalFeed.vue'
+import InfinityScroll from '@/Shared/Misc/InfinityScroll.vue'
+
+
+export default {
+    components: {
+        FeedNode,
+        ModalFeed,
+        InfinityScroll,
+    },
+
+    props: {
+        feeds: Array,
+        nextCursor: { type: String, default: '' },
+    },
+
+    setup(props) {
+        let feedLists = ref(props.feeds)
+
+        const show = ref(false)
+        const modalFeed = ref({})
+
+        const containerRef = ref(null)
+
+        const lastElementID = computed(
+            () => feedLists.value[feedLists.value.length - 1]?.id
+        )
+
+        watch(props, (props) => {
+            feedLists.value = props.feeds
+        })
+
+        const putFromPagination = (lists) => {
+            for (let list of lists) {
+                feedLists.value.push(list)
+            }
+        }
+
+        const destroyFeed = () => {
+            Inertia.delete(route('feed.destroy', modalFeed.value.id), {
+                preserveScroll: true,
+                preserveState: true,
+            })
+            const index = findIndex(
+                feedLists.value,
+                (item) => item.id === modalFeed.value.id
+            )
+            feedLists.value.splice(index, 1)
+        }
+
+        const openModal = (feed) => {
+            show.value = true
+            modalFeed.value = feed
+        }
+        const closeModal = () => {
+            show.value = false
+        }
+
+        return {
+            lastNodeLement: containerRef,
+            openModal,
+            closeModal,
+            destroyFeed,
+            lastElementID,
+            show,
+            modalFeed,
+            feedLists,
+            putFromPagination,
+        }
+    },
+}
+</script>

resources/js/Shared/Feed/FeedNode.vue

@@ -0,0 +1,95 @@
+<template>
+  <component
+    :is="currentTypeNode"
+    :class="{'need-approved': feed.entity?.status == 0}"
+    :feed_id="feed.id"
+    :user="feed.user"
+    :entity="feed.entity"
+    @click.prevent="openModal(feed)"
+    @like-feed="likeFeed"
+  ></component>
+  <p v-if="feed.entity?.price" class="mt-2 text-gray-light text-sm">
+    Цена: {{ feed.entity.price }}
+  </p>
+  <p v-if="feed.entity?.purchase_date" class="mt-2 text-gray-light text-sm">
+    Дата покупки: {{ feed.entity.purchase_date }}
+  </p>
+</template>
+
+<script>
+import { Inertia } from '@inertiajs/inertia'
+import { usePage } from '@inertiajs/inertia-vue3'
+import axios from 'axios'
+import FeedImages from '@/Shared/Feed/Images.vue'
+import FeedVideos from '@/Shared/Feed/Videos.vue'
+import FeedMusics from '@/Shared/Feed/Musics.vue'
+import FeedAdults from '@/Shared/Feed/Adults.vue'
+import FeedProhibited from '@/Shared/Feed/Prohibited.vue'
+
+export default {
+    components: {
+        FeedImages,
+        FeedVideos,
+        FeedMusics,
+        FeedAdults,
+        FeedProhibited,
+    },
+    props: {
+        feed: Object,
+    },
+    emits: ['openModal'],
+    computed: {
+        authUser() {
+            return usePage().props.value.auth.user
+        },
+        currentTypeNode() {
+            return 'feed-' + this.feed.type.toLowerCase()
+        },
+    },
+    methods: {
+        openModal(feed) {
+
+            if(feed.entity){
+                this.$emit('openModal', feed)
+            }
+
+        },
+
+        likeFeed() {
+            axios
+                .post(route('feed.like', this.feed.id))
+                .then(() => {
+                    if (this.feed.entity.liked) {
+                        this.feed.entity.liked = false
+                        this.feed.entity.likes--
+                    } else {
+                        this.feed.entity.liked = true
+                        this.feed.entity.likes++
+                    }
+                })
+
+            // Inertia.post(
+            //     route('feed.like', this.feed.id),
+            //     {},
+            //     {
+            //         preserveScroll: true,
+            //         preserveState: true,
+            //     }
+            // )
+            // if (this.feed.entity.liked) {
+            //     this.feed.entity.liked = false
+            //     this.feed.entity.likes--
+            // } else {
+            //     this.feed.entity.liked = true
+            //     this.feed.entity.likes++
+            // }
+        },
+    },
+}
+</script>
+
+<style>
+.need-approved{
+    outline: 5px solid #FF9800;
+}
+</style>

resources/js/Shared/Feed/FeedPreview.vue

@@ -0,0 +1,32 @@
+<template>
+  <img :class="{'object-top sm:object-center': existSource}" :src="setImage()"
+       alt=""
+  />
+</template>
+
+<script>
+export default {
+    components: {},
+    props: {
+        source: String,
+        type: String,
+    },
+    computed: {
+        existSource () {
+            return !this.source
+        }
+    },
+    methods: {
+        setImage() {
+            if (this.source) {
+                return this.source
+            }
+            // if(this.type == 'music'){
+            //     return '/image/modalimg1.jpg'
+            // }
+            // return '/image/card4.jpg'
+            return '/image/default-placeholder.jpg'
+        },
+    }
+}
+</script>

resources/js/Shared/Feed/FooterBanned.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="
+        transition-opacity
+        ease-out
+        flex
+        items-center
+        justify-center
+        bg-indigo-300 bg-opacity-75
+        z-10
+        absolute
+        inset-x-0
+        bottom-0
+        p-2
+        md:p-3
+      "
+  >
+    <footer class="misc-info flex space-x-4">
+      <span class="text-white text-xs lg:text-base font-medium">КОНТЕНТ НА МОДЕРАЦИИ</span>
+    </footer>
+  </div>
+</template>
+
+<script>
+
+</script>

resources/js/Shared/Feed/FooterMisc.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="
+      transition-opacity
+      ease-out
+      flex
+      items-center
+      justify-center
+      opacity-0
+      group-hover:opacity-100
+      bg-indigo-300 bg-opacity-75
+      z-10
+      absolute
+      inset-x-0
+      bottom-0
+      p-2
+      md:p-3
+    "
+  >
+    <div class="misc-info flex space-x-4 items-center">
+      <template v-if="ads == false">
+        <like-count :likes="likes" :liked="is_like"
+                    @likeFeed="callLike"
+        />
+        <comment-count :comments="comments" />
+      </template>
+      <span v-else class="text-gray-light">Реклама</span>
+      <view-count :count="count" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Inertia } from '@inertiajs/inertia'
+import LikeCount from '@/Shared/Misc/LikeCount.vue'
+import ViewCount from '@/Shared/Misc/ViewCount.vue'
+import CommentCount from '@/Shared/Misc/CommentCount.vue'
+export default {
+    components: {
+        LikeCount,
+        CommentCount,
+        ViewCount,
+    },
+    props: {
+        likes: Number,
+        comments: Number,
+        is_like: Boolean,
+        ads: {
+            type: Boolean,
+            default: false
+        },
+        count: {
+            type: Number,
+            default: 0
+        },
+    },
+    emits: ['likeFeed'],
+    methods: {
+        callLike() {
+            if (this.$page.props.auth.user) {
+                this.$emit('likeFeed')
+            }else{
+                Inertia.get(route('login'))
+            }
+        },
+    },
+}
+</script>

resources/js/Shared/Feed/HeaderMisc.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="absolute z-10 top-3 right-3">
+    <div class="flex items-center text-white">
+      <span v-if="count > 1" class="mr-1 text-sm">
+        {{ count }}
+      </span>
+      <svg class="drop-shadow-custom w-5 h-5">
+        <use v-if="type == 'images'" xlink:href="#imagefeed"></use>
+        <use v-if="type == 'videos'" xlink:href="#filmmark"></use>
+        <use v-if="type == 'musics'" xlink:href="#musicmark"></use>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    components: {  },
+    props: {
+        count: Number,
+        type: String,
+    },
+}
+</script>

resources/js/Shared/Feed/Images.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="card-block contain group cursor-pointer relative overflow-hidden"
+  >
+    <feed-header-misc
+      :count="entity.collection_medias.length"
+      type="images"
+    />
+
+
+    <feed-footer-misc
+      v-if="entity.status == 1"
+      :is_like="entity.liked"
+      :likes="entity.likes"
+      :comments="entity.comments"
+      :count="entity.views_count"
+      :ads="entity.is_ads"
+      @like-feed="likeFeed"
+    />
+    <feed-footer-banned v-else />
+
+
+
+    <div class="relative overflow-hidden">
+      <img
+        class="w-full h-36 md:h-72 object-cover"
+        :src="entity.preview"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+
+<script>
+import FeedFooterMisc from '@/Shared/Feed/FooterMisc.vue'
+import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
+import FeedFooterBanned from '@/Shared/Feed/FooterBanned.vue'
+export default {
+    components: { FeedFooterMisc, FeedHeaderMisc, FeedFooterBanned },
+    props: {
+        entity: Object,
+        user: Object,
+        feed_id: Number,
+    },
+    emits: ['likeFeed'],
+    methods: {
+        likeFeed() {
+            this.$emit('likeFeed')
+        },
+    },
+}
+</script>

resources/js/Shared/Feed/Musics.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    class="card-block contain group cursor-pointer relative overflow-hidden"
+  >
+    <feed-header-misc
+      :count="entity.collection_medias.length"
+      type="musics"
+    />
+
+    <div :class="[playlist_id === feed_id ? '' : 'transition-opacity ease-out opacity-0 group-hover:opacity-100' , ' absolute inset-0 z-10 flex items-center justify-center']">
+      <div class="w-full grid grid-cols-7 items-center p-1 md:p-3 bg-indigo-300 bg-opacity-75">
+        <div class="col-span-1 flex mr-3 text-white" @click.stop>
+          <div class="inline-block transition-colors hover:text-orange" @click.prevent="startPlay(first_entity)">
+            <button :class="[ currentSong?.id === first_entity.id ? '' : 'hidden', 'default' ]">
+              <svg :class="[ playing ? 'hidden' : 'block', 'w-4 h-4 md:w-6 md:h-6' ]">
+                <use xlink:href="#play"></use>
+              </svg>
+              <svg :class="[ playing ? 'block' : 'hidden', 'w-4 h-4 md:w-6 md:h-6' ]">
+                <use xlink:href="#pause"></use>
+              </svg>
+            </button>
+            <button :class="[ currentSong?.id !== first_entity.id ? '' : 'hidden', 'default' ]">
+              <svg class="w-4 h-4 md:w-6 md:h-6">
+                <use xlink:href="#play"></use>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <div v-show="playlist_id === feed_id" class="col-span-6 flex flex-col text-white">
+          <span class="text-xs md:text-base text-gray font-semibold truncate">{{ currentSong.name }}</span>
+          <span class="text-xs md:text-sm text-gray-light truncate">{{ seek }}</span>
+        </div>
+        <div v-show="playlist_id !== feed_id" class="col-span-6 flex flex-col text-white">
+          <span class="text-xs md:text-base text-gray font-semibold truncate">{{ first_entity.name }}</span>
+          <span class="text-xs md:text-sm text-gray-light truncate">{{ first_entity.time }}</span>
+        </div>
+      </div>
+    </div>
+
+    <feed-footer-misc
+      v-if="entity.status == 1"
+      :is_like="entity.liked"
+      :likes="entity.likes"
+      :comments="entity.comments"
+      :count="entity.views_count"
+      :ads="entity.is_ads"
+      @like-feed="likeFeed"
+    />
+    <feed-footer-banned v-else />
+
+    <div class="relative overflow-hidden">
+      <feed-preview class="w-full h-36 md:h-72 object-cover" type="music"
+                    :source="entity.preview"
+      />
+    </div>
+  </div>
+</template>
+
+
+<script>
+import { mapActions, mapState, mapGetters } from 'vuex'
+
+import FeedFooterMisc from '@/Shared/Feed/FooterMisc.vue'
+import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
+import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
+import FeedFooterBanned from '@/Shared/Feed/FooterBanned.vue'
+import axios from 'axios'
+export default {
+    components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview, FeedFooterBanned },
+    props: {
+        entity: Object,
+        user: Object,
+        feed_id: Number,
+    },
+    emits: ['likeFeed'],
+    computed: {
+        first_entity() {
+            const media = this.entity.collection_medias
+            if (
+                this.playlist_id === this.feed_id &&
+        typeof media[this.indexPlaylist] !== 'undefined'
+            ) {
+                return media[this.indexPlaylist]
+            }
+            return media[0]
+        },
+        ...mapGetters(['playing']),
+        ...mapState({
+            seek: (state) => state.player.seek,
+            indexPlaylist: (state) => state.player.index,
+            playlist_id: (state) => state.player.playlist_id,
+            currentSong: (state) => state.player.currentSong,
+        }),
+    },
+
+    methods: {
+        ...mapActions(['toggleAudio', 'newCurrentPlaylist']),
+        startPlay(music) {
+            this.addViewShow()
+            if (this.currentSong?.id === music.id) {
+                this.toggleAudio()
+                return
+            }
+            this.newCurrentPlaylist([
+                this.first_entity,
+                this.entity.collection_medias,
+                this.feed_id,
+            ])
+
+        },
+
+        addViewShow() {
+            axios
+                .post(route('add.view.feed', this.feed_id))
+                .then(({ data }) => {
+                    data && this.entity.views_count++
+                })
+        },
+
+        likeFeed() {
+            this.$emit('likeFeed')
+        },
+    },
+}
+</script>

resources/js/Shared/Feed/Prohibited.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    class="card-block contain cursor-pointer flex group overflow-hidden relative"
+  >
+    <div class="absolute inset-0 flex items-center justify-center z-10 text-white text-sm sm:text-lg w-full h-36 md:h-72 object-cover">
+      <div class="text-center p-2">
+        <p>Контент доступен по подписке!</p>
+        <p>
+          Купить: <inertia-link :href="route('profile.user', user.username)" class="font-semibold underline inline-block mr-2">
+            {{ user.username }}
+          </inertia-link>
+        </p>
+      </div>
+    </div>
+    <div class="blur-2xl flex flex-grow bg-indigo-300 w-full h-36 md:h-72 object-cover">
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+export default {
+    props: {
+        entity: Object,
+        user: Object,
+        feed_id: Number,
+    },
+
+}
+</script>

resources/js/Shared/Feed/Videos.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="card-block contain group cursor-pointer relative overflow-hidden"
+  >
+    <feed-header-misc
+      :count="entity.collection_medias.length"
+      type="videos"
+    />
+    <feed-footer-misc
+      v-if="entity.status == 1"
+      :is_like="entity.liked"
+      :likes="entity.likes"
+      :comments="entity.comments"
+      :count="entity.views_count"
+      :ads="entity.is_ads"
+      @like-feed="likeFeed"
+    />
+    <feed-footer-banned v-else />
+
+    <div class="relative overflow-hidden">
+      <feed-preview class="w-full h-36 md:h-72 object-cover" :source="entity.preview" />
+    </div>
+  </div>
+</template>
+
+
+<script>
+import FeedFooterMisc from '@/Shared/Feed/FooterMisc.vue'
+import FeedHeaderMisc from '@/Shared/Feed/HeaderMisc.vue'
+import FeedPreview from '@/Shared/Feed/FeedPreview.vue'
+import FeedFooterBanned from '@/Shared/Feed/FooterBanned.vue'
+
+export default {
+    components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview, FeedFooterBanned },
+    props: {
+        entity: Object,
+        user: Object,
+        feed_id: Number,
+    },
+    emits: ['likeFeed'],
+    methods: {
+        likeFeed() {
+            this.$emit('likeFeed')
+        },
+    },
+}
+</script>