@saooti/octopus-sdk 1.0.0 → 29.0.2

package/src/assets/share.scss

@@ -0,0 +1,343 @@
+@import '../sass/_variables.scss';
+
+.search-icon-container {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+}
+.share-container {
+    @media (max-width: 960px) {
+        flex-grow: 1;
+    }
+}
+.icon-caution {
+    margin-right: 5px;
+    margin-bottom: 2px;
+    height: 25px;
+}
+.flex-no-grow {
+    flex-grow: 0 !important;
+}
+.custom-radio .custom-control-label {
+    cursor: pointer;
+}
+.input-share-player {
+    border: 1px solid #ddd;
+    border-radius: 50px;
+    &#number-input {
+        margin: 0 1rem;
+        width: 60px;
+    }
+}
+.vue-swatches__container {
+    padding: 0 !important;
+    background-color: transparent !important;
+}
+.vue-swatches__swatch--selected {
+    border: 2px #40a372 solid !important;
+    box-shadow: unset !important;
+    -webkit-box-shadow: unset !important;
+}
+.vue-swatches__trigger{
+  border: solid 1px black;
+}
+.share-button-title {
+    height: 2rem;
+}
+
+.podcast-list {
+    align-self: stretch;
+    flex-grow: 1;
+    margin: 1em 0 0;
+    padding: 0;
+    /*For ie11 */
+    display: flex;
+    flex-wrap: wrap;
+    /* end */
+    display: grid; /* 1 */
+    grid-template-columns: repeat(auto-fill, 13rem); /* 2 */
+    grid-gap: 1rem; /* 3 */
+    justify-content: space-between; /* 4 */
+}
+/** PHONES*/
+@media (max-width: 960px) {
+    .podcast-list {
+        align-self: auto;
+        justify-items: center;
+        display: flex;
+        justify-content: space-around;
+    }
+}
+.list-episode {
+    padding: 2rem 0rem 1rem !important;
+    @media (max-width: 450px) {
+        padding: 0.5rem 0rem 1rem !important;
+    }
+    h2 {
+        margin-bottom: 1rem;
+    }
+}
+.podcast-list-inline {
+    align-self: stretch;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 1rem;
+    grid-row: 1;
+  }
+  .out-left-enter-active,
+  .out-left-leave-active,
+  .out-right-enter-active,
+  .out-right-leave-active {
+    transition: all 0.3s ease;
+  }
+  
+  .out-left-leave-to,
+  .out-right-enter {
+    transform: translateX(-110%);
+    opacity: 0;
+  }
+  
+  .out-left-enter,
+  .out-right-leave-to {
+    transform: translateX(110%);
+    opacity: 0;
+  }
+  
+  .out-left-leave-to,
+  .out-right-leave-to {
+    position: absolute;
+  }
+  .out-right-leave-to {
+    right: 5rem;
+    z-index: -1;
+  }
+  /** PHONES*/
+  @media (max-width: 960px) {
+    .podcast-list-inline {
+      display: flex;
+      flex-wrap: nowrap;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      scroll-behavior: smooth;
+      padding-bottom: 1rem;
+      width: 100%;
+      .item-phone-margin {
+        margin: 0 0.5rem !important;
+      }
+    }
+  }
+
+.arrow-transform {
+    transform: rotate(180deg);
+}
+.no-border-round {
+    border-radius: 0;
+}
+.text-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.emission-list {
+    align-self: stretch;
+    flex-grow: 1;
+    margin: 0;
+    padding: 0;
+    /*For ie11 */
+    display: flex;
+    flex-wrap: wrap;
+    /* end */
+  
+    display: grid; /* 1 */
+    grid-gap: 1rem; /* 3 */
+    justify-content: space-between; /* 4 */
+  }
+  .twoEmissions {
+    grid-template-columns: repeat(auto-fill, 49%); /* 2 */
+  }
+  
+  .threeEmissions {
+    grid-template-columns: repeat(auto-fill, 32%); /* 2 */
+  }
+  
+  /** PHONES*/
+  @media (max-width: 1200px) {
+    .emission-list {
+      grid-template-columns: auto;
+    }
+  }
+  .emission-item-container {
+    list-style: none;
+    background: #fff;
+    border-radius: 2rem;
+    display: flex;
+    width: 100%;
+    margin: 1rem 0;
+    .img-box {
+      border-radius: 2rem !important;
+    }
+  }
+  .emission-light-max-size {
+    width: 300px;
+    border-bottom: 1px solid #ddd;
+  }
+  .emission-light-title {
+    color: #333 !important;
+    align-self: flex-end;
+    text-transform: none;
+    font-size: 1.5em;
+    font-weight: normal;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .emission-item-text {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    max-height: 13rem;
+  
+    .emission-name {
+      font-size: 0.9rem;
+      font-weight: 600;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      word-break: break-word;
+    }
+  
+    .emission-description {
+      overflow: hidden;
+      margin-top: 0.5em;
+      word-break: break-word;
+      max-height: 7rem;
+      position: relative;
+      &.after-emission-description:after {
+        content: '...';
+        position: absolute;
+        padding-left: 1rem;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        font-size: 1rem;
+        font-weight: bolder;
+        text-align: center;
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 40%);
+      }
+    }
+  
+    .emission-small-description {
+      -webkit-line-clamp: 2;
+      border-top: 1px solid #ddd;
+      word-break: break-word;
+    }
+  
+    .emission-producer {
+      font-weight: 300;
+      font-size: 0.6rem;
+    }
+  }
+  
+  button.btn.btn-primary.share-btn.m-3 {
+    font-size: 1rem;
+    width: 2.5rem;
+    height: 2.5rem !important;
+    margin: 0 0.8rem 0 0 !important;
+  }
+  /** PHONES*/
+  @media (max-width: 680px) {
+    .emission-item-container {
+      flex-wrap: wrap;
+      width: auto;
+      margin: 0;
+      padding: 1rem;
+      justify-content: center;
+    }
+  }
+  
+  @media (max-width: 450px) {
+    .emission-item-text {
+      padding: 0.5rem 0;
+      text-align: center;
+    }
+  }
+  
+  .comment-item-container {
+    .btn-circle {
+      width: 32px;
+      height: 32px;
+      background: $octopus-secondary-color;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .status-Pending {
+        background: #eb7d22;
+    }
+    .status-Invalid {
+        background: #d40303;
+    }
+    .status-Valid {
+        background: $octopus-primary-color;
+    }
+
+    .status-Valid, .status-Invalid, .status-Pending {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+    }
+    .icon-certified {
+        height: 15px;
+        margin-right: 0.5rem;
+    }
+    .btn-answer {
+        padding: 0.1rem 0.75rem;
+    }
+    .collapsed > .when-opened,
+    :not(.collapsed) > .when-closed {
+        display: none !important;
+    }
+}
+.live-image-status {
+    text-align: center;
+    width: 100%;
+    font-size: 0.6rem;
+    padding: 0.2rem 0;
+    color: white;
+    text-transform: uppercase;
+  }
+
+.saooti-stitcher-logo,
+.saooti-google-podcasts,
+.saooti-amazon,
+.saooti-Whatsapp {
+  position: relative;
+  div {
+    position: absolute;
+    right: 0;
+  }
+}
+.saooti-stitcher-logo,.saooti-amazon {
+  font-size: 1.7rem !important;
+  div {
+    top: -7px;
+  }
+}
+.share-btn{
+  .saooti-stitcher-logo, .saooti-amazon {
+      top: -0.5rem;
+      left: 0.8rem;
+  }
+}

package/src/components/display/aggregator/RssSection.vue

@@ -1,10 +1,10 @@
 <template>
-  <div></div>
+  <div />
 </template>
 
-<style lang="scss"></style>
-
 <script lang="ts">
 import { defineComponent } from 'vue'
-export default defineComponent({});
+export default defineComponent({})
 </script>
+
+<style lang="scss"></style>

package/src/components/display/categories/CategoryChooser.vue

@@ -1,14 +1,21 @@
 <template>
-  <div class="w-100" :style="{ width: width }">
-    <label :for="id" class="d-inline" aria-label="select category"></label>
-    <Multiselect
-      v-model="category"
-      :disabled="isDisabled"
+  <div
+    class="default-multiselect-width"
+    :style="{ width: width }"
+  >
+    <label
+      :for="id"
+      class="d-inline"
+      aria-label="select category"
+    />
+    <VueMultiselect
       :id="id"
+      ref="multiselectRef"
+      v-model="model"
+      :disabled="isDisabled"
       label="name"
       track-by="id"
       :placeholder="$t('Type string to filter by categories')"
-      ref="multiselectRef"
       :options="categories"
       :multiple="multiple"
       :searchable="true"
@@ -24,110 +31,148 @@
       @open="clearAll"
       @search-change="onSearchCategory"
       @close="onClose"
-      @select="onEmissionSelected"
+      @select="onCategorySelected"
     >
-      <template v-slot:singleLabel="props" >
+      <template #singleLabel="{ option }">
         <div class="multiselect-octopus-proposition">
           <span class="option__title">
-            {{ props.option.name }}
+            {{ option.name }}
           </span>
         </div>
       </template>
-      <template v-slot:option="props" >
+      <template #option="{ option }">
         <div class="multiselect-octopus-proposition">
-          <span class="option__title">{{ props.option.name }}</span>
+          <span class="option__title">{{ option.name }}</span>
         </div>
       </template>
-      <template v-slot:noOptions>{{ $t('List is empty') }}</template>
-      <template v-slot:noResult>
-      <span>
-        {{ $t('No elements found. Consider changing the search query.') }}
-      </span>
+      <template #noOptions="">
+        {{ $t('List is empty') }}
       </template>
-      <template v-slot:caret>
-      <div class="position-relative">
-        <span
-          class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
-        ></span>
-      </div>
+      <template #noResult="">
+        <span>
+          {{ $t('No elements found. Consider changing the search query.') }}
+        </span>
       </template>
-    </Multiselect>
+      <template #caret="">
+        <div class="position-relative">
+          <span
+            class="saooti-arrow_down octopus-arrow-down-2 octopus-arrow-down-top"
+          />
+        </div>
+      </template>
+    </VueMultiselect>
   </div>
 </template>
 
-<style lang="scss"></style>
 <script lang="ts">
-import Multiselect from 'vue-multiselect';
-import { state } from '../../../store/paramStore';
+//@ts-ignore
+import VueMultiselect from 'vue-multiselect';
 
-const getDefaultCategory = (defaultName: any) => {
-  if (undefined !== defaultName) return { name: defaultName, id: 0 };
-  return '';
+const getDefaultCategory = (defaultName: string) => {
+  if ('' === defaultName){
+    return undefined;
+  }
+  return { name: defaultName, id: 0 };
 };
 
-import { defineComponent, ref } from 'vue'
+import { Category } from '@/store/class/category';
+import { defineComponent } from 'vue'
 export default defineComponent({
   components: {
-    Multiselect,
+    VueMultiselect
   },
-
   props: {
-    width: { default: '100%' },
-    defaultanswer: { default: undefined as any },
-    categorySelected: { default: undefined as any },
-    multiple: { default: false },
-    categoryArray: { default: undefined as any },
-    displayAllCategories: { default: false },
-    isDisabled: { default: false },
+    width: { default: '100%', type: String },
+    defaultanswer: { default: '', type: String },
+    categorySelected: { default: undefined, type: Number },
+    multiple: { default: false, type: Boolean },
+    categoryArray: { default: undefined, type: Array as ()=>Array<number> },
+    displayAllCategories: { default: false, type: Boolean },
+    isDisabled: { default: false, type: Boolean },
+    initCategories: { default: undefined, type: Array as ()=>Array<Category> },
+  },
+  emits: ['update:categorySelected','selected'],
+  data() {
+    return {
+      categories: [] as Array<Category>,
+      category: getDefaultCategory(this.defaultanswer) as Category|undefined,
+      categoryForArray: [getDefaultCategory(this.defaultanswer)] as Array<Category>|undefined,
+      isLoading: false as boolean,
+      totalCategories: [] as Array<Category>,
+      init: true as boolean,
+      initArray: false as boolean,
+    };
   },
-  emits: ['update:categorySelected', 'selected'],
+
 
   computed: {
-    allCategories() {
-      return state.generalParameters.allCategories.sort((a:any, b:any) =>
+    categoriesChosen(): Array<Category>{
+      if(this.initCategories){
+        return this.initCategories;
+      }
+      return this.$store.state.categories;
+    },
+    allCategories(): Array<Category> {
+      return [...this.categoriesChosen].sort((a: Category, b: Category) =>
         a.name > b.name ? 1 : -1
       );
     },
-    id():string {
+    id(): string {
       if (this.multiple) return 'categoryChooser' + this.multiple;
       return 'categoryChooser';
     },
-  },
+    model: {
+      get(): Category| Array<Category>|undefined{
+        if(false===this.initArray){
+          return this.category;
+        }
+        return this.categoryForArray;
+      },
+      set(value: any): void{
+        if(false===this.initArray){
+          this.category = value;
+          return
+        }
+        this.categoryForArray = value;
+      }
 
-  data() {
-    return {
-      categories: [] as any,
-      category: getDefaultCategory(this.defaultanswer) as any,
-      isLoading: false,
-      totalCategories: undefined as any,
-      init: true,
-    };
+    }
   },
-
-  setup() {
-    const multiselect : any = ref(null);
-    return {
-      multiselect,
-    };
+  watch: {
+    categorySelected(): void {
+      if(this.categorySelected){
+        this.initCategorySelected(this.categorySelected);
+      }
+    },
+    model(): void {
+      if(undefined===this.categoryArray ||undefined === this.categoryForArray){
+        return;
+      }
+      const idsArray: Array<number> = [];
+      this.categoryForArray.forEach((el: Category) => {
+        idsArray.push(el.id);
+      });
+      this.$emit('selected', idsArray);
+    },
   },
-
+ 
   mounted() {
     if (undefined !== this.categorySelected) {
       this.initCategorySelected(this.categorySelected);
     }
     if (undefined !== this.categoryArray) {
       this.initCategoryArray(this.categoryArray);
+      this.initArray=true;
     }
   },
-
   methods: {
-    clearAll() {
-      this.multiselect.$refs.search.setAttribute(
+    clearAll(): void {
+      (this.$refs.multiselectRef as any).$refs.search.setAttribute(
         'autocomplete',
         'off'
       );
       if (undefined === this.categoryArray) {
-        this.category = '';
+        this.category = undefined;
       }
       if (
         undefined !== this.categorySelected ||
@@ -136,75 +181,77 @@ export default defineComponent({
       ) {
         this.totalCategories = this.allCategories;
       } else {
-        this.totalCategories = this.allCategories.filter((c: { podcastCount: any; }) => {
+        this.totalCategories = this.allCategories.filter((c: Category) => {
           return c.podcastCount;
         });
       }
-      if (undefined !== this.defaultanswer) {
-        this.categories = [getDefaultCategory(this.defaultanswer)].concat(
-          this.totalCategories
-        );
+      if ('' !== this.defaultanswer) {
+        const categoryDefault = getDefaultCategory(this.defaultanswer);
+        if(categoryDefault){
+          this.categories = [categoryDefault].concat(
+            this.totalCategories
+          );
+        }
       } else {
         this.categories = this.totalCategories;
       }
     },
-
-    onClose() {
+    onClose(): void {
       if (!this.category && undefined === this.categoryArray) {
         this.category = getDefaultCategory(this.defaultanswer);
-        this.onEmissionSelected(this.category);
+        if(this.category){
+          this.onCategorySelected(this.category);
+        }
       }
     },
-
-    onSearchCategory(query: string) {
+    onSearchCategory(query: string): void {
       this.isLoading = true;
-      let list = [getDefaultCategory(this.defaultanswer)].concat(
-        this.totalCategories
-      );
-      if (undefined === this.defaultanswer) {
-        list = this.totalCategories;
+      const categoryDefault = getDefaultCategory(this.defaultanswer);
+      if(categoryDefault){
+        let list: Array<Category> = [categoryDefault].concat(
+          this.totalCategories
+        );
+        if ('' === this.defaultanswer) {
+          list = this.totalCategories;
+        }
+        this.categories = list.filter((item: Category) => {
+          return item.name.toUpperCase().includes(query.toUpperCase());
+        });
       }
-      this.categories = list.filter((item:any) => {
-        return item.name.toUpperCase().includes(query.toUpperCase());
-      });
       this.isLoading = false;
     },
-
-    onEmissionSelected(category: any) {
+    onCategorySelected(category: Category): void {
       if (undefined !== this.categorySelected) {
         this.$emit('update:categorySelected', category.id);
       } else if (undefined === this.categoryArray) {
         this.$emit('selected', category);
       }
     },
-    initCategorySelected(val: any) {
-      this.category = state.generalParameters.allCategories.find((el: { id: any; }) => {
+    initCategorySelected(val: number): void {
+      let categorySelected = this.categoriesChosen.find((el: Category) => {
         return el.id === val;
       });
+      if(!categorySelected){
+        categorySelected = getDefaultCategory(this.defaultanswer);
+      }
+      this.category = categorySelected;
     },
-    initCategoryArray(val: any[]) {
-      this.category.length = 0;
-      val.forEach((element: any) => {
-        let item = state.generalParameters.allCategories.find((el: { id: any; }) => {
+    initCategoryArray(val: Array<number>): void {
+      if(!this.categoryForArray){
+        return;
+      }
+      this.categoryForArray.length = 0;
+      val.forEach((element: number) => {
+        const item = this.categoriesChosen.find((el: Category) => {
           return el.id === element;
         });
-        this.category.push(item);
+        if(this.categoryForArray && item){
+          this.categoryForArray.push(item);
+        }
       });
     },
   },
-  watch: {
-    categorySelected(newVal) {
-      this.initCategorySelected(newVal);
-    },
-    category(newVal) {
-      if (undefined === this.categoryArray) return;
-
-      let idsArray: any[] = [];
-      newVal.forEach((el: { id: any; }) => {
-        idsArray.push(el.id);
-      });
-      this.$emit('selected', idsArray);
-    },
-  },
-});
+})
 </script>
+
+<style lang="scss"></style>