{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "debugMode": true,
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "margin-left": "10px",
          "margin-right": "25px",
          "height": "100%"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=getThumbnailImage([$Thumbnail], 500, 281)",
              "title": "[$Title]"
            },
            "style": {
              "border": "1px solid #808080",
              "border-radius": "2%",
              "width": "500px",
              "max-width": "100%"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "border-left": "2px solid rgba(200, 200, 200, 0.5)",
          "padding-left": "2px"
        },
        "children": [
          {
            "elmType": "div",
            "inlineEditField": "[$Title]",
            "attributes": {
              "class": "sp-row-title"
            },
            "style": {
              "font-weight": "lighter",
              "font-size": "x-large",
              "margin-left": "10px"
            },
            "txtContent": "=if([$Title] == '', [$FileLeafRef], [$Title])"
          },
          {
            "elmType": "div",
            "inlineEditField": "[$Date]",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin-bottom": "10px",
              "margin-left": "10px",
              "font-size": "larger"
            },
            "txtContent": "=if(toLocaleDateString([$Date]) == '', toLocaleDateString([$Created]), toLocaleDateString([$Date]))"
          },
          {
            "elmType": "span",
            "style": {
              "font-weight": "normal",
              "font-size": "large",
              "display": "=if([$VideoDescription] == '', 'none', 'block')",
              "margin-top": "10px",
              "margin-left": "10px"
            },
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "Video Description:"
          },
          {
            "elmType": "div",
            "inlineEditField": "[$VideoDescription]",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "style": {
              "margin": "10px 10px",
              "width": "70%",
              "font-size": "larger"
            },
            "txtContent": "[$VideoDescription]"
          },
          {
            "elmType": "div",
            "style": {
              "text-align": "left",
              "margin-left": "6px",
              "margin-bottom": "10px"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Like": "=if(indexOf([$Like.email], @me) > -1, removeFrom([$Like.email], @me), appendTo([$Like.email], @me))",
                    "Dislike": "=removeFrom([$Dislike.email], @me)"
                  }
                },
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                  "title": "I Love This!"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "=if(indexOf([$Like.email], @me) > -1, 'LikeSolid', 'Like')"
                    },
                    "style": {
                      "padding-right": "6px"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "=length([$Like])"
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Like": "=removeFrom([$Like.email], @me)",
                    "Dislike": "=if(indexOf([$Dislike.email], @me) > -1, removeFrom([$Dislike.email], @me), appendTo([$Dislike.email], @me))"
                  }
                },
                "attributes": {
                  "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover",
                  "title": "I Dislike This!"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "=if(indexOf([$Dislike.email], @me) > -1, 'DislikeSolid', 'Dislike')"
                    },
                    "style": {
                      "padding-right": "6px"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "=length([$Dislike])"
                  }
                ]
              }
            ]
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "style": {
              "width": "150px",
              "margin-left": "10px",
              "display": "inline-block"
            },
            "txtContent": "Watch Now",
            "attributes": {
              "class": "sp-row-button ms-bgColor-themePrimary sp-row-button ms-bgColor-themeDarkAlt--hover ms-fontWeight-semibold ms-fontColor-white"
            }
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "share"
            },
            "style": {
              "width": "150px",
              "margin-left": "10px"
            },
            "txtContent": "Share",
            "attributes": {
              "class": "sp-row-button ms-bgColor-grey sp-row-button ms-bgColor-neutralQuaternary--hover ms-fontColor-white--hover"
            }
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "editProps"
            },
            "style": {
              "width": "150px",
              "margin-left": "10px",
              "display": "=(if(@me == [$Author.email], 'inline-block', 'none'))"
            },
            "txtContent": "Edit Details",
            "attributes": {
              "class": "sp-row-button ms-bgColor-grey sp-row-button ms-bgColor-neutralQuaternary--hover ms-fontColor-white--hover"
            }
          }
        ]
      }
    ]
  }
}