{
  "name": "divitorque/video-modal",
  "d4Shortcode": "ba_video_popup",
  "moduleClassName": "dtq_video_modal",
  "moduleOrderClassName": "dtq_video_modal",
  "title": "Video Modal",
  "titles": "Video Modals",
  "moduleIcon": "divitorque/video-modal",
  "category": "module",
  "attributes": {
    "module": {
      "type": "object",
      "selector": "{{selector}}",
      "default": {
        "advanced": {
          "useOverlay": {
            "desktop": {
              "value": "on"
            }
          },
          "triggerElement": {
            "desktop": {
              "value": "icon"
            }
          },
          "icon": {
            "desktop": {
              "value": "1"
            }
          },
          "type": {
            "desktop": {
              "value": "yt"
            }
          },
          "useAnimation": {
            "desktop": {
              "value": "off"
            }
          },
          "waveBg": {
            "desktop": {
              "value": "#ffffff"
            }
          },
          "iconAlignment": {
            "desktop": {
              "value": "center"
            }
          },
          "iconSpacing": {
            "desktop": {
              "value": "20px"
            }
          },
          "iconColor": {
            "desktop": {
              "value": "#5b2cff"
            }
          },
          "iconSize": {
            "desktop": {
              "value": "60px"
            }
          },
          "iconOpacity": {
            "desktop": {
              "value": "1"
            }
          },
          "iconHeight": {
            "desktop": {
              "value": "initial"
            }
          },
          "iconWidth": {
            "desktop": {
              "value": "initial"
            }
          },
          "iconRadius": {
            "desktop": {
              "value": "0px"
            }
          },
          "popupBg": {
            "desktop": {
              "value": "rgba(0,0,0,.8)"
            }
          },
          "closeIconColor": {
            "desktop": {
              "value": "#ffffff"
            }
          },
          "useTextBox": {
            "desktop": {
              "value": "off"
            }
          },
          "textBoxHeight": {
            "desktop": {
              "value": "80px"
            }
          },
          "textBoxWidth": {
            "desktop": {
              "value": "80px"
            }
          },
          "textBoxBg": {
            "desktop": {
              "value": "#5b2cff"
            }
          },
          "textBoxRadius": {
            "desktop": {
              "value": "0px"
            }
          }
        }
      },
      "settings": {
        "meta": {
          "adminLabel": {}
        },
        "advanced": {
          "htmlAttributes": {},
          "useOverlay": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.useOverlay",
              "label": "Use Overlay Image",
              "description": "Here you can choose whether overlay image should be used.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "triggerElement": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.triggerElement",
              "label": "Button Element",
              "description": "Here you can select button element for the video popup.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "icon": {
                      "label": "Icon"
                    },
                    "text": {
                      "label": "Text"
                    },
                    "icon_text": {
                      "label": "Icon & Text"
                    }
                  }
                }
              }
            }
          },
          "icon": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.icon",
              "label": "Select Play Icon",
              "description": "Here you can select different type of play icon from the video.",
              "priority": 50,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "1": {
                      "label": "Icon 1"
                    },
                    "2": {
                      "label": "Icon 2"
                    },
                    "3": {
                      "label": "Icon 3"
                    },
                    "4": {
                      "label": "Icon 4"
                    },
                    "5": {
                      "label": "Icon 5"
                    },
                    "6": {
                      "label": "Icon 6"
                    },
                    "custom": {
                      "label": "Custom Icon"
                    }
                  }
                }
              }
            }
          },
          "customPlayIcon": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.customPlayIcon",
              "label": "Custom Icon",
              "description": "Here you can define custom icon for the video.",
              "priority": 60,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/upload"
              }
            }
          },
          "type": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.type",
              "label": "Video Type",
              "description": "Define video type for the popup.",
              "priority": 80,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "yt": {
                      "label": "Youtube"
                    },
                    "vm": {
                      "label": "Vimeo"
                    },
                    "video": {
                      "label": "Custom Upload"
                    }
                  }
                }
              }
            }
          },
          "videoLink": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.videoLink",
              "label": "Video URL",
              "description": "Here you can define the URL for the video you would like to display.",
              "priority": 90,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false,
                "dynamicContent": true
              },
              "component": {
                "type": "field",
                "name": "divi/text"
              }
            }
          },
          "video": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "module.advanced.video",
              "label": "Video MP4 File",
              "description": "Upload your desired video in .MP4 format, or type in the URL to the video you would like to display",
              "priority": 100,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/upload"
              }
            }
          },
          "useAnimation": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.useAnimation",
              "label": "Use Animated Icon",
              "description": "Use animated wave for your icon. For better experience please set icon background color from icon design toggle.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "waveBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.waveBg",
              "label": "Animated Wave Color",
              "description": "Here you can define custom color for the animated wave of your icon.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "iconAlignment": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.iconAlignment",
              "label": "Icon/Text Alignment",
              "description": "Align content to the left, right or center.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "left": {
                      "label": "Left"
                    },
                    "center": {
                      "label": "Center"
                    },
                    "right": {
                      "label": "Right"
                    }
                  }
                }
              }
            }
          },
          "iconSpacing": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentSettings",
              "attrName": "module.advanced.iconSpacing",
              "label": "Spacing Between Icon and Text",
              "description": "Here you can define spacing between icon and text.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 100,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "imgHeight": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designImage",
              "attrName": "module.advanced.imgHeight",
              "label": "Image Height",
              "description": "Here you can define static height for your image.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 500,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "iconColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconColor",
              "label": "Color",
              "description": "Here you can define custom color for your icon.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "iconSize": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconSize",
              "label": "Size",
              "description": "Here you can define custom size for your icon.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 200,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "iconOpacity": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconOpacity",
              "label": "Opacity",
              "description": "Define the opacity for the icon. Set the value from 0 - 1. The lower value, the more transparent.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 1,
                  "step": 0.02
                }
              }
            }
          },
          "iconHeight": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconHeight",
              "label": "Height",
              "description": "Here you can define static height for your icon.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 300,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "iconWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconWidth",
              "label": "Width",
              "description": "Here you can define static width for your icon.",
              "priority": 50,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 300,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "iconBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconBg",
              "label": "Background",
              "description": "Here you can define custom background for your icon.",
              "priority": 60,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "iconRadius": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designIcon",
              "attrName": "module.advanced.iconRadius",
              "label": "Border Radius",
              "description": "Here you can define the radius value for your icon border.",
              "priority": 70,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 400,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "useTextBox": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designText",
              "attrName": "module.advanced.useTextBox",
              "label": "Use Text Box",
              "description": "Here you can choose whether text box should be used.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/toggle"
              }
            }
          },
          "textBoxHeight": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designText",
              "attrName": "module.advanced.textBoxHeight",
              "label": "Text Box Height",
              "description": "Here you can define static height for your text box.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 300,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "textBoxWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designText",
              "attrName": "module.advanced.textBoxWidth",
              "label": "Text Box Width",
              "description": "Here you can define static width for your text box.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": true,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 300,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "textBoxBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designText",
              "attrName": "module.advanced.textBoxBg",
              "label": "Text Box Background",
              "description": "Here you can define custom background for your text box.",
              "priority": 40,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": true
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "textBoxRadius": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designText",
              "attrName": "module.advanced.textBoxRadius",
              "label": "Text Box Border Radius",
              "description": "Here you can define the radius value for your text box border.",
              "priority": 50,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": {
                  "min": 0,
                  "max": 400,
                  "step": 1,
                  "defaultUnit": "px"
                }
              }
            }
          },
          "popupBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designPopup",
              "attrName": "module.advanced.popupBg",
              "label": "Popup Background",
              "description": "Here you can define custom background color for your popup.",
              "priority": 10,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          },
          "closeIconColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designPopup",
              "attrName": "module.advanced.closeIconColor",
              "label": "Close Icon Color",
              "description": "Here you can define custom color for your popup close icon.",
              "priority": 20,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/color-picker",
                "props": {
                  "isAlpha": true
                }
              }
            }
          }
        },
        "decoration": {
          "animation": {},
          "layout": {},
          "background": {},
          "border": {},
          "boxShadow": {},
          "filters": {},
          "overflow": {},
          "position": {},
          "scroll": {},
          "spacing": {},
          "sizing": {},
          "sticky": {},
          "transform": {},
          "transition": {},
          "zIndex": {},
          "disabledOn": {}
        }
      }
    },
    "image": {
      "type": "object",
      "selector": "{{selector}} .dtq-video-popup-figure img",
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentMain",
            "attrName": "image.innerContent",
            "label": "Image",
            "description": "Here you can define placeholder image for the video.",
            "priority": 20,
            "render": true,
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            },
            "component": {
              "type": "field",
              "name": "divi/upload"
            }
          }
        },
        "advanced": {
          "alt": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentMain",
              "attrName": "image.advanced.alt",
              "label": "Image Alt Text",
              "description": "Here you can define the HTML ALT text for your overlay image.",
              "priority": 30,
              "render": true,
              "features": {
                "sticky": false,
                "responsive": false,
                "hover": false
              },
              "component": {
                "type": "field",
                "name": "divi/text"
              }
            }
          }
        }
      }
    },
    "overlay": {
      "type": "object",
      "selector": "{{selector}} .dtq-video-popup-figure:before",
      "settings": {
        "decoration": {
          "background": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designImage",
              "priority": 20,
              "render": true,
              "attrName": "overlay.decoration.background",
              "component": {
                "name": "divi/background",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Image Overlay"
                }
              }
            }
          }
        }
      }
    },
    "text": {
      "type": "object",
      "selector": "{{selector}} .dtq-video-popup .dtq-video-popup-text",
      "elementType": "plainText",
      "tagName": "span",
      "inlineEditor": "plainText",
      "attributes": {
        "class": "dtq-video-popup-text"
      },
      "default": {
        "innerContent": {
          "desktop": {
            "value": "Play"
          }
        },
        "decoration": {
          "font": {
            "font": {
              "desktop": {
                "value": {
                  "size": "16px"
                }
              }
            }
          }
        }
      },
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentMain",
            "attrName": "text.innerContent",
            "label": "Trigger Text",
            "description": "Define the trigger text for your popup.",
            "priority": 70,
            "render": true,
            "features": {
              "sticky": false,
              "responsive": false,
              "hover": false,
              "dynamicContent": true
            },
            "component": {
              "type": "field",
              "name": "divi/text"
            }
          }
        },
        "decoration": {
          "font": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTextFont",
              "priority": 10,
              "render": true,
              "component": {
                "name": "divi/font",
                "type": "group",
                "props": {
                  "grouped": false,
                  "fieldLabel": "Text",
                  "hideTextAlign": true
                }
              }
            }
          }
        }
      }
    }
  },
  "customCssFields": {
    "image": {
      "subName": "image",
      "selectorSuffix": " .dtq-video-popup .dtq-video-popup-figure img"
    },
    "iconWrapper": {
      "subName": "iconWrapper",
      "selectorSuffix": " .dtq-video-popup .dtq-video-popup-icon"
    },
    "icon": {
      "subName": "icon",
      "selectorSuffix": " .dtq-video-popup .dtq-video-popup-icon svg"
    },
    "text": {
      "subName": "text",
      "selectorSuffix": " .dtq-video-popup .dtq-video-popup-text"
    }
  },
  "settings": {
    "content": "auto",
    "design": "auto",
    "advanced": "auto",
    "groups": {
      "contentMain": {
        "panel": "content",
        "priority": 10,
        "groupName": "mainContent",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Content"
          }
        }
      },
      "contentSettings": {
        "panel": "content",
        "priority": 20,
        "groupName": "settings",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Settings"
          }
        }
      },
      "designImage": {
        "panel": "design",
        "priority": 10,
        "groupName": "image",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Image"
          }
        }
      },
      "designIcon": {
        "panel": "design",
        "priority": 20,
        "groupName": "icon",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Icon"
          }
        }
      },
      "designText": {
        "panel": "design",
        "priority": 30,
        "groupName": "text",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Text"
          }
        }
      },
      "designTextFont": {
        "panel": "design",
        "priority": 35,
        "groupName": "textFont",
        "multiElements": true,
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Text Font",
            "clipboardCategory": "style",
            "presetGroup": "divi/font"
          }
        }
      },
      "designPopup": {
        "panel": "design",
        "priority": 40,
        "groupName": "popup",
        "component": {
          "name": "divi/composite",
          "props": {
            "groupLabel": "Popup"
          }
        }
      }
    }
  }
}