Initial commit

resources/js/Shared/Feed/Feed.vue

@@ -0,0 +1,62 @@
+<template>
+  <modal-feed
+   @close-modal="closeModal"
+   @destroyFeed="destroyFeed"
+   :modalFeed='modalFeed' :open="show" />
+
+  <div v-for="feed in feedLists" :key="feed.id">
+    <feed-node @open-modal="openModal" :feed="feed" />
+  </div>
+</template>
+
+<script>
+import FeedNode from "@/Shared/Feed/FeedNode";
+import ModalFeed from "@/Shared/Overlay/ModalFeed";
+import { filter } from "lodash";
+
+export default {
+  components: {
+    FeedNode,
+    ModalFeed,
+  },
+
+  props: {
+    feeds: Array,
+    selfFeed: Boolean,
+    selfUser: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      showLoadButton: true,
+      show: false,
+      entity: {},
+      feedLists: [],
+      complaints: [],
+      modalFeed: {},
+    };
+  },
+
+  mounted() {
+    this.feedLists = this.feeds;
+  },
+
+  methods: {
+    destroyFeed(){
+        const that = this;
+        this.feedLists = filter(this.feedLists, function (x) {
+            return x.id !== that.modalFeed.id;
+        });
+    },
+    openModal(feed) {
+      this.show = true;
+      this.modalFeed = feed;
+    },
+    closeModal() {
+        this.show = false;
+    }
+  },
+};
+</script>

resources/js/Shared/Feed/FeedNode.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    @click.prevent="openModal(feed)"
+    @like-feed="likeFeed"
+    :is="currentTypeNode"
+    :feed_id="feed.id"
+    :user="feed.user"
+    :entity="feed.entity"
+  ></component>
+
+<p class="mt-2 text-gray-light text-sm" v-if="feed.entity.price">Цена: {{feed.entity.price}}</p>
+<p class="mt-2 text-gray-light text-sm" v-if="feed.entity.purchase_date">Дата покупки: {{feed.entity.purchase_date}}</p>
+</template>
+
+<script>
+import { Inertia } from "@inertiajs/inertia";
+import FeedImages from "@/Shared/Feed/Images";
+import FeedVideos from "@/Shared/Feed/Videos";
+import FeedMusics from "@/Shared/Feed/Musics";
+import { usePage } from "@inertiajs/inertia-vue3";
+
+export default {
+  components: {
+    FeedImages,
+    FeedVideos,
+    FeedMusics,
+  },
+  props: {
+    feed: Object,
+  },
+  emits: ["openModal"],
+  computed: {
+    authUser() {
+      return usePage().props.value.auth.user;
+    },
+    currentTypeNode() {
+    //   if (this.feed.entity.is_paid && this.authUser.id !== this.feed.user.id) {
+    //     return "feed-paids";
+    //   }
+      return "feed-" + this.feed.type.toLowerCase();
+    },
+  },
+  methods: {
+    openModal(feed) {
+        this.$emit("openModal", feed);
+    },
+
+    likeFeed() {
+      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>

resources/js/Shared/Feed/FeedPreview.vue

@@ -0,0 +1,24 @@
+<template>
+  <img  :src="setImage()" alt="" />
+</template>
+
+<script>
+export default {
+  components: {  },
+  props: {
+    source: String,
+    type: String,
+  },
+  methods: {
+    setImage() {
+      if(this.source){
+          return this.source;
+      }
+      if(this.type == 'music'){
+        return '/image/modalimg1.jpg';
+      }
+      return '/image/card4.jpg';
+    },
+  },
+};
+</script>

resources/js/Shared/Feed/FooterMisc.vue

@@ -0,0 +1,63 @@
+<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">
+      <div :class="[is_like ? 'text-red' : 'text-gray-light', 'flex items-center']">
+        <button @click.stop="$emit('likeFeed')" class="default">
+          <svg class="w-5 h-5 flex-shrink-0">
+            <use xlink:href="#heart"></use>
+          </svg>
+        </button>
+        <span v-show="likes" class="ml-2 text-sm">{{ likes }}</span>
+      </div>
+
+      <div class="flex items-center text-gray-light">
+        <button class="default">
+          <svg class="w-5 h-5 flex-shrink-0">
+            <use xlink:href="#message-circle"></use>
+          </svg>
+        </button>
+        <span v-show="comments" class="ml-2 text-sm">{{
+          comments
+        }}</span>
+      </div>
+    </div>
+
+    <div class="hidden count-views">
+      <div class="flex items-center text-gray-light">
+        <span class="mr-2 text-sm">1000</span>
+        <svg class="w-5 h-5 flex-shrink-0">
+          <use xlink:href="#eye"></use>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  emits: ["likeFeed"],
+  props: {
+    likes: Number,
+    comments: Number,
+    is_like: Boolean,
+  },
+};
+</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,44 @@
+<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
+      :is_like="entity.liked"
+      :likes="entity.likes"
+      :comments="entity.comments"
+      @like-feed="likeFeed"
+    />
+
+    <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";
+import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
+export default {
+  components: { FeedFooterMisc, FeedHeaderMisc },
+  emits: ["likeFeed"],
+  props: {
+    entity: Object,
+    user: Object,
+    feed_id: Number,
+  },
+  methods: {
+    likeFeed() {
+      this.$emit("likeFeed");
+    },
+  },
+};
+</script>

resources/js/Shared/Feed/Musics.vue

@@ -0,0 +1,94 @@
+<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 @click.stop="" class="col-span-1 flex mr-3 text-white">
+            <div @click.prevent="startPlay(entity.collection_medias[0])" class="inline-block transition-colors hover:text-orange">
+                <button :class="[ currentSong?.id === entity.collection_medias[0].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 !== entity.collection_medias[0].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 class="col-span-6 flex flex-col text-white" v-show="playlist_id === feed_id">
+            <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 class="col-span-6 flex flex-col text-white" v-show="playlist_id !== feed_id">
+            <span class="text-xs md:text-base text-gray font-semibold truncate">{{entity.collection_medias[0].name}}</span>
+            <span class="text-xs md:text-sm text-gray-light truncate">{{entity.collection_medias[0].time}}</span>
+        </div>
+
+    </div>
+</div>
+
+    <feed-footer-misc
+      :is_like="entity.liked"
+      :likes="entity.likes"
+      :comments="entity.comments"
+      @like-feed="likeFeed"
+    />
+
+    <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";
+import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
+import FeedPreview from "@/Shared/Feed/FeedPreview";
+export default {
+  components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview },
+  emits: ["likeFeed"],
+  props: {
+    entity: Object,
+    user: Object,
+    feed_id: Number,
+  },
+
+  computed: {
+    ...mapGetters(["playing"]),
+    ...mapState({
+        seek: (state) => state.player.seek,
+        playlist_id: (state) => state.player.playlist_id,
+        currentSong: (state) => state.player.currentSong,
+    }),
+  },
+
+  methods: {
+    ...mapActions(["toggleAudio", "newCurrentPlaylist"]),
+    startPlay(music) {
+      if (this.currentSong?.id === music.id) {
+        this.toggleAudio();
+        return;
+      }
+      this.newCurrentPlaylist([this.entity.collection_medias[0], this.entity.collection_medias, this.feed_id]);
+    },
+
+    likeFeed() {
+      this.$emit("likeFeed");
+    },
+  },
+};
+</script>

resources/js/Shared/Feed/Videos.vue

@@ -0,0 +1,41 @@
+<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
+      :is_like="entity.liked"
+      :likes="entity.likes"
+      :comments="entity.comments"
+      @like-feed="likeFeed"
+    />
+
+    <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";
+import FeedHeaderMisc from "@/Shared/Feed/HeaderMisc";
+import FeedPreview from "@/Shared/Feed/FeedPreview";
+export default {
+  components: { FeedFooterMisc, FeedHeaderMisc, FeedPreview },
+  emits: ["likeFeed"],
+  props: {
+    entity: Object,
+    user: Object,
+    feed_id: Number,
+  },
+  methods: {
+    likeFeed() {
+      this.$emit("likeFeed");
+    },
+  },
+};
+</script>